/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* ===== CHAEBOL KIDS - NOUS STYLE PRIMARY MENU ===== */
#wide-nav, 
.header-bottom, 
.header-bottom.wide-nav {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #FFFFFF !important;
  min-height: 48px !important;
  border-top: 1px solid #F0ECE4 !important;
  border-bottom: 1px solid #EAE5DC !important;
}

#wide-nav .flex-row,
.header-bottom .flex-row {
  min-height: 48px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

#wide-nav .flex-col,
.header-bottom .flex-col {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

#wide-nav .header-nav,
.header-bottom-nav,
ul.header-bottom-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  gap: 0 !important;
}

#wide-nav li,
.header-bottom-nav > li,
.header-nav > li {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}

#wide-nav a,
#wide-nav a.nav-top-link,
.header-bottom-nav > li > a,
.header-bottom .nav > li > a,
.header-bottom-nav a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: #212529 !important;
  padding: 13px 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: nowrap !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}

#wide-nav a:hover,
#wide-nav a.nav-top-link:hover,
.header-bottom-nav > li > a:hover,
.header-bottom .nav > li > a:hover,
.header-bottom-nav a:hover,
#wide-nav li.current-menu-item > a,
.header-bottom-nav > li.current-menu-item > a,
.header-bottom-nav > li.active > a {
  color: #926625 !important;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

}


/* ===== WPFORMS NOUS TONE NÂU BE STYLING ===== */
.ck-contact-form-card .wpforms-container {
  margin: 0 !important;
}
.ck-contact-form-card .wpforms-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ck-contact-form-card .wpforms-field {
  padding: 0 !important;
  margin-bottom: 4px !important;
}
.ck-contact-form-card .wpforms-field-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #333333 !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.ck-contact-form-card .wpforms-field-label .wpforms-required-label {
  color: #c0392b !important;
  font-weight: 700 !important;
}
.ck-contact-form-card input[type="text"],
.ck-contact-form-card input[type="email"],
.ck-contact-form-card textarea {
  width: 100% !important;
  border-radius: 8px !important;
  border: 1.5px solid #DDD6CD !important;
  padding: 12px 16px !important;
  font-family: 'Mulish', sans-serif !important;
  font-size: 14px !important;
  background-color: #FAFAFA !important;
  color: #333333 !important;
  transition: all 0.25s ease !important;
  outline: none !important;
  box-shadow: none !important;
}
.ck-contact-form-card input[type="text"]:focus,
.ck-contact-form-card input[type="email"]:focus,
.ck-contact-form-card textarea:focus {
  border-color: #926625 !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(146, 102, 37, 0.12) !important;
}
.ck-contact-form-card .wpforms-submit-container {
  padding: 8px 0 0 !important;
  margin: 0 !important;
}
.ck-contact-form-card .wpforms-submit {
  width: 100% !important;
  background-color: #926625 !important;
  border: none !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 15px 24px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(146, 102, 37, 0.25) !important;
  transition: all 0.25s ease !important;
}
.ck-contact-form-card .wpforms-submit:hover {
  background-color: #7a5520 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(146, 102, 37, 0.35) !important;
}



/* ===== TOPBAR ENHANCED STYLING ===== */
#top-bar {
  min-height: 40px !important;
  background-color: #F8F6F2 !important;
  border-bottom: 1px solid #E8E0D4 !important;
}
#top-bar .flex-row {
  min-height: 40px !important;
}
#top-bar .flex-left {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
#top-bar .flex-right {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
#top-bar span, #top-bar a, #top-bar li {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #444444 !important;
  white-space: nowrap !important;
}
#top-bar strong {
  color: #212529 !important;
}
#top-bar a:hover {
  color: #926625 !important;
}

/* ===== NEWSLETTER BANNER NOUS STYLE (Ảnh 2) ===== */
.ck-nl-banner {
  display: flex !important;
  align-items: stretch !important;
  background: #FFFFFF !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid #EAE5DC !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.05) !important;
  min-height: 380px !important;
}
.ck-nl-left {
  flex: 1 1 52% !important;
  padding: 50px 55px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.ck-nl-right {
  flex: 1 1 48% !important;
  position: relative !important;
  overflow: hidden !important;
}
.ck-nl-right img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ===== MY ACCOUNT NOUS TONE NÂU BE (Ảnh 3) ===== */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: #FFFFFF !important;
  border: 1px solid #EAE5DC !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
  padding: 10px 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block !important;
  padding: 14px 22px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: #333333 !important;
  text-decoration: none !important;
  border-left: 4px solid transparent !important;
  transition: all 0.2s ease !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background-color: #F8F6F2 !important;
  color: #926625 !important;
  border-left-color: #926625 !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
  background: #FFFFFF !important;
  border: 1px solid #EAE5DC !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
  padding: 35px 40px !important;
  font-family: 'Mulish', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.8 !important;
  color: #444444 !important;
}
.woocommerce-account .woocommerce-MyAccount-content a {
  color: #926625 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content a:hover {
  color: #7a5520 !important;
  text-decoration: underline !important;
}
/* Style account dashboard action buttons */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
  background-color: #926625 !important;
  border-color: #926625 !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
}

/* ===== WOOCOMMERCE SHOP 4 COLUMNS GUARANTEE (Ảnh 4) ===== */
@media (min-width: 850px) {
  .archive.woocommerce ul.products,
  .archive.woocommerce .products.row {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .archive.woocommerce ul.products li.product,
  .archive.woocommerce .products.row > .col {
    max-width: 25% !important;
    flex: 0 0 25% !important;
  }
}

/* ===== USER CUSTOM REQUESTS: MENU COLORS & FOOTER ===== */
/* Default Menu items: Brown (#926625) */
.header-nav > li > a,
#masthead .nav > li > a,
.nav-line-bottom > li > a {
    color: #926625 !important;
    font-weight: 700 !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
}

/* Active / Selected Menu item: Black (#000000) */
.header-nav > li.active > a,
.header-nav > li.current-menu-item > a,
.header-nav > li.current_page_item > a,
.header-nav > li.current-menu-parent > a,
.header-nav > li.current-menu-ancestor > a,
#masthead .nav > li.active > a,
#masthead .nav > li.current-menu-item > a,
#masthead .nav > li.current_page_item > a,
#masthead .nav > li.current-menu-parent > a,
#masthead .nav > li.current-menu-ancestor > a {
    color: #000000 !important;
    border-bottom: 2px solid #000000 !important;
}

.header-nav > li > a:hover,
#masthead .nav > li > a:hover {
    color: #000000 !important;
}

/* Breadcrumb Category Title Active Color */
.woocommerce-breadcrumb,
.breadcrumb {
    color: #926625 !important;
}
.woocommerce-breadcrumb a,
.breadcrumb a {
    color: #926625 !important;
}
.woocommerce-breadcrumb a:hover,
.breadcrumb a:hover {
    color: #000000 !important;
}
.woocommerce-breadcrumb strong,
.woocommerce-breadcrumb span.last,
.breadcrumb .current {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Hide payment icons in footer */
.footer-secondary,
.payment-icons,
.absolute-footer .footer-secondary,
.absolute-footer .payment-icons {
    display: none !important;
}

/* Make copyright center or aligned cleanly */
.absolute-footer .footer-primary {
    float: none !important;
    text-align: center !important;
    width: 100% !important;
}

/* Ensure shop category and archive full width when sidebar is disabled */
.archive.woocommerce .shop-container .col.large-9,
.tax-product_cat .shop-container .col.large-9,
.woocommerce-page .shop-container .col.large-9 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
}

.archive.woocommerce #shop-sidebar,
.tax-product_cat #shop-sidebar,
.woocommerce-page #shop-sidebar,
.archive.woocommerce .col.large-3.hide-for-medium,
.tax-product_cat .col.large-3.hide-for-medium {
    display: none !important;
}

/* ===== COLLECTION HEADER & VIEW MORE FIX (Ảnh 2) ===== */
.ck-collection-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 24px !important;
    padding: 0 4px !important;
}

.ck-col-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.ck-col-viewmore {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #444444 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
    flex-shrink: 0 !important;
}

.ck-col-viewmore:hover {
    color: #926625 !important;
}

/* ===== NOUS BABY GALLERY ICON & TITLE ALIGNMENT (Ảnh 3) ===== */
.ck-baby-gallery-wrap {
    margin-top: 40px !important;
    margin-bottom: 50px !important;
}

.ck-baby-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
}

.ck-baby-header img {
    width: 26px !important;
    height: auto !important;
    max-height: 24px !important;
    margin: 0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.ck-baby-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* ===== GLOSSY / 3D BUBBLE BUTTON STYLING (Ảnh 4) ===== */
/* Glossy button style for primary / secondary buttons across site */
.button.primary,
.button.secondary,
.btn-glossy,
.single-product form.cart .single_add_to_cart_button,
.ck-contact-form-card .wpforms-submit {
    position: relative !important;
    background: linear-gradient(180deg, #a47633 0%, #83571a 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid #724b15 !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    box-shadow: 0 4px 12px rgba(131, 87, 26, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    overflow: hidden !important;
}

.button.primary:hover,
.button.secondary:hover,
.btn-glossy:hover,
.single-product form.cart .single_add_to_cart_button:hover,
.ck-contact-form-card .wpforms-submit:hover {
    background: linear-gradient(180deg, #b07e38 0%, #8e5e1e 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(131, 87, 26, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
    color: #FFFFFF !important;
}

.button.primary:active,
.button.secondary:active,
.btn-glossy:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 6px rgba(131, 87, 26, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Outline button with smooth subtle shadow */
.button.outline.secondary,
.button.outline {
    border: 1.5px solid #926625 !important;
    color: #926625 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    transition: all 0.25s ease !important;
}

.button.outline.secondary:hover,
.button.outline:hover {
    background: linear-gradient(180deg, #a47633 0%, #83571a 100%) !important;
    border-color: #83571a !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(131, 87, 26, 0.35) !important;
}

/* Also for buttons on Homepage Brand Intro (VỀ CHÚNG TÔI / TƯ VẤN ZALO) */
.button.secondary[href*="zalo"],
.button[href*="zalo"] {
    background: linear-gradient(180deg, #1a7bff 0%, #005ce6 100%) !important;
    border-color: #0050cc !important;
    box-shadow: 0 4px 12px rgba(0, 92, 230, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}
.button.secondary[href*="zalo"]:hover,
.button[href*="zalo"]:hover {
    background: linear-gradient(180deg, #338bff 0%, #0066ff 100%) !important;
    box-shadow: 0 6px 16px rgba(0, 92, 230, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

/* ===== GLOSSY / 3D BUBBLE BUTTON STYLING (Ảnh 4) ===== */
a.button.secondary[href*="gioi-thieu"],
a.button[href*="gioi-thieu"],
a.button.secondary[href*="zalo"],
a.button[href*="zalo"],
.single-product form.cart .single_add_to_cart_button,
.ck-contact-form-card .wpforms-submit {
    position: relative !important;
    background: linear-gradient(180deg, #a47633 0%, #83571a 100%) !important;
    background-color: #83571a !important;
    color: #FFFFFF !important;
    border: 1px solid #724b15 !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 5px 15px rgba(131, 87, 26, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

a.button.secondary[href*="gioi-thieu"]:hover,
a.button[href*="gioi-thieu"]:hover,
a.button.secondary[href*="zalo"]:hover,
a.button[href*="zalo"]:hover,
.single-product form.cart .single_add_to_cart_button:hover,
.ck-contact-form-card .wpforms-submit:hover {
    background: linear-gradient(180deg, #b07e38 0%, #8e5e1e 100%) !important;
    background-color: #8e5e1e !important;
    color: #FFFFFF !important;
    border-color: #724b15 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(131, 87, 26, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.55) !important;
}

a.button.secondary[href*="gioi-thieu"]:active,
a.button[href*="gioi-thieu"]:active,
a.button.secondary[href*="zalo"]:active,
a.button[href*="zalo"]:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 6px rgba(131, 87, 26, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

a.button.secondary[href*="gioi-thieu"] span,
a.button[href*="gioi-thieu"] span,
a.button.secondary[href*="zalo"] span,
a.button[href*="zalo"] span {
    color: #FFFFFF !important;
    letter-spacing: 1.2px !important;
}

/* Match both buttons in Intro to authentic brown glossy tone */
a.button.secondary[href*="zalo"],
a.button[href*="zalo"] {
    background: linear-gradient(180deg, #a47633 0%, #83571a 100%) !important;
    background-color: #83571a !important;
    color: #FFFFFF !important;
    border: 1px solid #724b15 !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 5px 15px rgba(131, 87, 26, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
}

a.button.secondary[href*="zalo"]:hover,
a.button[href*="zalo"]:hover {
    background: linear-gradient(180deg, #b07e38 0%, #8e5e1e 100%) !important;
    background-color: #8e5e1e !important;
    box-shadow: 0 8px 20px rgba(131, 87, 26, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.55) !important;
}

/* ===== STRICT USER MENU COLOR REQUIREMENT (Ảnh 1) ===== */
/* Tất cả các chữ menu mặc định màu NÂU (#926625) */
#wide-nav a,
#wide-nav a.nav-top-link,
.header-bottom-nav > li > a,
.header-bottom .nav > li > a,
.header-bottom-nav a,
.header-nav > li > a,
#masthead .nav > li > a,
.nav-line-bottom > li > a {
  color: #926625 !important;
}

/* Khi di chuột (hover) hoặc khi khách ấn chọn thư mục (active/current) thì chuyển sang màu ĐEN (#000000) */
#wide-nav a:hover,
#wide-nav a.nav-top-link:hover,
.header-bottom-nav > li > a:hover,
.header-bottom .nav > li > a:hover,
.header-bottom-nav a:hover,
.header-nav > li > a:hover,
#masthead .nav > li > a:hover,
#wide-nav li.current-menu-item > a,
#wide-nav li.active > a,
.header-bottom-nav > li.current-menu-item > a,
.header-bottom-nav > li.current_page_item > a,
.header-bottom-nav > li.current-menu-parent > a,
.header-bottom-nav > li.current-menu-ancestor > a,
.header-bottom-nav > li.active > a,
.header-nav > li.current-menu-item > a,
.header-nav > li.current_page_item > a,
.header-nav > li.current-menu-parent > a,
.header-nav > li.current-menu-ancestor > a,
.header-nav > li.active > a,
#masthead .nav > li.current-menu-item > a,
#masthead .nav > li.current_page_item > a,
#masthead .nav > li.current-menu-parent > a,
#masthead .nav > li.current-menu-ancestor > a,
#masthead .nav > li.active > a {
  color: #000000 !important;
  border-bottom: 2px solid #000000 !important;
}

/* Breadcrumb Category Title Active Color: Brown for unselected, Black for current category */
.woocommerce-breadcrumb a,
.breadcrumb a {
    color: #926625 !important;
}
.woocommerce-breadcrumb a:hover,
.breadcrumb a:hover {
    color: #000000 !important;
}
.woocommerce-breadcrumb strong,
.woocommerce-breadcrumb span.last,
.woocommerce-breadcrumb .current,
.breadcrumb .current,
.breadcrumb strong {
    color: #000000 !important;
    font-weight: 700 !important;
}



/* ==========================================================================
   CHAEBOL KIDS - TOAN DIEN TOI UU GIAO DIEN MOBILE (MAX-WIDTH: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. HEADER & NAVIGATION MOBILE */

    /* Header inner 3-column layout on mobile (Left hamburger, Center logo, Right cart) */
    #masthead .header-inner.flex-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }
    #masthead .flex-col.show-for-medium.flex-left {
        flex: 0 0 44px !important;
        display: flex !important;
        justify-content: flex-start !important;
    }
    #masthead .flex-col.logo {
        flex: 1 1 auto !important;
        max-width: none !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
    }
    #masthead .flex-col.show-for-medium.flex-right {
        flex: 0 0 44px !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    /* 1. ẨN TOPBAR TRÊN MOBILE */
    #top-bar, .header-top {
        display: none !important;
    }

    #masthead {
        min-height: 60px !important;
    }
    #masthead .header-inner {
        min-height: 60px !important;
        padding: 0 12px !important;
    }
    #logo {
        flex: 1 !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    #logo img {
        max-height: 38px !important;
        width: auto !important;
        margin: 0 auto !important;
    }

    /* 2. ẨN MENU NGANG TRÊN MOBILE */
    #wide-nav, 
    .header-bottom, 
    .header-bottom.wide-nav {
        display: none !important;
    }

    /* 3. CHAT SOCIAL XUỐNG HÀNG NGANG CUỐI CÙNG TRÊN MOBILE */
    .ck-nous-floating-wrap {
        position: fixed !important;
        bottom: 12px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: max-content !important;
        max-width: 96vw !important;
        z-index: 99999 !important;
        background: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        padding: 5px 10px !important;
        border-radius: 40px !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16) !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
    }
    .ck-btn-support-pebble {
        width: 75px !important;
        height: 46px !important;
        font-size: 9px !important;
        padding-top: 5px !important;
        padding-bottom: 0 !important;
        flex-shrink: 0 !important;
        filter: none !important;
    }
    .ck-pastel-icons {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    .ck-pastel-icons a {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
    }
    .ck-pastel-icons a div,
    .ck-pastel-icons a img {
        width: 36px !important;
        height: 36px !important;
    }
    .ck-pastel-icons a div svg {
        width: 18px !important;
        height: 18px !important;
    }

        /* 4. TRANG CHI TIẾT SẢN PHẨM MOBILE */
    .product-main .product-gallery {
        margin-bottom: 15px !important;
    }
    .product-main .product-info {
        padding: 0 10px !important;
    }
    .product-main .product-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    .product-main .price {
        font-size: 18px !important;
    }
    /* Biến thể Swatches gọn gàng trên mobile */
    .chaebol-header-row {
        font-size: 13px !important;
    }
    ul.variable-items-wrapper {
        gap: 6px !important;
    }
    ul.variable-items-wrapper li {
        margin: 2px !important;
    }

    /* 5. TRANG CẢM ƠN / HOÀN TẤT ĐƠN HÀNG MOBILE */
    .woocommerce-order-received .chaebol-thankyou-zalo-box {
        margin: 15px 0 20px !important;
        padding: 18px 14px !important;
    }
    .woocommerce-order-received .chaebol-thankyou-zalo-box a {
        font-size: 13px !important;
        padding: 10px 16px !important;
        width: 100% !important;
        border-radius: 30px !important;
    }
    .woocommerce-order-received .is-well {
        padding: 18px 14px !important;
    }
    .woocommerce-order-received h2.woocommerce-order-details__title {
        font-size: 18px !important;
    }
    .woocommerce-order-received table.order_details th,
    .woocommerce-order-received table.order_details td {
        font-size: 13px !important;
        padding: 8px 6px !important;
    }

    /* 6. TRANG GIỎ HÀNG MOBILE */
    .woocommerce-cart table.cart td.product-thumbnail {
        display: table-cell !important;
        width: 60px !important;
        padding: 8px 4px !important;
    }
    .woocommerce-cart table.cart td.product-thumbnail img {
        width: 55px !important;
        height: 55px !important;
    }
    .woocommerce-cart table.cart td.product-name {
        font-size: 13px !important;
        padding: 8px 6px !important;
    }
    .woocommerce-cart .cart_totals {
        padding: 15px !important;
        border-radius: 8px !important;
    }
    .woocommerce-cart .checkout-button {
        font-size: 14px !important;
        padding: 12px 0 !important;
        width: 100% !important;
    }

    /* 7. TRANG ĐẶT HÀNG (CHECKOUT) MOBILE */
    .woocommerce-checkout #customer_details {
        margin-bottom: 25px !important;
    }
    .woocommerce-checkout .woocommerce-billing-fields h3,
    .woocommerce-checkout #order_review_heading {
        font-size: 17px !important;
    }
    .woocommerce-checkout form .form-row input.input-text,
    .woocommerce-checkout form .form-row textarea {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }
    .woocommerce-checkout #place_order {
        font-size: 15px !important;
        padding: 14px 0 !important;
        width: 100% !important;
    }
    table.woocommerce-checkout-review-order-table thead th {
        font-size: 12px !important;
    }
    table.woocommerce-checkout-review-order-table td,
    table.woocommerce-checkout-review-order-table th {
        padding: 8px 4px !important;
        font-size: 13px !important;
    }

    /* 8. LƯỚI SẢN PHẨM DANH MỤC 2 CỘT CHUẨN GỌN TRÊN MOBILE */
    .products.row-small > .col {
        padding: 0 5px 15px !important;
    }
    .product-small .box-text {
        padding: 8px 4px !important;
    }
    .product-small .name {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }
    .product-small .price {
        font-size: 13.5px !important;
    }

    /* 9. TRANG LIÊN HỆ MOBILE */
    .ck-contact-form-card {
        padding: 20px 15px !important;
        margin-top: 25px !important;
    }
    .ck-contact-info-wrap {
        padding: 0 5px !important;
    }
    .ck-social-buttons-grid a {
        font-size: 13px !important;
        height: 44px !important;
    }

    /* 10. FOOTER MOBILE CÂN ĐỐI - KHÔNG SÁT VIỀN TRÁI */
    #footer,
    .footer-wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 25px !important;
        padding-bottom: 70px !important;
        box-sizing: border-box !important;
    }
    #footer > .row,
    .footer-wrapper > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #footer .col,
    .footer-wrapper .col {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 24px !important;
        text-align: left !important;
    }
    #footer ul,
    .footer-wrapper ul {
        list-style: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    #footer ul li,
    .footer-wrapper ul li {
        list-style-type: none !important;
        position: relative !important;
        padding-left: 14px !important;
        margin-bottom: 6px !important;
        font-size: 13.5px !important;
        line-height: 1.8 !important;
    }
    #footer ul li::before,
    .footer-wrapper ul li::before {
        content: "•" !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        color: #926625 !important;
        font-size: 14px !important;
        line-height: inherit !important;
    }
    #footer h4,
    .footer-wrapper h4 {
        font-size: 15.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 12px !important;
        color: #212529 !important;
    }
    #footer p,
    .footer-wrapper p {
        font-size: 13.5px !important;
        line-height: 1.7 !important;
        margin-bottom: 10px !important;
    }
    #footer a,
    .footer-wrapper a {
        font-size: 13.5px !important;
    }
}


/* ============================================================
   BỘ ĐẾM SỐ LƯỢNG (QUANTITY BOX) CHUẨN PHẲNG - KHÔNG VỠ KHUNG
   ============================================================ */
.quantity.buttons_added,
.single-product .quantity.buttons_added,
.woocommerce-cart table.cart .quantity.buttons_added,
.product-quick-view .quantity.buttons_added {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    height: 44px !important;
    max-height: 44px !important;
    border: 1px solid #D5CFC6 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    margin: 0 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.quantity.buttons_added .minus,
.quantity.buttons_added .plus,
.quantity.buttons_added input.button.is-form,
.ux-quantity__button {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    background: #F8F6F2 !important;
    color: #555555 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 42px !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    flex: 0 0 40px !important;
    box-sizing: border-box !important;
    outline: none !important;
}
.quantity.buttons_added .minus:hover,
.quantity.buttons_added .plus:hover,
.quantity.buttons_added input.button.is-form:hover {
    background: #ECE6DD !important;
    color: #926625 !important;
}

.quantity.buttons_added input.qty,
.single-product .quantity input.qty,
.woocommerce-cart table.cart .quantity input.qty {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    border: none !important;
    border-left: 1px solid #EAE5DC !important;
    border-right: 1px solid #EAE5DC !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    color: #212529 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
    line-height: 42px !important;
    box-sizing: border-box !important;
    flex: 0 0 48px !important;
    outline: none !important;
}
.quantity.buttons_added input.qty::-webkit-outer-spin-button,
.quantity.buttons_added input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* TỐI ƯU NÚT THÊM VÀO GIỎ HÀNG THÀNH 1 HÀNG VỚI SỐ LƯỢNG */
.single-product form.cart {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
}

.single-product form.cart .quantity.buttons_added {
    flex: 0 0 115px !important;
    max-width: 115px !important;
    height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    display: flex !important;
}

.single-product form.cart .quantity.buttons_added .minus,
.single-product form.cart .quantity.buttons_added .plus,
.single-product form.cart .quantity.buttons_added input.button.is-form {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 100% !important;
}

.single-product form.cart .quantity.buttons_added input.qty {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
}

.single-product form.cart .single_add_to_cart_button {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 46px !important;
    line-height: 46px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Đồng bộ nút đặt hàng qua Zalo */
.ck-btn-zalo-order {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background-color: #0068FF !important;
    color: #FFFFFF !important;
    height: 46px !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 14px rgba(0, 104, 255, 0.3) !important;
    transition: all 0.25s ease !important;
}
.ck-btn-zalo-order:hover {
    background-color: #0056cc !important;
    transform: translateY(-1px) !important;
    color: #FFFFFF !important;
}
.ck-btn-zalo-order img,
.ck-btn-zalo-order svg {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   TỐI ƯU TRANG GIỎ HÀNG (CART) TRÊN MOBILE - KHÔNG VỠ KHUNG
   ============================================================ */
@media (max-width: 768px) {
    .woocommerce-cart table.cart {
        border: 1px solid #ECE6DD !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #FFFFFF !important;
    }
    .woocommerce-cart table.cart thead {
        background: #F8F6F2 !important;
        border-bottom: 1px solid #ECE6DD !important;
    }
    .woocommerce-cart table.cart thead th {
        font-size: 12px !important;
        padding: 10px 8px !important;
        color: #444 !important;
        letter-spacing: 0.5px !important;
    }
    .woocommerce-cart table.cart tr.cart_item td {
        padding: 12px 8px !important;
        border-bottom: 1px solid #F3EFEA !important;
        vertical-align: middle !important;
    }
    .woocommerce-cart table.cart td.product-thumbnail img {
        width: 60px !important;
        height: 60px !important;
        border-radius: 6px !important;
    }
    .woocommerce-cart table.cart td.product-name a {
        font-size: 13px !important;
        line-height: 1.4 !important;
        font-weight: 600 !important;
    }
    
    /* Quantity box in cart table mobile */
    .woocommerce-cart table.cart .quantity.buttons_added {
        height: 36px !important;
        max-height: 36px !important;
        border-radius: 4px !important;
    }
    .woocommerce-cart table.cart .quantity.buttons_added .minus,
    .woocommerce-cart table.cart .quantity.buttons_added .plus,
    .woocommerce-cart table.cart .quantity.buttons_added input.button.is-form {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        line-height: 34px !important;
        font-size: 16px !important;
        flex: 0 0 30px !important;
    }
    .woocommerce-cart table.cart .quantity.buttons_added input.qty {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        line-height: 34px !important;
        font-size: 13px !important;
        flex: 0 0 38px !important;
    }

    /* Hai nút Tiếp tục xem sản phẩm & Cập nhật giỏ hàng trên mobile */
    .woocommerce-cart-form td.actions {
        padding: 14px 12px !important;
        background: #FAFAFA !important;
    }
    .woocommerce-cart .cart-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .woocommerce-cart .cart-actions .button,
    .woocommerce-cart .cart-actions button[name="update_cart"],
    .woocommerce-cart .cart-actions a.continue-shopping {
        width: 100% !important;
        height: 42px !important;
        line-height: 42px !important;
        padding: 0 16px !important;
        text-align: center !important;
        border-radius: 6px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        text-transform: uppercase !important;
        margin: 0 !important;
    }
    .woocommerce-cart .cart-actions a.continue-shopping {
        background: #FFFFFF !important;
        color: #555555 !important;
        border: 1px solid #D5CFC6 !important;
    }
    .woocommerce-cart .cart-actions button[name="update_cart"] {
        background: #F4F0E8 !important;
        color: #926625 !important;
        border: 1px solid #E0DBD2 !important;
    }

    /* Khối Tổng cộng giỏ hàng mobile */
    .woocommerce-cart .cart-collaterals {
        margin-top: 25px !important;
    }
    .woocommerce-cart .cart-collaterals .cart_totals {
        border: 1px solid #ECE6DD !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #FFFFFF !important;
        padding: 16px 14px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }
    .cart_totals table tr {
        border-bottom: 1px solid #F3EFEA !important;
    }
    .cart_totals table tr th {
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #555 !important;
        padding: 12px 6px !important;
        text-align: left !important;
    }
    .cart_totals table tr td {
        font-size: 14px !important;
        padding: 12px 6px !important;
        text-align: right !important;
    }
    .cart_totals table tr.order-total td strong {
        color: #926625 !important;
        font-size: 18px !important;
    }
    .cart_totals .wc-proceed-to-checkout .checkout-button {
        height: 46px !important;
        line-height: 46px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        border-radius: 6px !important;
        margin-top: 14px !important;
        background: #926625 !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 14px rgba(146, 102, 37, 0.28) !important;
    }
}

/* ==========================================================
   TOI UU THANH TIM KIEM & NÚT SEARCH CAN DOI HOAN HAO
   ========================================================== */
.searchform-wrapper .searchform,
form.searchform {
    margin-bottom: 0 !important;
}

.searchform-wrapper .searchform > .flex-row,
form.searchform > .flex-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    height: 42px !important;
    max-height: 42px !important;
    background: #FFFFFF !important;
    border: 1px solid #D5CFC6 !important;
    border-radius: 99px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.25s ease !important;
}

.searchform-wrapper .searchform > .flex-row:focus-within,
form.searchform > .flex-row:focus-within {
    border-color: #926625 !important;
    box-shadow: 0 2px 8px rgba(146, 102, 37, 0.15) !important;
}

.searchform-wrapper .searchform .flex-col.flex-grow,
form.searchform .flex-col.flex-grow {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    flex-grow: 1 !important;
}

.searchform-wrapper .searchform input[type="search"].search-field,
form.searchform input[type="search"].search-field {
    height: 100% !important;
    max-height: 100% !important;
    line-height: 40px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 16px 0 18px !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: #333333 !important;
}

.searchform-wrapper .searchform input[type="search"].search-field:focus,
form.searchform input[type="search"].search-field:focus {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.searchform-wrapper .searchform .flex-col:not(.flex-grow),
form.searchform .flex-col:not(.flex-grow) {
    display: flex !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.searchform-wrapper .searchform button.ux-search-submit,
form.searchform button.ux-search-submit {
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    width: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #926625 !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: background 0.2s ease !important;
    cursor: pointer !important;
    position: relative !important;
}

.searchform-wrapper .searchform button.ux-search-submit:hover,
form.searchform button.ux-search-submit:hover {
    background: #7a5520 !important;
}

/* Dam bao icon kinh lup luon hien thi sac net 100% */
.searchform-wrapper .searchform button.ux-search-submit i.icon-search,
form.searchform button.ux-search-submit i.icon-search {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
.searchform-wrapper .searchform button.ux-search-submit i.icon-search:before,
form.searchform button.ux-search-submit i.icon-search:before {
    display: none !important;
    content: "" !important;
}

/* ============================================================
   FIX TRIỆT ĐỂ STICKY LOGO & TĂNG KÍCH THƯỚC LOGO 20%
   ============================================================ */

/* 1. KHÔNG CHO PHÉP ẢNH LOGO BỊ ĐỔI SANG ẢNH STICKY BẨN */
.header-logo-sticky,
.stuck .header-logo-sticky,
img.header-logo-sticky {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

.header_logo,
.header-logo,
.stuck .header_logo,
.stuck .header-logo,
.stuck .header-logo-sticky + img,
.stuck .header-logo-sticky + img + img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. TĂNG KÍCH THƯỚC LOGO THÊM 20% & CỐ ĐỊNH CHIỀU CAO VỊ TRÍ TRÊN PC */
#logo,
.header-main #logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 210px !important;
    max-width: 240px !important;
    padding: 0 !important;
    margin: 0 !important;
}

#logo a {
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

#logo img,
.header-main #logo img,
.header_logo,
.header-logo,
.stuck #logo img {
    max-height: 58px !important; /* Gốc ~48px -> Tăng 20% = 58px */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    display: block !important;
    transition: none !important;
}

/* 3. KHẮC PHỤC HIỆN TƯỢNG VỠ KHUNG / TỤT XUỐNG KHI CUỘN TRANG (STICKY) */
.header-wrapper.stuck,
.stuck {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    animation: none !important; /* Bỏ animation jump làm nảy giật logo */
}

.stuck .header-main {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
}

.stuck .header-inner {
    height: 70px !important;
    min-height: 70px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
}

.stuck #logo {
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 4. TỐI ƯU TRÊN MOBILE: LOGO CĂN GIỮA ĐẸP MẮT, TO HƠN 20%, KHÔNG TỤT KHUNG KHI CUỘN */
@media (max-width: 768px) {
    #masthead,
    .header-main {
        min-height: 64px !important;
        height: 64px !important;
    }
    #masthead .header-inner,
    .header-main .header-inner {
        min-height: 64px !important;
        height: 64px !important;
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    #logo,
    .header-main #logo,
    .stuck #logo {
        flex: 1 1 auto !important;
        max-width: none !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #logo a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #logo img,
    .header-main #logo img,
    .stuck #logo img {
        max-height: 48px !important; /* Gốc ~38px -> Tăng hơn 25% = 48px */
        width: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
}


/* ============================================================
   ABSOLUTE FIX: SINGLE LOGO & PREVENT OVERFLOW / JUMP
   ============================================================ */
#logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
}

#logo .ck-header-logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    outline: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

#logo .ck-single-logo,
#logo img {
    height: auto !important;
    max-height: 58px !important; /* To hơn 20% trên PC (gốc 48px) */
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: none !important;
}

/* Ẩn triệt để bất kỳ ảnh phụ nào nếu có */
#logo img:not(.ck-single-logo):not(:first-of-type) {
    display: none !important;
}

/* Sticky Header styling */
.header-wrapper.stuck,
.stuck {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.stuck #masthead,
.stuck .header-main {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
}

.stuck .header-inner {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
}

.stuck #logo {
    height: 70px !important;
}

.stuck #logo .ck-single-logo,
.stuck #logo img {
    max-height: 52px !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    #masthead,
    .header-main {
        min-height: 60px !important;
        height: 60px !important;
    }
    #masthead .header-inner,
    .header-main .header-inner {
        min-height: 60px !important;
        height: 60px !important;
        padding: 0 12px !important;
    }
    #logo,
    .header-main #logo,
    .stuck #logo {
        flex: 1 1 auto !important;
        max-width: none !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #logo .ck-header-logo-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
    #logo .ck-single-logo,
    #logo img,
    .header-main #logo img,
    .stuck #logo img {
        max-height: 44px !important; /* Cân đối đẹp hoàn hảo, to hơn 20% so với gốc 36px, không chạm viền 60px */
        width: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
}



/* ============================================================
   CHẤT LƯỢNG CAO: LOGO CÂN ĐỐI ĐỀU 2 ĐẦU TRÊN DƯỚI (KHÔNG SÁT CHÂN)
   ============================================================ */
@media (max-width: 768px) {
    #masthead,
    .header-main {
        min-height: 64px !important;
        height: 64px !important;
        background-color: #ffffff !important;
    }
    #masthead .header-inner,
    .header-main .header-inner {
        min-height: 64px !important;
        height: 64px !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    #logo,
    .header-main #logo,
    .stuck #logo {
        flex: 1 1 auto !important;
        max-width: none !important;
        height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #logo .ck-header-logo-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    #logo .ck-single-logo,
    #logo img,
    .header-main #logo img,
    .stuck #logo img {
        max-height: 48px !important; /* Độ cao hoàn hảo, căn giữa cân đối cả trên lẫn dưới */
        width: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
}



/* ============================================================
   TINH CHỈNH VỊ TRÍ LOGO MOBILE: CÂN ĐỐI ĐỀU TRÊN DƯỚI
   ============================================================ */
@media (max-width: 768px) {
    #masthead,
    .header-main {
        min-height: 64px !important;
        height: 64px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    #masthead .header-inner,
    .header-main .header-inner {
        min-height: 64px !important;
        height: 64px !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
    }
    #logo,
    .header-main #logo,
    .stuck #logo {
        flex: 1 1 auto !important;
        height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #logo .ck-header-logo-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        transform: translateY(-2px) !important; /* Đẩy nhẹ lên 2px để khoảng cách trên & dưới bằng nhau tuyệt đối */
    }
    #logo .ck-single-logo,
    #logo img,
    .header-main #logo img,
    .stuck #logo img {
        max-height: 44px !important;
        width: auto !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
}