@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-400.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-500.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-600.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-700.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-800.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --Primary-01: #5485C6 !important;
  --Primary-02: #3b6ea8 !important;
  --Primary-03: #2c5688 !important;
  --Primary-04: #5485C6 !important;
  --theme-primary: #5485C6;
  --theme-primary-dark: #3b6ea8;
  --theme-primary-light: #edf3fa;
}

/* Primary buttons & background overrides */
.btn-main,
.btn-primary,
.form-submit input[type="submit"],
.wpcf7-submit {
  background-color: #5485C6 !important;
  border-color: #5485C6 !important;
  color: #ffffff !important;
}

.btn-main:hover,
.btn-primary:hover,
.form-submit input[type="submit"]:hover,
.wpcf7-submit:hover {
  background-color: #3b6ea8 !important;
  border-color: #3b6ea8 !important;
  color: #ffffff !important;
}

/* ========================================================
   MODERN MINIMALIST HEADER (Matching User Reference Mockup)
   ======================================================== */

.site-header {
  position: relative;
  z-index: 1000;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.main-header-bar {
  background: #ffffff;
  height: 84px;
  display: flex;
  align-items: center;
  padding: 0 32px;
  border-bottom: 1px solid #ECEFF2;
}

.header-container {
  width: 100%;
  margin: 0 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.justify-between {
  justify-content: space-between !important;
}

/* Left Section: Logo & Nav */
.header-left {
  gap: 40px;
}

.header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.header-logo .site-logo-img {
  max-height: 58px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.2s ease;
}

.header-logo:hover .site-logo-img {
  transform: scale(1.02);
}

/* Left Section: Logo & Search Bar (Start) */
.header-left {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}

/* Middle Navigation Menu Bar (#bottom-header) */
#bottom-header {
  background-color: #5485C6 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 100 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#bottom-header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  position: relative !important;
}

#bottom-header nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

#bottom-header nav ul.nav-menu-main,
#bottom-header nav ul.menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(16px, 1.8vw, 28px) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#bottom-header nav ul.nav-menu-main > li {
  position: relative !important;
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#bottom-header nav ul.nav-menu-main > li::before,
#bottom-header nav ul.nav-menu-main > li::after {
  display: none !important;
  content: none !important;
}

#bottom-header nav ul.nav-menu-main > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  text-transform: none !important;
  padding: 13px 0 !important;
  position: relative !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  transition: opacity 0.15s ease !important;
}

#bottom-header nav ul.nav-menu-main > li > a:hover {
  opacity: 0.85 !important;
}

#bottom-header nav ul.nav-menu-main > li.current_page_item > a {
  font-weight: 700 !important;
}

#bottom-header nav ul.nav-menu-main > li.current_page_item > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 6px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: #ffffff !important;
}

/* Dropdown Sub-menu on #bottom-header */
#bottom-header nav ul.nav-menu-main li .sub-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #ffffff !important;
  min-width: 250px !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  z-index: 1000 !important;
  border: 1px solid #ECEFF2 !important;
}

#bottom-header nav ul.nav-menu-main li .sub-menu::before {
  content: "" !important;
  position: absolute !important;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 9px solid transparent !important;
  border-right: 9px solid transparent !important;
  border-bottom: 9px solid #ffffff !important;
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.06)) !important;
  z-index: 1001 !important;
  pointer-events: none !important;
  display: block !important;
}

#bottom-header nav ul.nav-menu-main li .sub-menu::after {
  content: "" !important;
  position: absolute !important;
  bottom: 100% !important;
  left: 0 !important;
  width: 100% !important;
  height: 12px !important;
  background: transparent !important;
  z-index: 999 !important;
}

#bottom-header nav ul.nav-menu-main li:hover > .sub-menu,
#bottom-header nav ul.nav-menu-main li:focus-within > .sub-menu {
  display: block !important;
}

#bottom-header nav ul.nav-menu-main li .sub-menu li {
  display: block !important;
  width: 100% !important;
  text-align: start !important;
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#bottom-header nav ul.nav-menu-main li .sub-menu li::before,
#bottom-header nav ul.nav-menu-main li .sub-menu li::after {
  display: none !important;
  content: none !important;
}

#bottom-header nav ul.nav-menu-main li .sub-menu li a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: start !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #2D3748 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

#bottom-header nav ul.nav-menu-main li .sub-menu li a:hover {
  background: #F4F7FB !important;
  color: #5485C6 !important;
  padding-left: 22px !important;
  text-align: start !important;
}

#bottom-header .dropdown-chevron {
  color: #ffffff !important;
  transition: transform 0.2s ease !important;
}

#bottom-header nav ul.nav-menu-main li:hover > a .dropdown-chevron {
  transform: rotate(180deg) !important;
}

#bottom-header nav ul.nav-menu-main li:focus-within > a .dropdown-chevron {
  transform: rotate(180deg) !important;
}

/* Print Badge on #bottom-header */
#bottom-header .container .header-print {
  background-color: #3b6ea8 !important;
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  min-width: 156px !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
  margin: 0 !important;
}

#bottom-header .container .header-print a {
  color: #ffffff !important;
  text-decoration: none !important;
  display: block !important;
}

#bottom-header .container .header-print a .header-print-wrapper {
  display: flex !important;
  align-items: center !important;
  transform: none !important;
  font-style: normal !important;
  gap: 8px !important;
}

#bottom-header .container .header-print a .header-print-wrapper .ic {
  width: auto !important;
  display: flex !important;
  align-items: center !important;
}

#bottom-header .container .header-print a .header-print-wrapper .ic i {
  font-size: 18px !important;
  color: #ffffff !important;
  transform: none !important;
}

#bottom-header .container .header-print a .header-print-wrapper .content {
  width: auto !important;
  padding-left: 0 !important;
}

#bottom-header .container .header-print a .header-print-wrapper .content span.text {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
}

#bottom-header .container .header-print a .header-print-wrapper .content span.sub {
  display: block !important;
  font-size: 9px !important;
  text-transform: none !important;
  opacity: 0.9 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  color: #ffffff !important;
}

/* Right Section: Search, Cart, Actions, Avatar */
.header-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-left: auto !important;
}

/* Search bar (Soft rounded light gray input with left icon & right dark button) */
.header-search {
  width: 420px;
  max-width: 100%;
}

.header-search .search-form {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 44px;
  background: #F3F4F5;
  border-radius: 10px;
  overflow: hidden;
}

.header-search .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #111827;
}

.header-search .search-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0 !important;
  border-radius: 10px 0 0 10px;
  padding: 0 14px 0 46px;
  font-size: 14px;
  color: #222222;
  outline: none;
  box-shadow: none !important;
}

.header-search .search-input::placeholder {
  color: #4B5563;
  font-size: 14px;
}

.header-search .search-input:focus {
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
}

.header-search .search-submit {
  flex-shrink: 0;
  height: 100%;
  padding: 0 22px;
  border: 0;
  border-radius: 0 10px 10px 0;
  background: #5485C6;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.header-search .search-submit:hover {
  background: #3b6ea8;
}

/* Header language switcher */
.header-language {
  position: relative;
  flex: 0 0 auto;
}

.header-language > summary {
  list-style: none;
}

.header-language > summary::-webkit-details-marker {
  display: none;
}

.header-language__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  color: #181A20;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.header-language__trigger:hover,
.header-language__trigger:focus-visible,
.header-language[open] .header-language__trigger {
  color: #5485C6;
  background: #F4F5F7;
}

.header-language__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  min-width: 176px;
  padding: 6px;
  border: 1px solid #E3E7EE;
  border-radius: 10px;
  background: #ffffff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.header-language:hover .header-language__menu,
.header-language:focus-within .header-language__menu,
.header-language[open] .header-language__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.header-language__option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 7px;
  color: #252A34;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.header-language__option:hover,
.header-language__option:focus-visible,
.header-language__option.is-current {
  color: #155CA7;
  background: #EEF5FC;
}

.header-language__option img {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
}

.header-language__code {
  color: #7A8494;
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* Quick Print Icon Button + Hover Tooltip */
.header-quick-print {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.header-quick-print:hover,
.header-quick-print:focus-visible {
  background: #F4F5F7;
}

.header-quick-print .print-icon {
  stroke: #181A20;
  transition: stroke 0.15s ease;
}

.header-quick-print:hover .print-icon,
.header-quick-print:focus-visible .print-icon {
  stroke: #5485C6;
}

.header-quick-print__tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #181A20;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 1100;
}

.header-quick-print__tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #181A20;
}

.header-quick-print:hover .header-quick-print__tooltip,
.header-quick-print:focus-visible .header-quick-print__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Cart Button */
.header-cart {
  gap: 8px;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.header-cart:hover {
  background: #F4F5F7;
}

.header-cart .cart-icon {
  stroke: #181A20;
  transition: stroke 0.15s ease;
}

.header-cart .cart-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #181A20 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
}

.header-cart:hover .cart-label {
  color: #5485C6;
}

.header-cart:hover .cart-icon {
  stroke: #5485C6;
}

/* User Avatar */
.header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid #E5E7EB;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.header-avatar:hover {
  transform: scale(1.05);
  border-color: #5485C6;
}

.header-avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile Toggle */
.header-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.header-mobile-toggle span {
  width: 100%;
  height: 2px;
  background: #181A20;
  border-radius: 2px;
}

/* Blue Announcement Bar */
.header-announcement-bar {
  background: var(--Primary-01, #5485C6);
  color: #ffffff;
  min-height: 42px;
  position: relative;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 8px 64px;
  box-sizing: border-box;
}

.announcement-text {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.announcement-link {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  margin-left: 6px;
  cursor: pointer;
}

.announcement-link:hover {
  opacity: 0.9;
}

.announcement-close {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
  line-height: 1;
}

.announcement-close:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.15);
}

@media only screen and (max-width: 1240px) {
  #bottom-header .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #bottom-header nav ul.nav-menu-main,
  #bottom-header nav ul.menu {
    gap: 18px !important;
  }
}

/* Responsive Media Queries */
@media only screen and (max-width: 1120px) {
  .header-menu {
    gap: 18px;
  }
  .header-left {
    gap: 20px;
  }
  .header-search {
    width: 320px;
  }
}

@media only screen and (max-width: 63.99875rem) {
  .header-mobile-toggle {
    display: flex !important;
  }

  #bottom-header {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    border-top: 0 !important;
    transition: max-height 0.25s ease, border-color 0.25s ease !important;
  }

  body.mobile-menu-open #bottom-header {
    max-height: 80vh;
    overflow-y: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  #bottom-header .container {
    min-height: 0 !important;
    padding: 8px 16px 14px !important;
  }

  #bottom-header nav,
  #bottom-header nav ul.nav-menu-main,
  #bottom-header nav ul.menu,
  #bottom-header nav ul.nav-menu-main > li {
    width: 100% !important;
  }

  #bottom-header nav ul.nav-menu-main,
  #bottom-header nav ul.menu {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  #bottom-header nav ul.nav-menu-main > li > a {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 11px 0 !important;
  }

  /* Mục có submenu xếp dọc: link ở trên, submenu ngay bên dưới (trước đây li là flex hàng ngang nên submenu nằm cạnh link) */
  #bottom-header nav ul.nav-menu-main > li { display: block !important; }
  #bottom-header nav ul.nav-menu-main > li > a { display: flex !important; align-items: center; }

  #bottom-header nav ul.nav-menu-main li .sub-menu {
    display: block !important;
    position: static !important;
    transform: none !important;
    min-width: 0 !important;
    padding: 0 0 4px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  #bottom-header nav ul.nav-menu-main li .sub-menu::before,
  #bottom-header nav ul.nav-menu-main li .sub-menu::after {
    display: none !important;
    content: none !important;
  }

  #bottom-header nav ul.nav-menu-main li .sub-menu li a {
    color: #ffffff !important;
    padding: 8px 12px !important;
    white-space: normal !important;
  }

  #bottom-header nav ul.nav-menu-main li .sub-menu li a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    padding-left: 16px !important;
  }

  #bottom-header .container .header-print {
    display: none !important;
  }
}

@media only screen and (max-width: 991px) {
  .header-nav {
    display: none;
  }
  .header-mobile-toggle {
    display: flex;
  }
  .header-search {
    width: 240px;
  }
  .header-search .search-submit {
    padding: 0 14px;
    font-size: 13px;
  }
  .header-cart .cart-label {
    display: none;
  }
  .main-header-bar {
    padding: 0 16px;
    height: 64px;
  }
  .announcement-text {
    font-size: 11.5px;
    padding-right: 24px;
  }


  #bottom-header .container .header-print {
    display: none !important;
  }
}

@media only screen and (max-width: 600px) {
  .header-search {
    display: none;
  }
}

/* Swiper slider highlights */
.swiper-pagination-bullet-active,
.w-swiper .swiper-pagination-bullet-active {
  background-color: #5485C6 !important;
}

.swiper-button-prev,
.swiper-button-next {
  color: #5485C6 !important;
}

/* Cards & section titles */
.cat-header .heading-title,
.group-title .heading-title {
  color: #222222;
}

.cat-header .btn-main {
  background-color: #5485C6 !important;
  border-color: #5485C6 !important;
}

.cat-header .btn-main:hover {
  background-color: #3b6ea8 !important;
}

/* Links & accents */
a.btn-link,
.posts-list .item .content .btn-link {
  color: #5485C6 !important;
}

a.btn-link:hover,
.posts-list .item .content .btn-link:hover {
  color: #3b6ea8 !important;
}

.woocommerce-pagination ul.page-numbers li span.current,
.woocommerce-pagination .page-numbers.current {
  background-color: #5485C6 !important;
  color: #ffffff !important;
  border-color: #5485C6 !important;
}

/* Form focus highlights */
input:focus,
select:focus,
textarea:focus {
  border-color: #5485C6 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(84, 133, 198, 0.25) !important;
}

/* ========================================================
   MODERN PRODUCT DETAIL PAGE (Matching User Reference Mockup)
   ======================================================== */

.product-detail-modern-page {
  background-color: #F7F9FC;
  padding-bottom: 60px;
}

.section-breadcrumb-modern {
  padding: 16px 0 10px;
}

.breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
  font-size: 13px;
  color: #8C92A0;
}

.breadcrumb-list a {
  color: #8C92A0;
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb-list a:hover {
  color: var(--theme-primary);
}

.breadcrumb-list .separator {
  display: flex;
  align-items: center;
  color: #C4C8D2;
}

.breadcrumb-list .current {
  color: var(--theme-primary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

/* 3-Column Grid */
.product-hero-section {
  padding-top: 10px;
}

.product-hero-grid {
  display: grid;
  grid-template-columns: 360px 1fr 340px;
  gap: 32px;
  align-items: start;
}

/* Column 1: Gallery */
.main-image-container {
  background: #F4F5F7;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-image-wrapper {
  width: 100%;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.main-product-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.gallery-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #374151;
  transition: all 0.2s ease;
  z-index: 10;
}

.gallery-nav-arrow:hover {
  background: var(--theme-primary);
  color: #ffffff;
}

.arrow-prev {
  left: 12px;
}

.arrow-next {
  right: 12px;
}

.thumbnails-row {
  gap: 12px;
  margin-top: 14px;
}

.thumb-box {
  flex: 1;
  height: 72px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: #F4F5F7;
  padding: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-box.active {
  border-color: var(--theme-primary);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(84, 133, 198, 0.2);
}

.thumb-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Store info card */








/* Column 2: Product Info */
.product-info-column {
  background: transparent;
}

.badge-new-arrival {
  display: inline-block;
  padding: 4px 10px;
  background: var(--theme-primary-dark);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: 6px;
}

.product-title {
  font-size: 28px;
  font-weight: 700;
  color: #181A20;
  line-height: 1.25;
  margin: 12px 0 10px;
}

.product-meta-row {
  gap: 12px;
  font-size: 13.5px;
  color: #6B7280;
  margin-bottom: 20px;
}

.rating-stars {
  gap: 4px;
}

.stars {
  color: #FBBF24;
  letter-spacing: 1px;
}

.rating-score {
  font-weight: 700;
  color: #181A20;
}

.reviews-count {
  color: var(--theme-primary);
  text-decoration: underline;
  cursor: pointer;
}

.meta-divider {
  color: #D1D5DB;
}

.sold-count {
  color: #6B7280;
}

.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 24px;
}

.currency-symbol {
  font-size: 20px;
  font-weight: 700;
  color: #181A20;
}

.product-price {
  font-size: 32px;
  font-weight: 800;
  color: #181A20;
  letter-spacing: -0.02em;
}

.price-suffix {
  font-size: 18px;
  font-weight: 700;
  color: #181A20;
}

.selector-group {
  margin-bottom: 22px;
}

.selector-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #6B7280;
  margin-bottom: 10px;
}



.chips-list {
  gap: 10px;
  flex-wrap: wrap;
}

.chip-item {
  padding: 8px 16px;
  background: #ffffff;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chip-item:hover {
  border-color: var(--theme-primary);
}

.chip-item.active {
  border-color: var(--theme-primary);
  color: var(--theme-primary);
  background: var(--theme-primary-light);
}

.size-chip {
  min-width: 44px;
  padding: 8px 12px;
  text-align: center;
  position: relative;
}


.desc-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: #4B5563;
  margin: 0;
}

.read-more-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--theme-primary-dark);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.product-details-list {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #ECEFF2;
}

.details-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.details-items li {
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #374151;
}

.shipping-details-link {
  color: var(--theme-primary);
  text-decoration: underline;
  cursor: pointer;
}

/* Column 3: Order Details Card */
.order-details-card {
  background: #ffffff;
  border: 1px solid #ECEFF2;
  border-radius: 16px;
  padding: 24px;
  position: sticky;
  top: 90px;
}

.card-heading {
  font-size: 20px;
  font-weight: 700;
  color: #181A20;
  margin: 0 0 20px;
}

.order-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 16px;
  border-bottom: 1px solid #F3F4F6;
}

.row-label {
  font-size: 14px;
  font-weight: 600;
  color: #181A20;
}

.quantity-stepper {
  display: flex !important;
  align-items: center !important;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.step-btn {
  width: 32px;
  height: 32px;
  background: #F9FAFB;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s ease;
}

.step-btn:hover {
  background: #E5E7EB;
}

.qty-input {
  width: 40px;
  height: 32px;
  border: none;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #181A20;
  outline: none;
  background: #ffffff;
}

.summary-specs {
  padding: 14px 0;
  border-bottom: 1px solid #F3F4F6;
}

.spec-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px;
  font-size: 13.5px;
}

.spec-name {
  color: #6B7280;
}

.spec-value {
  font-weight: 600;
  color: #181A20;
}

.discount-text {
  color: var(--theme-primary-dark);
}








.coupon-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px;
  background: var(--theme-primary-light);
  border: 1.5px dashed var(--theme-primary);
  border-radius: 8px;
  margin-bottom: 18px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.coupon-box:hover {
  background: #e3edf8;
}

.coupon-text {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--theme-primary-dark);
  letter-spacing: 0.05em;
}

.subtotal-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px;
}

.subtotal-label {
  font-size: 16px;
  font-weight: 700;
  color: #181A20;
}

.subtotal-amount {
  font-size: 22px;
  font-weight: 800;
  color: #181A20;
  letter-spacing: -0.02em;
}

.order-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-buy-now {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  background: var(--theme-primary);
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.btn-buy-now:hover {
  background: var(--theme-primary-dark);
}

.btn-add-to-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  background: #ffffff;
  color: var(--theme-primary);
  font-size: 15px;
  font-weight: 700;
  border: 1.5px solid var(--theme-primary);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-add-to-cart:hover {
  background: var(--theme-primary-light);
}

/* Full Content Card */
.product-full-content-section {
  margin-top: 48px;
}

.content-card {
  background: #ffffff;
  border: 1px solid #ECEFF2;
  border-radius: 16px;
  padding: 8px 32px 40px;
}

.tabs-header {
  border-bottom: 1px solid #ECEFF2;
  gap: 28px;
  margin-bottom: 32px;
}

.tab-btn {
  background: transparent;
  border: none;
  padding: 16px 2px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #8C92A0;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}

.tab-btn:hover { color: #181A20; }

.tab-btn.active {
  color: var(--theme-primary-dark);
  font-weight: 600;
}

.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--theme-primary);
  border-radius: 2px;
}

/* Related Products */
.related-products-modern {
  margin-top: 48px;
}

.section-header-modern {
  margin-bottom: 24px;
}

.section-title {
  font-size: 22px;
  font-weight: 700;
  color: #181A20;
  margin: 0;
}

.view-all-link {
  color: var(--theme-primary);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
}

.products-grid-modern {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Toast */
.cart-toast-notification {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #ffffff;
  padding: 16px 22px;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--theme-primary);
  transform: translateY(120px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 99999;
}

.cart-toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-content {
  gap: 10px;
  font-size: 14px;
  color: #181A20;
}

/* Responsive */
@media only screen and (max-width: 1200px) {
  .product-hero-grid {
    grid-template-columns: 320px 1fr 300px;
    gap: 20px;
  }
  .products-grid-modern {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 991px) {
  .product-hero-grid {
    grid-template-columns: 1fr;
  }
  .main-image-wrapper {
    height: 320px;
  }
  .order-details-card {
    position: static;
  }
  .products-grid-modern {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 600px) {
  .products-grid-modern {
    grid-template-columns: 1fr;
  }
}


/* ---- Trạng thái, mã giảm giá, form đặt hàng (dữ liệu thật) ---- */

.product-compare-price {
  margin-left: 10px;
  font-size: 16px;
  color: #9EA3AE;
  text-decoration: line-through;
}

.main-image-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #C4C8D2;
}

.thumb-box { font: inherit; }


.chip-item:disabled,
.chip-item.is-unavailable:not(.active) {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

.chip-color { display: inline-flex; align-items: center; gap: 8px; }

.chip-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.stock-status {
  min-height: 20px;
  margin: -6px 0 18px;
  font-size: 13px;
  font-weight: 600;
}
.stock-status.is-ok { color: var(--theme-primary-dark); }
.stock-status.is-low { color: #B45309; }
.stock-status.is-out { color: #DC2626; }
.stock-status.is-info { color: #6B7280; }

.step-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.coupon-box { display: block !important; }
.coupon-input-row { gap: 8px; margin-top: 8px; }
.coupon-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #ffffff;
  font-size: 13px;
  text-transform: uppercase;
}
.coupon-input:focus {
  outline: none;
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px rgba(84, 133, 198, 0.18);
}
.coupon-apply {
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--theme-primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.coupon-apply:hover { background: var(--theme-primary-dark); }
.coupon-apply:disabled { opacity: 0.6; cursor: wait; }
.coupon-message { margin: 8px 0 0; font-size: 12.5px; color: #DC2626; }
.coupon-message.is-ok { color: var(--theme-primary-dark); }

.subtotal-note { margin: -12px 0 18px; font-size: 12px; color: #8C92A0; }

.btn-buy-now { border: 0; width: 100%; cursor: pointer; font-family: inherit; }
.btn-buy-now:disabled,
.btn-add-to-cart:disabled { opacity: 0.5; cursor: not-allowed; }

.empty-note { color: #8C92A0; }

.review-item { padding: 16px 0; border-bottom: 1px solid #F3F4F6; }
.review-item:last-child { border-bottom: 0; }
.review-head { gap: 12px; flex-wrap: wrap; font-size: 14px; }
.review-head time { color: #8C92A0; font-size: 12.5px; }
.review-item p { margin: 6px 0 0; color: #374151; }

.cart-toast-notification.is-error { border-color: #DC2626; }
.cart-toast-notification { font-size: 14px; color: #181A20; max-width: calc(100vw - 40px); }

/* Form đặt hàng */
body.checkout-modal-open { overflow: hidden; }
.checkout-modal[hidden] { display: none; }
.checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.checkout-modal__backdrop { position: absolute; inset: 0; background: rgba(24, 26, 32, 0.55); }
.checkout-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 28px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}
.checkout-modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #6B7280;
  cursor: pointer;
}
.checkout-modal__title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #181A20; }
.checkout-summary { margin: 0 0 16px; font-size: 13.5px; color: var(--theme-primary-dark); font-weight: 600; }
.checkout-modal .field { display: block; margin: 0 0 14px; border: 0; padding: 0; }
.checkout-modal .field > span,
.checkout-modal .field > legend { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #181A20; }
.checkout-modal .field input[type="text"],
.checkout-modal .field input[type="tel"],
.checkout-modal .field input[type="email"],
.checkout-modal .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  box-sizing: border-box;
}
.checkout-modal .field input:focus,
.checkout-modal .field textarea:focus {
  outline: none;
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px rgba(84, 133, 198, 0.18);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-error { display: block; min-height: 0; margin-top: 4px; font-size: 12px; color: #DC2626; }
.payment-option { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.form-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #FEF2F2; color: #B91C1C; font-size: 13px; }
.checkout-success h3 { margin: 0 0 12px; font-size: 20px; color: var(--theme-primary-dark); }
.checkout-success .btn-add-to-cart { width: 100%; margin-top: 12px; }

@media only screen and (max-width: 600px) {
  .field-row { grid-template-columns: 1fr; }
  .checkout-modal__dialog { padding: 20px; }
}

.header-cart { position: relative; }
.header-cart .cart-count {
  position: absolute;
  top: -6px;
  left: 14px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--theme-primary);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.header-cart .cart-count[hidden] { display: none; }

/* Tiêu đề trang chi tiết dùng cùng font Be Vietnam Pro với toàn site. */
.product-title,
.card-heading,
.section-title,
.checkout-modal__title,
.checkout-success h3 {
  font-family: "Be Vietnam Pro", sans-serif;
}

/* Chữ trong nút nhẹ lại cho cân với nét icon (stroke 2.2). */
.btn-buy-now,
.btn-add-to-cart,
.coupon-apply {
  font-weight: 500;
  font-size: 14px;
}

/* Hộp mã giảm giá: chữ nhẹ hơn. */
.coupon-text { font-weight: 500; }
.coupon-input { font-weight: 400; }
.coupon-apply { font-weight: 400; }

/* ========================================================
   MÔ TẢ SẢN PHẨM (HTML nhập từ WordPress: h2/h3, bảng, figure, danh sách)
   ======================================================== */

.product-description-html,
.product-reviews-list {
  max-width: 860px;
  margin: 0 auto;
  font-size: 14.5px;
  line-height: 1.75;
  color: #4B5160;
  overflow-wrap: anywhere;
}

.product-description-html[hidden],
.product-reviews-list[hidden] { display: none; }

.product-description-html > *:first-child { margin-top: 0; }
.product-description-html > *:last-child { margin-bottom: 0; }

.product-description-html p { margin: 0 0 14px; }

.product-description-html h2,
.product-description-html h3,
.product-description-html h4 {
  font-family: "Be Vietnam Pro", sans-serif;
  color: #181A20;
  line-height: 1.35;
}

.product-description-html h2 {
  margin: 36px 0 14px;
  padding-left: 12px;
  border-left: 3px solid var(--theme-primary);
  font-size: 20px;
  font-weight: 700;
}

.product-description-html h3 {
  margin: 28px 0 10px;
  font-size: 17px;
  font-weight: 600;
}

.product-description-html h4 {
  margin: 22px 0 8px;
  font-size: 15px;
  font-weight: 600;
}

/* WordPress hay bọc chữ trong <strong>/<em>: nhẹ lại cho thanh. */
.product-description-html strong,
.product-description-html b { font-weight: 600; color: #2D3240; }
.product-description-html em { font-style: normal; }
.product-description-html .wp-caption em { font-style: italic; }

.product-description-html a {
  color: var(--theme-primary-dark);
  text-decoration: underline;
  text-decoration-color: rgba(84, 133, 198, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}
.product-description-html a:hover { text-decoration-color: var(--theme-primary-dark); }

.product-description-html ul,
.product-description-html ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.product-description-html ul { list-style: disc; }
.product-description-html ol { list-style: decimal; }
.product-description-html li { margin-bottom: 6px; padding-left: 2px; }
.product-description-html li::marker { color: var(--theme-primary); }

/* Ảnh: bỏ cỡ cứng width/height của WordPress, canh giữa, bo nhẹ */
.product-description-html img {
  display: block;
  max-width: min(100%, 520px);
  width: auto;
  height: auto;
  margin: 18px auto;
  border-radius: 12px;
}

.product-description-html .wp-figure,
.product-description-html figure {
  margin: 22px 0;
  max-width: 100%;
  text-align: center;
}
.product-description-html .wp-figure img,
.product-description-html figure img { margin: 0 auto; }

.product-description-html .wp-caption,
.product-description-html figcaption {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8C92A0;
  text-align: center;
}

/* Bảng thông số: viền mảnh, cột đầu làm nhãn, cuộn ngang trên mobile */
.product-description-html .table-container,
.product-description-html .table-scroll {
  margin: 0 0 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.product-description-html table {
  width: 100%;
  margin: 0 0 22px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ECEFF2;
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
}
.product-description-html .table-container table { margin-bottom: 0; }

.product-description-html thead,
.product-description-html tbody,
.product-description-html tfoot {
  border: 0;
  background: transparent;
}

.product-description-html tbody tr:nth-child(even) { background: transparent; }

.product-description-html th,
.product-description-html td {
  padding: 11px 16px;
  border-bottom: 1px solid #F1F3F6;
  text-align: left;
  vertical-align: top;
  background: transparent;
}

.product-description-html tr:last-child > th,
.product-description-html tr:last-child > td { border-bottom: 0; }

.product-description-html td:first-child,
.product-description-html th:first-child {
  width: 32%;
  background: #F7F9FC;
  color: #2D3240;
}

.product-description-html blockquote {
  margin: 18px 0;
  padding: 12px 18px;
  border-left: 3px solid var(--theme-primary);
  background: var(--theme-primary-light);
  border-radius: 0 10px 10px 0;
  color: #4B5160;
}

.product-description-html hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid #ECEFF2;
}

/* Đoạn mô tả ngắn ở cột giữa */
.desc-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.7;
  color: #6B7280;
}

@media only screen and (max-width: 991px) {
  .content-card { padding: 4px 18px 28px; }
  .tabs-header { gap: 20px; margin-bottom: 24px; overflow-x: auto; }
  .tab-btn { white-space: nowrap; }
  .product-description-html h2 { font-size: 18px; margin-top: 28px; }
  .product-description-html td:first-child,
  .product-description-html th:first-child { width: auto; }
  .product-description-html th,
  .product-description-html td { padding: 10px 12px; }
}

/* Cột grid không được rộng hơn khung (tiêu đề/thumbnail dài làm tràn ngang trên mobile). */
.product-hero-grid > * { min-width: 0; }
.product-title { overflow-wrap: anywhere; }

@media only screen and (max-width: 991px) {
  .product-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .product-title { font-size: 24px; }
  .breadcrumb-list { flex-wrap: wrap; row-gap: 4px; }
  .breadcrumb-list .current { max-width: 100%; white-space: normal; }
}

/* Class .flex / display: flex !important thắng thuộc tính hidden mặc định: ép lại cho cả trang detail. */
.product-detail-modern-page [hidden] { display: none !important; }

/* ========================================================
   BỐ CỤC 2 CỘT: [box ảnh + thông tin] + mô tả  |  card đặt hàng (sticky)
   ======================================================== */

.product-hero-grid {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: stretch;
}

.product-main-column { min-width: 0; }

.product-summary-box {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 24px;
  background: transparent;
  border: 0;
  border-radius: 16px;
}

.product-full-content-section { margin-top: 24px; }

/* Cột phải cao bằng cột trái để card sticky có chỗ chạy dọc theo phần mô tả. */
.order-details-column { align-self: stretch; }
.order-details-card { position: sticky; top: 24px; }

@media only screen and (max-width: 1200px) {
  .product-hero-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
  .product-summary-box { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; padding: 20px; }
}

@media only screen and (max-width: 991px) {
  /* Một cột: box → card đặt hàng → mô tả (card nằm trước mô tả để mua ngay không phải cuộn dài). */
  .product-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .product-main-column { display: contents; }
  .product-summary-box { order: 1; grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 20px; }
  .order-details-column { order: 2; }
  .order-details-card { position: static; }
  .product-full-content-section { order: 3; margin-top: 0; }
}

/* Ô số lượng chỉ dùng nút − / +: bỏ mũi tên tăng giảm mặc định của trình duyệt. */
.qty-input { -moz-appearance: textfield; appearance: textfield; }
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Bẫy bot của form liên hệ: nằm ngoài màn hình, người thật không thấy. */
.checkout-modal .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ========================================================
   TRANG CHỦ: GIỚI THIỆU CÔNG TY (bố cục mới)
   ======================================================== */

.home-about-modern {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #F4F7FB 0%, #ffffff 100%);
}

/* Vòng tròn mờ trang trí phía sau */
.home-about-modern::before {
  content: "";
  position: absolute;
  top: -160px;
  left: -160px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(84, 133, 198, 0.16) 0%, rgba(84, 133, 198, 0) 70%);
  pointer-events: none;
}

.about-modern__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  align-items: center;
}

.about-modern__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-primary-dark);
}
.about-modern__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--theme-primary);
}

.home-about-modern .heading-title { margin-bottom: 18px; line-height: 1.2; }
.home-about-modern .heading-title span { display: block; }

.home-about-modern .content {
  font-size: 15px;
  line-height: 1.8;
  color: #4B5160;
}
.home-about-modern .content strong { color: #181A20; font-weight: 600; }

/* Bốn điểm nhấn rút từ chính đoạn giới thiệu */
.about-modern__pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 24px 0 28px;
  padding: 0;
  list-style: none;
}
.about-modern__pillars li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #181A20;
}
.about-modern__pillars .check {
  flex: none;
  box-sizing: content-box;
  padding: 5px;
  border-radius: 50%;
  background: var(--theme-primary-light);
  color: var(--theme-primary-dark);
}

.about-modern__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.about-modern__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--theme-primary-dark);
  text-decoration: none;
}
.about-modern__phone:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Khối hình: tấm nền xanh + khung ảnh trắng nghiêng nhẹ + huy hiệu logo */
.about-modern__visual {
  position: relative;
  padding: 56px 0 56px 28px;
}

.about-modern__plate {
  position: absolute;
  inset: 0 -9999px 0 56px;
  border-radius: 32px 0 0 32px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.22) 1.5px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
}

.about-modern__frame {
  position: relative;
  margin: 0 0 0 -28px;
  padding: 10px;
  background: #ffffff;
  border-radius: 24px;
  transform: rotate(-1.5deg);
  box-shadow: 0 18px 40px rgba(44, 86, 136, 0.28);
  transition: transform 0.4s ease;
}
.about-modern__frame:hover { transform: rotate(0deg); }
.about-modern__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.about-modern__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  padding: 14px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(44, 86, 136, 0.25);
}
.about-modern__badge img { max-width: 100%; height: auto; }

@media only screen and (max-width: 991px) {
  .about-modern__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .about-modern__visual { padding: 36px 0 36px 0; }
  .about-modern__plate { inset: 0 -9999px 0 -9999px; border-radius: 0; }
  .about-modern__frame { margin: 0 8px; }
  .about-modern__badge { width: 72px; height: 72px; padding: 10px; top: 6px; right: 14px; }
}

@media only screen and (max-width: 480px) {
  .about-modern__pillars { grid-template-columns: minmax(0, 1fr); }
}

/* ========================================================
   TRANG CHỦ: LIÊN HỆ & BÁO GIÁ
   Dải banner ngang; thẻ trắng đè lên mép dưới banner: ảnh + khung hotline bên trái, form bên phải.
   ======================================================== */

.home-quote { position: relative; background: #F7F9FC; padding-bottom: 72px; }

.quote-banner { position: relative; height: 560px; overflow: hidden; background: var(--theme-primary-light); }
/* Lớp phủ nhẹ để banner dịu lại và thẻ trắng nổi bật hơn; không chặn thao tác sửa ảnh */
.quote-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(44, 86, 136, 0.18) 0%, rgba(24, 26, 32, 0.32) 100%);
  pointer-events: none;
}
.quote-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }

.quote-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
  margin-top: -110px;
  padding: 44px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(24, 26, 32, 0.1);
}

/* Cột ảnh: ảnh bo góc + khung hotline xanh chồng lên góc dưới trái */
.quote-card__photo { position: relative; padding-bottom: 8px; }
.quote-card__image { height: 380px; overflow: hidden; border-radius: 14px; background: var(--theme-primary-light); }
.quote-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 12% center; }

.quote-card__note {
  position: absolute;
  left: -22px;
  bottom: -22px;
  max-width: 82%;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--theme-primary-dark);
  color: #ffffff;
}
.quote-card__note p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }
.quote-card__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  text-decoration: none;
}
.quote-card__phone:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Cột form */
.quote-card__title {
  margin: 0 0 10px;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  color: #181A20;
  text-transform: uppercase;
}
.quote-card__lead { margin: 0 0 26px; font-size: 14px; line-height: 1.7; color: #6B7280; }

.quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.quote-field { display: block; margin: 0 0 16px; }

.quote-field input,
.quote-field select,
.quote-field textarea {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #F1F3F6;
  font: inherit;
  font-size: 14px;
  color: #181A20;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.quote-field input::placeholder,
.quote-field textarea::placeholder { color: #8C92A0; }
.quote-field textarea { height: auto; min-height: 120px; padding: 16px 22px; border-radius: 22px; resize: vertical; line-height: 1.6; }

/* Ô chọn: mũi tên tròn xanh ở cuối như mẫu */
.quote-field select {
  padding-right: 58px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%233B6EA8'/%3E%3Cpolyline points='10.5 13.5 16 19 21.5 13.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 32px 32px;
}

.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
  outline: none;
  border-color: var(--theme-primary);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(84, 133, 198, 0.18);
}

.quote-error { display: block; margin: 5px 0 0 18px; font-size: 12px; color: #DC2626; }
.quote-error:empty { display: none; }
.quote-form-error { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #FEF2F2; color: #B91C1C; font-size: 13px; }

.quote-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: #181A20;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, gap 0.15s ease;
}
.quote-submit:hover { background: var(--theme-primary-dark); gap: 16px; }
.quote-submit:disabled { opacity: 0.6; cursor: wait; }

.quote-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.quote-success { padding: 48px 12px; text-align: center; }
.quote-success[hidden] { display: none; }
.quote-success__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--theme-primary-light);
  color: var(--theme-primary-dark);
}
.quote-success h3 { margin: 0 0 8px; font-family: "Be Vietnam Pro", sans-serif; font-size: 22px; color: #181A20; }
.quote-success p { margin: 0; color: #4B5160; }

@media only screen and (max-width: 1200px) {
  .quote-card { gap: 36px; padding: 32px; }
  .quote-card__image { height: 340px; }
}

@media only screen and (max-width: 991px) {
  .home-quote { padding-bottom: 48px; }
  .quote-banner { height: 240px; }
  .quote-card { grid-template-columns: minmax(0, 1fr); gap: 56px; margin-top: -60px; padding: 22px; border-radius: 20px; }
  .quote-card__image { height: 260px; }
  .quote-card__note { left: 12px; right: 12px; bottom: -34px; max-width: none; }
  .quote-card__title { font-size: 26px; }
}

@media only screen and (max-width: 560px) {
  .quote-grid { grid-template-columns: minmax(0, 1fr); }
  .quote-submit { width: 100%; justify-content: center; }
}

/* Tên sản phẩm trên card: một dòng, dài quá thì cắt bằng dấu "..." (tên đầy đủ nằm trong tooltip). */
.product-item .product-inf .title,
.product-item .product-inf a.title {
  display: block !important;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

/* Khối danh mục: ảnh banner rộng hơn mà slider không bị đẩy xuống dòng.
   Cột ảnh có chiều rộng cố định theo %, cột slider lấy phần còn lại (flex: 1) nên tổng luôn vừa 100%. */
@media only screen and (min-width: 64rem) {
  .home-product-cat .wrapper.flex-x { flex-wrap: nowrap; }
  .home-product-cat .wrapper .cell.cell-img { flex: 0 0 28%; width: auto; }
  .home-product-cat .wrapper .cell.cell-product { flex: 1 1 0; width: auto; min-width: 0; }
}

@media only screen and (min-width: 75rem) {
  .home-product-cat .wrapper .cell.cell-img { flex-basis: 34%; }
}

/* ========================================================
   TRANG CMS (chính sách, giới thiệu): khung hiển thị
   Các kiểu này thay cho style inline cũ; trang rộng (Giới thiệu) bỏ giới hạn 1000px.
   ======================================================== */

.page-content-section { padding: 40px 0; }
.page-content-section .page-container { font-size: 16px; line-height: 1.85; }
.page-content-section .page-title { margin-bottom: 25px; font-size: 28px; font-weight: 700; color: #222; }
.page-content-section .entry-content { color: #333; }

/* Trang rộng: tiêu đề trang chỉ còn cho trình đọc màn hình/SEO, phần mở đầu do nội dung trang đảm nhiệm */
.page-content-section--wide { padding: 24px 0 0; }
.page-content-section--wide .page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ========================================================
   TRANG GIỚI THIỆU (nội dung HTML của Page, lớp ab-*)
   ======================================================== */

.ab-page { font-size: 15px; line-height: 1.75; color: #4B5160; }
.ab-page * { box-sizing: border-box; }
.ab-page h2, .ab-page h3 { font-family: "Be Vietnam Pro", sans-serif; color: #181A20; }
.ab-page p { margin: 0 0 14px; }
.ab-page a { text-decoration: none; }

.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-primary-dark);
}
.ab-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--theme-primary); }

.ab-title { margin: 0 0 12px; font-size: 32px; font-weight: 700; line-height: 1.2; }
.ab-page .ab-sub { max-width: 640px; margin: 0 auto; color: #6B7280; text-align: center; }
.ab-head p { text-align: center; }
.ab-head { margin-bottom: 36px; text-align: center; }
.ab-head .ab-eyebrow { justify-content: center; }

.ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ab-btn--primary { background: var(--theme-primary); color: #ffffff !important; }
.ab-btn--primary:hover { background: var(--theme-primary-dark); }
.ab-btn--ghost { border: 1px solid var(--theme-primary); color: var(--theme-primary-dark) !important; }
.ab-btn--ghost:hover { background: var(--theme-primary-light); }
.ab-btn--light { background: #ffffff; color: var(--theme-primary-dark) !important; }
.ab-btn--light:hover { background: var(--theme-primary-light); }

/* Mở đầu: ảnh làm nền cả khối, chữ nằm ở phần sáng bên trái của ảnh */
.ab-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 540px;
  padding: 64px 56px 88px;
  overflow: hidden;
  border-radius: 28px;
  background: #EAF1FA url("/images/about/hero-phuong-nam.webp") right center / cover no-repeat;
}
/* Lớp phủ sáng từ trái sang phải để chữ luôn dễ đọc, phần phải giữ nguyên ảnh */
.ab-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 34%, rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}
.ab-hero__text { position: relative; max-width: 560px; }
.ab-hero__title { margin: 0 0 16px; font-size: 40px; font-weight: 800; line-height: 1.15; }
.ab-lead { font-size: 16px; color: #4B5160; }
.ab-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Con số: thanh xanh đè lên mép dưới phần mở đầu */
.ab-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: -28px 32px 0;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
  color: #ffffff;
}
.ab-stat { padding: 26px 24px; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.2); }
.ab-stat:last-child { border-right: 0; }
.ab-stat strong { display: block; margin-bottom: 4px; font-family: "Be Vietnam Pro", sans-serif; font-size: 36px; font-weight: 800; line-height: 1.1; }
.ab-stat span { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }


/* Khối chung */
.ab-section { padding: 56px 0; }
.ab-section--narrow { max-width: 820px; margin: 0 auto; }

.ab-grid { display: grid; gap: 20px; }
.ab-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ab-card {
  display: block;
  padding: 28px 26px;
  border: 1px solid #E8EDF4;
  border-radius: 20px;
  background: #ffffff;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.ab-card h3 { margin: 16px 0 8px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.ab-card p { margin: 0; font-size: 14px; color: #6B7280; }
.ab-card--link:hover { border-color: var(--theme-primary); transform: translateY(-4px); }

.ab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--theme-primary-light);
  color: var(--theme-primary-dark);
}

/* Quy trình */
.ab-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ab-steps::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--theme-primary) 0 8px, transparent 8px 16px);
  opacity: 0.5;
}
.ab-step { position: relative; text-align: center; }
.ab-step__no {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  background: var(--theme-primary);
  color: #ffffff;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 18px;
  font-weight: 700;
}
.ab-step h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.ab-step p { margin: 0; font-size: 13.5px; color: #6B7280; }

/* Hỏi đáp: details/summary, không cần JS */
.ab-faq details { margin-bottom: 12px; padding: 0 22px; border: 1px solid #E8EDF4; border-radius: 16px; background: #ffffff; }
.ab-faq summary {
  position: relative;
  padding: 18px 28px 18px 0;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #181A20;
  cursor: pointer;
  list-style: none;
}
.ab-faq summary::-webkit-details-marker { display: none; }
.ab-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--theme-primary-dark);
}
.ab-faq details[open] { border-color: var(--theme-primary); }
.ab-faq details[open] summary::after { content: "\2212"; }
.ab-faq details p { padding-bottom: 18px; margin: 0; }
.ab-faq details a { color: var(--theme-primary-dark); text-decoration: underline; text-underline-offset: 3px; }

/* Kêu gọi hành động */
.ab-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin: 24px 0 0;
  padding: 44px 48px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.16) 1.5px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
  color: #ffffff;
}
.ab-cta h2 { margin: 0 0 8px; font-size: 28px; font-weight: 700; color: #ffffff; }
.ab-cta p { margin: 0; max-width: 620px; color: rgba(255, 255, 255, 0.92); }
.ab-cta .ab-btn { flex: none; }

@media only screen and (max-width: 1100px) {
  .ab-hero { padding: 48px 36px 72px; min-height: 480px; }
  .ab-hero__title { font-size: 34px; }
  .ab-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .ab-steps::before { display: none; }
}

@media only screen and (max-width: 860px) {
  .ab-hero { min-height: 0; padding: 32px 22px 260px; border-radius: 22px; background-size: auto 62%; background-position: 82% bottom; }
  .ab-hero::before { background: linear-gradient(180deg, #EEF4FB 0%, #EEF4FB 52%, rgba(238, 244, 251, 0) 78%); }
  .ab-hero__title { font-size: 28px; }
  .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: -20px 12px 0; }
  .ab-stat { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  .ab-stat:nth-child(2n) { border-right: 0; }
  .ab-stat:nth-last-child(-n+2) { border-bottom: 0; }
  .ab-title { font-size: 26px; }
  .ab-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-cta { flex-direction: column; align-items: flex-start; padding: 30px 24px; border-radius: 22px; }
}

@media only screen and (max-width: 560px) {
  .ab-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .ab-steps { grid-template-columns: minmax(0, 1fr); }
  .ab-stat strong { font-size: 28px; }
  .ab-stat { padding: 20px 12px; }
}

/* ========================================================
   ĐỒNG BỘ ĐỘ RỘNG KHỐI NỘI DUNG
   Mọi khối (header, thanh menu, breadcrumb, nội dung, footer) dùng chung một khung:
   .container của theme (tối đa 1440px, đệm 14px hai bên). Chỉ phần đệm chữ trong khung là khác nhau.
   ======================================================== */

/* Header: trước đây tự đặt 1440px + đệm 32px nên logo lệch so với nội dung bên dưới */
.main-header-bar { padding-left: 0; padding-right: 0; }

/* Thanh breadcrumb theo màu chủ đạo thay vì xám xanh của theme cũ */
.section-breadcrumb.has-background .bottom-breadcrumb.no-banner,
.section-breadcrumb { background-color: #EEF3FA !important; }
.section-breadcrumb #breadcrumbs li,
.section-breadcrumb #breadcrumbs li a { color: #4B5160 !important; }
.section-breadcrumb #breadcrumbs li.current { color: var(--theme-primary-dark) !important; font-weight: 500; }

/* ========================================================
   TRANG GIỚI THIỆU: CÂU CHUYỆN DẠNG TIMELINE
   Đường kẻ dọc ở giữa; card lần lượt nằm trái, phải, trái, phải.
   Khi cuộn, card trái trượt vào từ bên trái, card phải trượt vào từ bên phải, đường kẻ chạy dần xuống.
   Hiệu ứng chỉ dùng CSS (scroll-driven animation) để không ghi class/thuộc tính lạ vào HTML của trang CMS;
   trình duyệt chưa hỗ trợ thì các card hiện sẵn, không mất nội dung.
   ======================================================== */

.ab-story { padding: 72px 0 24px; }

.ab-timeline {
  --ab-gap: 56px;
  position: relative;
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

/* Đường kẻ nền và đường kẻ tiến độ */
.ab-timeline::before,
.ab-timeline::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 3px;
}
.ab-timeline::before { background: #DCE6F3; }
.ab-timeline::after {
  background: linear-gradient(180deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
  transform-origin: top;
}

.ab-tl { position: relative; width: 50%; margin: 0 0 28px; }
.ab-tl:last-child { margin-bottom: 0; }
.ab-tl--left { padding-right: var(--ab-gap); }
.ab-tl--right { margin-left: 50%; padding-left: var(--ab-gap); }

/* Chấm tròn trên đường kẻ + nhánh nối sang card */
.ab-tl::before {
  content: "";
  position: absolute;
  top: 30px;
  width: 18px;
  height: 18px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  background: var(--theme-primary);
  box-shadow: 0 0 0 2px var(--theme-primary);
  z-index: 1;
}
.ab-tl--left::before { right: -9px; }
.ab-tl--right::before { left: -9px; }
.ab-tl::after {
  content: "";
  position: absolute;
  top: 38px;
  width: calc(var(--ab-gap) - 9px);
  height: 2px;
  background: var(--theme-primary);
  opacity: 0.45;
}
.ab-tl--left::after { right: 9px; }
.ab-tl--right::after { left: 9px; }

.ab-tl__card {
  padding: 26px 28px;
  border: 1px solid #E8EDF4;
  border-radius: 20px;
  background: #ffffff;
  transition: border-color 0.2s ease;
}
.ab-tl__card:hover { border-color: var(--theme-primary); }
.ab-tl__tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--theme-primary-light);
  color: var(--theme-primary-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ab-tl__card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.ab-tl__card p { margin: 0; font-size: 14.5px; color: #6B7280; }
.ab-tl__media {
  aspect-ratio: 3 / 2;
  /* Theme có "figure { max-width: 100% !important }" nên lề âm không đủ: đặt rõ chiều rộng = card (nội dung + 2 × đệm) */
  width: calc(100% + 56px);
  max-width: none !important;
  margin: 20px -28px -26px;
  overflow: hidden;
  border-top: 1px solid #E8EDF4;
  border-radius: 0 0 19px 19px;
  background: #EEF3FA;
}
.ab-tl__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.ab-tl__card:hover .ab-tl__media img { transform: scale(1.025); }

/* Hiệu ứng theo thanh cuộn */
@keyframes ab-from-left { from { opacity: 0; transform: translateX(-110px); } to { opacity: 1; transform: none; } }
@keyframes ab-from-right { from { opacity: 0; transform: translateX(110px); } to { opacity: 1; transform: none; } }
@keyframes ab-dot-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
@keyframes ab-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ab-line-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ab-tl--left .ab-tl__card {
      animation: ab-from-left linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }
    .ab-tl--right .ab-tl__card {
      animation: ab-from-right linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }
    .ab-tl::before {
      animation: ab-dot-pop linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 25%;
    }
    .ab-tl::after {
      animation: ab-fade linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    .ab-timeline::after {
      animation: ab-line-grow linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 68%;
    }
  }
}

@media only screen and (max-width: 860px) {
  .ab-story { padding-top: 48px; }
  .ab-timeline { --ab-gap: 36px; }
  /* Một cột: đường kẻ nằm sát trái, mọi card nằm bên phải đường kẻ */
  .ab-timeline::before,
  .ab-timeline::after { left: 12px; }
  .ab-tl,
  .ab-tl--right { width: 100%; margin-left: 0; margin-bottom: 20px; }
  .ab-tl--left,
  .ab-tl--right { padding: 0 0 0 var(--ab-gap); }
  .ab-tl--left::before,
  .ab-tl--right::before { left: 3px; right: auto; }
  .ab-tl--left::after,
  .ab-tl--right::after { left: 21px; right: auto; width: calc(var(--ab-gap) - 21px); }
  .ab-tl__card { padding: 20px 20px; }
  .ab-tl__card h3 { font-size: 18px; }
  .ab-tl__media { width: calc(100% + 40px); margin: 18px -20px -20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-tl__media img { transition: none; }
  .ab-tl__card:hover .ab-tl__media img { transform: none; }
}

/* ========================================================
   TRANG GIỚI THIỆU: CAM KẾT (panel xanh bên trái cao bằng danh sách + 6 thẻ ngang bên phải)
   ======================================================== */

.ab-why {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px;
  align-items: stretch;
  padding: 56px 0;
}

.ab-why__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: 44px 40px 48px;
  border-radius: 28px;
  color: #ffffff;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.18) 1.5px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(150deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
}
.ab-why__chip {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ab-page .ab-why__title { margin: 0 0 14px; font-size: 34px; font-weight: 800; line-height: 1.15; color: #ffffff; }
.ab-page .ab-why__lead { position: relative; z-index: 1; margin: 0 0 28px; font-size: 15px; color: rgba(255, 255, 255, 0.92); }
.ab-why__intro .ab-btn { position: relative; z-index: 1; }

/* Biểu tượng khiên mờ làm nền, chỉ để trang trí */
.ab-why__mark {
  position: absolute;
  right: -34px;
  bottom: -40px;
  width: 220px;
  height: 220px;
  color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.ab-why__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.ab-why__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 22px;
  border: 1px solid #E8EDF4;
  border-radius: 20px;
  background: #ffffff;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.ab-why__item:hover { border-color: var(--theme-primary); transform: translateY(-3px); background: #F8FBFF; }
.ab-why__item h3 { margin: 2px 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.ab-why__item p { margin: 0; font-size: 14px; color: #6B7280; }

.ab-why__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--theme-primary-light);
  color: var(--theme-primary-dark);
  transition: background 0.2s ease, color 0.2s ease;
}
.ab-why__item:hover .ab-why__icon { background: var(--theme-primary); color: #ffffff; }

/* Mỗi thẻ nổi lên nhẹ khi cuộn tới (chỉ CSS, không ghi gì vào HTML trang) */
@keyframes ab-rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ab-why__item {
      animation: ab-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
  }
}

@media only screen and (max-width: 1100px) {
  .ab-why { grid-template-columns: minmax(0, 1fr); }
}

@media only screen and (max-width: 640px) {
  .ab-why { padding: 36px 0; }
  .ab-why__intro { padding: 30px 24px 36px; border-radius: 22px; }
  .ab-page .ab-why__title { font-size: 28px; }
  .ab-why__list { grid-template-columns: minmax(0, 1fr); }
}

/* ========================================================
   FOOTER: nền xanh đậm, mép trên lượn sóng
   Hàng trên: 4 cột link (trái) + khối đăng ký ưu đãi / mạng xã hội (phải, căn phải).
   Hàng dưới: bản quyền (trái) + link pháp lý (phải).
   Đổi --footer-bg / --footer-accent để đổi màu cả footer.
   ======================================================== */

.site-footer {
  --footer-bg: #2C5688;
  --footer-accent: #F6C945;
  --footer-accent-text: #2B2410;
  --footer-muted: rgba(255, 255, 255, 0.72);
  position: relative;
  padding-bottom: 0;
}

.footer-wave { display: block; height: 56px; margin-bottom: -1px; line-height: 0; }
.footer-wave svg { display: block; width: 100%; height: 100%; fill: var(--footer-bg); }

/* Đệm dưới chừa chỗ cho thanh hotline cố định ở đáy màn hình, nằm trong vùng xanh để không lộ nền trắng */
.footer-main { background: var(--footer-bg); color: #ffffff; padding: 28px 0 50px; font-size: 14px; }

.footer-main__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 36px; }

/* Cột link */
.footer-links {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(130px, 0.95fr) minmax(130px, 0.95fr) minmax(190px, 1.3fr);
  gap: 24px 32px;
}
.footer-links__col { min-width: 0; }
.footer-links__col h3 {
  margin: 0 0 14px;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}
.footer-links__col ul { margin: 0; padding: 0; list-style: none; }
.footer-links__col li { margin-bottom: 9px; }
.footer-links__col a,
.footer-links__col span { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); text-decoration: none; transition: color 0.15s ease; }
.footer-links__col a:hover { color: var(--footer-accent); }
.footer-links__col--contact { max-width: 240px; }

/* Khối đăng ký, căn phải */
.footer-signup { flex: 0 0 360px; max-width: 100%; text-align: right; }
.footer-signup__title { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: #ffffff; }

.footer-signup__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 20px;
  border-radius: 999px;
  background: #ffffff;
}
.footer-signup__form input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #181A20;
}
.footer-signup__form input::placeholder { color: #6B7280; }
.footer-signup__form input:focus { outline: none; }
.footer-signup__form button {
  flex: none;
  height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--footer-accent);
  color: var(--footer-accent-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.footer-signup__form button:hover { filter: brightness(0.95); }

.footer-social { display: flex; justify-content: flex-end; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.footer-social a { display: inline-flex; opacity: 0.92; transition: opacity 0.15s ease, transform 0.15s ease; }
.footer-social a:hover { opacity: 1; transform: translateY(-2px); }
.footer-social img { display: block; width: 26px; height: 26px; object-fit: contain; }

.footer-brand {
  display: inline-block;
  margin-top: 20px;
  padding: 6px 12px;
  border-radius: 10px;
  background: #ffffff;
  line-height: 0;
}
.footer-brand img { display: block; max-height: 40px; width: auto; }

/* Hàng bản quyền */
.footer-credit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin-top: 36px;
  padding: 22px 0 26px;
  border-top: 0;
  background: transparent;
}
#footer-credit.footer-credit { background-color: transparent !important; border-top: 0 !important; }
#footer-credit .copyright { margin: 0; padding: 0; font-size: 12.5px; font-weight: 600; color: #ffffff; text-align: left; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.footer-legal a { font-size: 12.5px; color: var(--footer-muted); text-decoration: none; }
.footer-legal a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }

@media only screen and (max-width: 1100px) {
  .footer-main__top { flex-direction: column; gap: 36px; }
  .footer-links { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
  .footer-signup { flex: none; width: 100%; max-width: 420px; text-align: left; }
  .footer-social { justify-content: flex-start; }
}

@media only screen and (max-width: 768px) {
  .footer-main { padding-bottom: 62px; }
  .footer-wave { height: 36px; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .footer-links__col--contact { max-width: none; }
  .footer-credit { flex-direction: column; align-items: flex-start; margin-top: 28px; }
}

/* ========================================================
   "VÌ SAO CHỌN PHƯƠNG NAM" (trang Giới thiệu): nền ảnh xanh ngọc có chấm và ngôi sao nhiều màu (why-choose-bg.png)
   Trang chủ không dùng ảnh nền này, khối cùng tên ở đó nền trắng.
   ======================================================== */

/* Trang Giới thiệu: dải nền bo góc, tiêu đề canh giữa, 6 thẻ trắng xếp 3 cột */
.ab-why {
  position: relative;
  isolation: isolate;
  display: block;
  margin: 64px 0;
  padding: 72px 0 80px;
}
/* Nền ảnh tràn hết chiều rộng màn hình dù nội dung nằm trong khung container */
.ab-why::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #008167 url("../../resources/img/why-choose-bg.png") center / cover no-repeat;
}
/* 100vw gồm cả thanh cuộn: cắt phần tràn để không sinh thanh cuộn ngang */
.page-content-section--wide { overflow-x: clip; }

/* Mép trên lượn sóng, cùng đường cong với footer, tô đúng màu nền ảnh */
.ab-why::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -55px;
  left: 50%;
  width: 100vw;
  height: 56px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath fill='%23008167' d='M0 30C180 62 360 62 540 30S900 -2 1080 30 1320 62 1440 30V56H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Mép dưới lượn sóng: cùng đường cong lật ngược. Đặt trên .ab-why__list vì .ab-why đã dùng hết hai pseudo-element;
   .ab-why__list không định vị nên khung chứa vẫn là .ab-why. */
.ab-why__list::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -55px;
  left: 50%;
  width: 100vw;
  height: 56px;
  transform: translateX(-50%) scaleY(-1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath fill='%23008167' d='M0 30C180 62 360 62 540 30S900 -2 1080 30 1320 62 1440 30V56H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}
.ab-why__intro {
  position: static;
  display: block;
  margin: 0 0 40px;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
  text-align: center;
}
.ab-why__chip { margin-bottom: 14px; background: rgba(255, 255, 255, 0.2); }
.ab-page .ab-why__lead { max-width: 560px; margin: 0 auto 26px; }
.ab-why__mark { display: none; }
.ab-why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-why__item { border-color: transparent; }

@media only screen and (max-width: 1100px) {
  .ab-why { padding: 56px 0 64px; }
  .ab-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 640px) {
  .ab-why { margin: 40px 0; padding: 44px 0 48px; }
  .ab-why::after { top: -35px; height: 36px; }
  .ab-why__list::after { bottom: -35px; height: 36px; }
  .ab-why__list { grid-template-columns: minmax(0, 1fr); }
}

/* Trang chủ ("Vì sao nên chọn"): nền trắng, thẻ xanh dương gốc của theme.
   Sửa lỗi icon dính sát tiêu đề: thêm khoảng cách và cho tiêu đề tự co theo phần còn lại của hàng. */
.home-why-choose .wrapper .item .top { gap: 16px; }
.home-why-choose .wrapper .item .top .title { flex: 1 1 0; width: auto; min-width: 0; font-size: 17px; line-height: 1.35; }
.home-why-choose .wrapper .item .top .icon { flex: none; }

/* ========================================================
   TRANG CHỦ: TIN TỨC
   Banner ảnh full width; slider card nằm trên, phần dưới của slider đè lên 60% chiều cao phía trên của banner.
   ======================================================== */

.home-news {
  --news-banner-h: clamp(340px, 34vw, 520px);
  position: relative;
  padding: 56px 0 0;
  margin-bottom: 0;
  background: #ffffff;
}

.home-news__inner { position: relative; z-index: 2; }

.home-news__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.home-news__title {
  margin: 0;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  color: #181A20;
}
.home-news__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--theme-primary);
  border-radius: 999px;
  color: var(--theme-primary-dark);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, gap 0.2s ease;
}
.home-news__all:hover { gap: 12px; background: var(--theme-primary); color: #ffffff; }

/* Banner kéo lên dưới slider: 60% chiều cao banner nằm sau phần dưới của slider */
.home-news__banner {
  position: relative;
  z-index: 1;
  height: var(--news-banner-h);
  margin-top: calc(var(--news-banner-h) * -0.6);
  background: #155CA7;
}
.home-news__banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

/* Mép dưới lượn sóng màu #155CA7: cùng đường cong với footer, lật ngược để sóng thả xuống phần trắng bên dưới */
.home-news__banner::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -55px;
  height: 56px;
  transform: scaleY(-1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath fill='%23155CA7' d='M0 30C180 62 360 62 540 30S900 -2 1080 30 1320 62 1440 30V56H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}
@media only screen and (max-width: 640px) {
  .home-news__banner::after { bottom: -35px; height: 36px; }
}

/* Slider */
.home-news .swiper-container { position: static; }
.home-news .swiper { overflow: hidden; margin: 0 -12px; padding: 4px 12px 8px; }
.home-news .swiper-wrapper .swiper-slide { width: 25%; padding: 0 12px; box-sizing: border-box; height: auto; }

/* Nút prev / next nằm cùng hàng với tiêu đề, góc phải */
.home-news .swiper-controls {
  position: absolute;
  top: 6px;
  right: 170px;
  display: flex;
  gap: 10px;
  margin: 0;
  width: auto;
  transform: none;
  left: auto;
}
.home-news .swiper-controls .swiper-button {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 40px;
  height: 40px;
  margin: 0;
}

/* Card tin: ảnh bo góc, khối chữ trắng bo góc đè lên mép dưới ảnh */
.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
}
.news-card__cover { display: block; height: 210px; overflow: hidden; border-radius: 18px; background: var(--theme-primary-light); }
.news-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.news-card:hover .news-card__cover img { transform: scale(1.04); }
.news-card__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: -26px 8px 0;
  padding: 18px 22px 22px;
  border-radius: 16px;
  background: #ffffff;
}
.news-card__date { margin-bottom: 8px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--theme-primary-dark); }
.news-card__title {
  margin: 0 0 18px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  /* Theme ép display của h3 nên phải !important thì giới hạn 2 dòng mới có tác dụng */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3em; /* dự phòng cho trình duyệt không hỗ trợ line-clamp: không bao giờ quá 2 dòng */
}
.news-card__title a { color: #2D3240; text-decoration: none; }
.news-card__title a:hover { color: var(--theme-primary-dark); }
.news-card__more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  color: var(--theme-primary-dark);
  text-decoration: none;
}
.news-card__more-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--theme-primary-dark);
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
}
.news-card__more-text { font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.news-card:hover .news-card__more-ic,
.news-card__more:hover .news-card__more-ic { background: var(--theme-primary-dark); color: #ffffff; }

/* Chi tiết bài viết: nội dung chính và sidebar mục lục/bài mới. */
.single-post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: clamp(32px, 4vw, 60px); }
.single-post-main { min-width: 0; }
.single-post-sidebar { position: sticky; top: 24px; display: grid; gap: 28px; }
.post-header { margin-bottom: 28px; }
.post-title { margin: 0 0 14px; font-size: clamp(28px, 3vw, 40px); font-weight: 700; line-height: 1.3; color: #222222; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: #6B7280; font-size: 14px; }
.post-meta i { color: var(--theme-primary-dark); }
.post-prose { max-width: 780px; color: #333A46; font-size: 17px; line-height: 1.8; overflow-wrap: anywhere; }
.post-prose > :first-child { margin-top: 0; }
.post-prose > :last-child { margin-bottom: 0; }
.post-prose p { margin: 0 0 20px; }
.post-prose h2,
.post-prose h3,
.post-prose h4 { scroll-margin-top: 28px; color: #202938; font-weight: 700; }
.post-prose h2 { margin: 44px 0 16px; font-size: clamp(25px, 2.4vw, 30px); line-height: 1.35; }
.post-prose h3 { margin: 34px 0 14px; font-size: clamp(21px, 2vw, 24px); line-height: 1.4; }
.post-prose h4 { margin: 28px 0 12px; font-size: 19px; line-height: 1.45; }
.post-prose ul,
.post-prose ol { margin: 0 0 22px; padding-left: 1.4em; }
.post-prose li { padding-left: 0.25em; }
.post-prose li + li { margin-top: 8px; }
.post-prose a { color: var(--theme-primary-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-prose a:hover { color: var(--theme-primary); }
.post-prose img { display: block; max-width: 100%; height: auto; margin: 28px auto; border-radius: 14px; }
.post-prose figure { margin: 30px 0; }
.post-prose figure img { margin: 0 auto; }
.post-prose figcaption { margin-top: 10px; color: #6B7280; font-size: 13px; line-height: 1.5; text-align: center; }
.post-prose blockquote { margin: 28px 0; padding: 20px 22px; border-left: 4px solid var(--theme-primary); border-radius: 0 12px 12px 0; background: #F4F8FD; color: #39465A; }
.post-prose blockquote > :last-child { margin-bottom: 0; }
.post-prose table { display: block; width: 100%; max-width: 100%; margin: 28px 0; overflow-x: auto; border-collapse: collapse; }
.post-prose th,
.post-prose td { min-width: 120px; padding: 12px 14px; border: 1px solid #DEE6F0; text-align: left; vertical-align: top; }
.post-prose th { background: #F4F7FB; color: #293548; font-weight: 700; }
.post-prose iframe,
.post-prose video { max-width: 100%; border-radius: 12px; }
.post-sidebar-title { margin: 0 0 14px; color: #2D3240; font-size: 20px; font-weight: 700; line-height: 1.3; }
.post-toc { padding: 22px; border: 1px solid #E3EAF4; border-radius: 16px; background: #ffffff; }
.latest-posts { padding: 20px; border: 1px solid #E3EAF4; border-radius: 16px; background: #ffffff; }
.post-toc__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.post-toc__item a { color: #4B5160; font-size: 14px; line-height: 1.45; text-decoration: none; }
.post-toc__item a:hover { color: var(--theme-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.post-toc__item--child { padding-left: 14px; }
.latest-posts-list { display: grid; gap: 10px; }
.latest-post-card { min-width: 0; }
.latest-post-card__link { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 -6px; padding: 6px; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color 0.18s ease; }
.latest-post-card__link:hover { background: #F4F8FD; }
.latest-post-card__link:focus-visible { outline: 2px solid var(--theme-primary); outline-offset: 2px; }
.latest-post-card__image { display: block; height: 64px; overflow: hidden; border-radius: 10px; background: var(--theme-primary-light); }
.latest-post-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.latest-post-card__body { display: block; min-width: 0; }
.latest-post-card__body time { display: block; margin-bottom: 4px; color: var(--theme-primary-dark); font-size: 13px; line-height: 1.35; }
.latest-post-card__title { margin: 0; color: #202938; font-size: 15px; font-weight: 600; line-height: 1.4; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.latest-post-card__link:hover .latest-post-card__title { color: var(--theme-primary-dark); }

@media only screen and (max-width: 991px) {
  .single-post-layout { grid-template-columns: minmax(0, 1fr); }
  .single-post-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-news .swiper-wrapper .swiper-slide { width: 50%; }
  .home-news__title { font-size: 26px; }
}

@media only screen and (max-width: 640px) {
  .home-news { padding-top: 40px; }
  .home-news .swiper-wrapper .swiper-slide { width: 82%; }
  .home-news .swiper-controls { display: none; }
  .news-card__cover { height: 180px; }
}

@media only screen and (max-width: 640px) {
  .single-post-sidebar { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .post-toc,
  .latest-posts { padding: 18px; }
  .post-prose { font-size: 16px; line-height: 1.75; }
  .post-prose h2 { font-size: 24px; }
  .post-prose h3 { font-size: 20px; }
  .post-prose img { margin: 22px auto; border-radius: 10px; }
}

/* ========================================================
   MÔ TẢ DANH MỤC (component rich-description) + PHÂN TRANG
   Dùng lại kiểu chữ của .product-description-html, chỉ đổi khung cho cột nội dung danh mục.
   ======================================================== */

.archive-description.product-description-html {
  max-width: none;
  margin: 48px 0 0;
  padding-top: 36px;
  border-top: 1px solid #ECEFF2;
}
.archive-description.product-description-html h2:first-child { margin-top: 0; }

/* Bảng thông số trong mô tả: nhãn cột đầu */
.product-description-html th[scope="row"] {
  width: 32%;
  background: #F7F9FC;
  color: #2D3240;
  font-weight: 600;
  text-align: left;
}

.client-pagination { display: flex; justify-content: center; margin: 36px 0 0; }
.client-pagination ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.client-pagination li { margin: 0; }
.client-pagination a,
.client-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #E3EAF4;
  border-radius: 999px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  color: #4B5160;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.client-pagination a:hover { border-color: var(--theme-primary); color: var(--theme-primary-dark); }
.client-pagination .is-current { border-color: var(--theme-primary); background: var(--theme-primary); color: #ffffff; font-weight: 600; }
.client-pagination .is-disabled { opacity: 0.4; cursor: not-allowed; }
.client-pagination .is-gap { min-width: 0; border-color: transparent; background: transparent; }

/* Thu gọn mô tả danh mục dài: cắt ở ~360px, mờ dần phía dưới, nút "Xem thêm" */
.archive-collapsible { position: relative; margin-top: 48px; }
.archive-collapsible .archive-description.product-description-html { margin-top: 0; }
.archive-collapsible.is-collapsed .archive-description { max-height: 360px; overflow: hidden; }
.archive-collapsible.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 52px;
  height: 120px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%);
  pointer-events: none;
}
.archive-collapsible__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px auto 0;
  padding: 10px 22px;
  border: 1px solid var(--theme-primary);
  border-radius: 999px;
  background: #ffffff;
  color: var(--theme-primary-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.archive-collapsible__toggle:hover { background: var(--theme-primary); color: #ffffff; }
.archive-collapsible__toggle[hidden] { display: none; }
.archive-collapsible:not(.is-collapsed) .archive-collapsible__toggle svg { transform: rotate(180deg); }

/* ========================================================
   TRANG LIÊN HỆ & IN NHANH (/lien-he)
   ======================================================== */

.contact-map-banner-section {
  position: relative;
  width: 100%;
  height: clamp(480px, 52vw, 600px);
  background: var(--theme-primary-dark);
  overflow: hidden;
}

.contact-map-banner__iframe-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.contact-map-banner__iframe-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.contact-map-banner__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(24, 26, 32, 0.25), transparent);
  pointer-events: none;
}

.quote-overlap-section {
  position: relative;
  z-index: 10;
  margin-top: -8.5rem;
  padding-bottom: 4.5rem;
  background: transparent;
}

.quote-overlap-section .quote-overlap-card {
  margin-top: 0;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.14);
}

.quote-card__hours {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.92);
}

.contact-directory {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6.5rem);
  background: #ffffff;
}

.contact-directory__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  color: var(--theme-primary-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.contact-directory__eyebrow::before {
  content: "";
  width: 1.8rem;
  height: 1.5px;
  background: currentColor;
}

.contact-directory__title {
  max-width: 38rem;
  margin: 0;
  font-family: "Be Vietnam Pro", sans-serif;
  color: #181A20;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.contact-directory__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
}

.contact-directory__item {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding-left: 1.25rem;
  border-left: 2px solid rgba(84, 133, 198, 0.28);
}

.contact-directory__meta {
  display: grid;
  gap: 0.55rem;
}

.contact-directory__item h3 {
  margin: 0 0 0.35rem;
  color: #181A20;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
}

.contact-directory__item a,
.contact-directory__item address,
.contact-directory__item p {
  margin: 0;
  color: #5C6870;
  font-size: 14px;
  font-style: normal;
  line-height: 1.62;
  text-decoration: none;
}

.contact-directory__item a {
  width: fit-content;
  color: var(--theme-primary-dark);
}

.contact-directory__item a:hover {
  color: var(--theme-primary);
  text-decoration: underline;
}

@media only screen and (max-width: 991px) {
  .quote-overlap-section {
    margin-top: -4rem;
    padding-bottom: 3rem;
  }
  .contact-directory__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

@media only screen and (max-width: 700px) {
  .contact-directory {
    padding: 3rem 0 4rem;
  }
  .contact-directory__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
  .contact-directory__item {
    padding-left: 1rem;
  }
}

/* ========================================================
   HOME TRENDING PRODUCTS / CATEGORY TABBED SHOWCASE
   ======================================================== */
.home-trending-products {
  padding: 56px 0 36px;
}

.trending-products__heading {
  margin: 0 0 28px;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: clamp(1.55rem, 2.3vw, 2rem);
  font-weight: 800;
  color: #181A20;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.trending-products__layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.trending-products__sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  height: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(165deg, #5485C6 0%, #3b6ea8 100%);
  box-shadow: 0 14px 32px rgba(59, 110, 168, 0.18);
}

.trending-products__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-transform: none !important;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.trending-products__tab:hover {
  background: rgba(255, 255, 255, 0.14);
}

.trending-products__tab.is-active {
  background: #ffffff;
  color: #181A20;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.trending-products__tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #3b6ea8;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.trending-products__tab-icon svg {
  width: 18px;
  height: 18px;
}

.trending-products__tab.is-active .trending-products__tab-icon {
  background: #5485C6;
  color: #ffffff;
}

.trending-products__tab-label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: inherit;
  text-transform: none !important;
  line-height: 1.3;
}

.trending-products__panels {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.trending-products__panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.trending-products__panel[hidden] {
  display: none !important;
}

.trending-products__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
  flex: 1;
  height: 100%;
}

.trending-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: #ffffff;
  border: 1px solid #EAECEF;
  border-radius: 16px;
  overflow: hidden;
}

.trending-card__media {
  position: relative;
  height: 235px;
  padding: 22px;
  background: #F4F5F7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.trending-card__actions {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.trending-card__actions--visible,
.trending-card:hover .trending-card__actions,
.trending-card:focus-within .trending-card__actions {
  opacity: 1;
  transform: translateX(0);
}

.trending-card__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  color: #374151;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.09);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.trending-card__action-btn:hover {
  background: #5485C6;
  color: #ffffff !important;
  transform: scale(1.06);
}

.trending-card__img-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.trending-card__img-link img {
  max-width: 100%;
  max-height: 185px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.trending-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}

.trending-card__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.trending-card__price {
  font-size: 16px;
  font-weight: 800;
  color: #181A20;
}

.trending-card__old-price {
  font-size: 13px;
  color: #9CA3AF;
}

.trending-card__discount {
  font-size: 13px;
  font-weight: 700;
  color: #5485C6;
}

.trending-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 10px;
  color: #CBD5E1;
}

.trending-card__rating.is-filled {
  color: #5485C6;
}

.trending-card .title,
.trending-card__title {
  display: block;
  margin-bottom: 6px;
  color: #222222;
  font-family: "Sansita", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trending-card .title:hover,
.trending-card__title:hover {
  color: #5485C6;
}

.trending-card__desc {
  margin: 0;
  color: #6B7280;
  font-size: 13.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
}

.home-product-cat .cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 1.5rem;
}

.home-product-cat .cat-header .heading-title {
  margin-bottom: 0;
  color: #222222;
  padding-left: 20px;
  position: relative;
  font-size: 1.375rem;
}

@media only screen and (min-width: 64rem) {
  .home-product-cat .cat-header {
    margin-bottom: 1.75rem;
  }

  .home-product-cat .cat-header .heading-title {
    font-size: 1.75rem;
  }
}

.home-product-cat .cat-header .heading-title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 80%;
  transform: translateY(-50%);
  background-color: #5485C6;
  border-radius: 8px;
}

.home-product-cat .cat-header .btn-main {
  margin-top: 0;
  background-color: #5485C6;
  border: 1px solid #5485C6;
  color: #ffffff;
}

.home-product-cat .cat-header .btn-main:hover {
  background-color: #3b6ea8;
  border-color: #3b6ea8;
  color: #ffffff;
}

.home-product-cat .wrapper {
  align-items: stretch;
}

@media only screen and (min-width: 64rem) {
  .home-product-cat .wrapper .cell.cell-img {
    position: relative;
  }

  .home-product-cat .wrapper .cell.cell-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
  }
}

.home-product-cat .wrapper .cell.cell-product .swiper-container,
.related-products-modern .swiper-container {
  position: relative;
}

.related-products-modern .swiper-container {
  margin: 0 -11px;
}

.related-products-modern .swiper-wrapper .swiper-slide {
  width: 25%;
  padding: 0 11px;
  box-sizing: border-box;
  height: auto;
}

@media only screen and (max-width: 63.99875rem) {
  .related-products-modern .swiper-wrapper .swiper-slide {
    width: 33.3333%;
    padding: 0 10px;
  }
}

@media only screen and (max-width: 47.99875rem) {
  .related-products-modern .swiper-wrapper .swiper-slide {
    width: 50%;
    padding: 0 8px;
  }
}

@media only screen and (max-width: 35.99875rem) {
  .related-products-modern .swiper-wrapper .swiper-slide {
    width: 100%;
    padding: 0 8px;
  }
}

.home-product-cat .wrapper .cell.cell-product .swiper-controls,
.related-products-modern .swiper-controls {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: block !important;
  pointer-events: none;
}

.home-product-cat .wrapper .cell.cell-product .swiper-controls .swiper-pagination,
.related-products-modern .swiper-controls .swiper-pagination {
  display: none !important;
}

.home-product-cat .wrapper .cell.cell-product .swiper-controls .swiper-button,
.home-product-cat .wrapper .cell.cell-product .swiper-controls .swiper-button.swiper-button-prev,
.home-product-cat .wrapper .cell.cell-product .swiper-controls .swiper-button.swiper-button-next,
.related-products-modern .swiper-controls .swiper-button,
.related-products-modern .swiper-controls .swiper-button.swiper-button-prev,
.related-products-modern .swiper-controls .swiper-button.swiper-button-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
  width: 38px !important;
  height: 38px !important;
  z-index: 15 !important;
  pointer-events: auto;
}

.home-product-cat .wrapper .cell.cell-product .swiper-controls .swiper-button.swiper-button-prev,
.related-products-modern .swiper-controls .swiper-button.swiper-button-prev {
  left: -8px !important;
  right: auto !important;
}

.home-product-cat .wrapper .cell.cell-product .swiper-controls .swiper-button.swiper-button-next,
.related-products-modern .swiper-controls .swiper-button.swiper-button-next {
  right: -8px !important;
  left: auto !important;
}

.home-product-cat .wrapper .cell.cell-product .swiper-controls .swiper-button::before,
.related-products-modern .swiper-controls .swiper-button::before {
  background-color: #ffffff !important;
  opacity: 1 !important;
  border: 1px solid #5485C6 !important;
  color: #5485C6 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
}

.home-product-cat .wrapper .cell.cell-product .swiper-controls .swiper-button:hover::before,
.related-products-modern .swiper-controls .swiper-button:hover::before {
  background-color: #5485C6 !important;
  border-color: #5485C6 !important;
  color: #ffffff !important;
}

@media only screen and (min-width: 64rem) {
  .home-product-cat .wrapper .cell.cell-product .swiper-wrapper .swiper-slide {
    width: 33.3333%;
    padding: 0 11px;
  }
}

.trending-products__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 320px;
  padding: 32px;
  border: 1px dashed #CBD5E1;
  border-radius: 16px;
  background: #F8FAFC;
  color: #64748B;
  text-align: center;
}

@media only screen and (max-width: 1199px) {
  .trending-products__layout {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
  }
  .trending-products__grid {
    gap: 16px;
  }
}

@media only screen and (max-width: 991px) {
  .trending-products__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .trending-products__sidebar {
    flex-direction: row;
    overflow-x: auto;
    padding: 12px;
    gap: 8px;
  }
  .trending-products__tab {
    width: auto;
    flex-shrink: 0;
    padding: 8px 14px;
  }
  .trending-products__tab-icon {
    width: 34px;
    height: 34px;
  }
  .trending-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 600px) {
  .trending-products__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ========================================================
   QUICK VIEW MODAL
   ======================================================== */
body.quick-view-open {
  overflow: hidden;
}

.quick-view-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.quick-view-modal[hidden] {
  display: none !important;
}

.quick-view-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.quick-view-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
}

.quick-view-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #ffffff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s ease;
}

.quick-view-modal.is-open .quick-view-modal__dialog {
  transform: translateY(0) scale(1);
}

.quick-view-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: #ffffff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.quick-view-modal__close:hover {
  background: #5485C6;
  border-color: #5485C6;
  color: #ffffff;
}

.quick-view-modal__grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.quick-view-modal__gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quick-view-modal__main-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 340px;
  padding: 24px;
  background: #F4F5F7;
  border-radius: 16px;
  border: 1px solid #EAECEF;
  overflow: hidden;
}

.quick-view-modal__main-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.quick-view-modal__thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.quick-view-modal__thumbs[hidden] {
  display: none !important;
}

.quick-view-modal__thumb {
  width: 64px;
  height: 64px;
  padding: 6px;
  border-radius: 10px;
  border: 1.5px solid #E2E8F0;
  background: #F8FAFC;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.quick-view-modal__thumb.is-active {
  border-color: #5485C6;
  background: #ffffff;
}

.quick-view-modal__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.quick-view-modal__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-right: 12px;
}

.quick-view-modal__title {
  margin: 0 0 10px;
  font-family: "Sansita", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  color: #222222;
}

.quick-view-modal__title a {
  color: inherit;
  text-decoration: none;
}

.quick-view-modal__title a:hover {
  color: #5485C6;
}

.quick-view-modal__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #5485C6;
  margin-bottom: 14px;
}

.quick-view-modal__rating-text {
  margin-left: 6px;
  font-size: 13px;
  color: #64748B;
}

.quick-view-modal__price-box {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #EAECEF;
  margin-bottom: 16px;
}

.quick-view-modal__price {
  font-size: 22px;
  font-weight: 800;
  color: #5485C6;
}

.quick-view-modal__old-price {
  font-size: 15px;
  color: #94A3B8;
}

.quick-view-modal__discount {
  padding: 2px 8px;
  border-radius: 6px;
  background: #5485C6;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.quick-view-modal__desc {
  margin: 0 0 16px;
  color: #4B5563;
  font-size: 14.5px;
  line-height: 1.6;
}

.quick-view-modal__meta {
  list-style: none;
  margin: 0 0 22px;
  padding: 14px 0 0;
  border-top: 1px solid #EAECEF;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-view-modal__meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #475569;
}

.quick-view-modal__meta li svg {
  color: #5485C6;
  flex-shrink: 0;
}

.quick-view-modal__meta li strong {
  color: #1E293B;
}

.quick-view-modal__actions {
  display: flex;
  align-items: center;
  margin-top: auto;
}

.quick-view-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 26px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.quick-view-modal__btn svg {
  flex-shrink: 0;
}

.quick-view-modal__btn--primary {
  background: #5485C6;
  border: 1px solid #5485C6;
  color: #ffffff !important;
}

.quick-view-modal__btn--primary:hover {
  background: #3b6ea8;
  border-color: #3b6ea8;
  color: #ffffff !important;
}

@media only screen and (max-width: 767px) {
  .quick-view-modal__dialog {
    padding: 20px;
  }

  .quick-view-modal__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .quick-view-modal__main-img-wrap {
    height: 250px;
  }

  .quick-view-modal__title {
    font-size: 22px;
  }
}



/* ========================================================
   TRANG SẢN PHẨM: bảng thông tin (từ "Mô tả ngắn") + 6 điểm chính sách
   ======================================================== */

.product-specs { margin: 0 0 22px; }
.product-specs__table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ECEFF2;
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
}
.product-specs__table th,
.product-specs__table td { padding: 11px 16px; border-bottom: 1px solid #F1F3F6; vertical-align: top; text-align: left; background: transparent; }
.product-specs__table tr:last-child th,
.product-specs__table tr:last-child td { border-bottom: 0; }
.product-specs__table th { width: 38%; background: #F7F9FC; color: #2D3240; font-weight: 600; }
.product-specs__table td { color: #4B5160; }
.product-specs__note { margin: 10px 0 0; font-size: 13.5px; color: #6B7280; }

.product-perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.product-perks li { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; color: #4B5160; }
.product-perks__ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--theme-primary-light);
  color: var(--theme-primary-dark);
}

@media only screen and (max-width: 560px) {
  .product-perks { grid-template-columns: minmax(0, 1fr); }
  .product-specs__table th { width: 42%; }
}

/* ========================================================
   TRANG CHỦ: HERO (thông điệp bằng code, ảnh nền không chữ)
   ======================================================== */

.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 640px;
  background: #EAF1FA url("/images/about/hero-phuong-nam.webp") right center / cover no-repeat;
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 38%, rgba(255, 255, 255, 0) 64%);
  pointer-events: none;
}
.home-hero .container { position: relative; width: 100%; padding-top: 48px; padding-bottom: 48px; }
.home-hero__text { max-width: 560px; }

.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-primary-dark);
}
.home-hero__eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--theme-primary); }

.home-hero__title {
  margin: 0 0 14px;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.12;
  color: #181A20;
}
.home-hero__lead { margin: 0 0 26px; font-size: 16px; line-height: 1.7; color: #4B5160; }

.home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.home-hero__btn--primary { background: var(--theme-primary); color: #ffffff !important; }
.home-hero__btn--primary:hover { background: var(--theme-primary-dark); }
.home-hero__btn--ghost { border: 1px solid var(--theme-primary); background: rgba(255, 255, 255, 0.85); color: var(--theme-primary-dark) !important; }
.home-hero__btn--ghost:hover { background: var(--theme-primary-light); }
.home-hero__btn--zalo { background: #0068FF; color: #ffffff !important; }
.home-hero__btn--zalo:hover { background: #0054CC; }

.home-hero__chips { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 24px 0 0; padding: 0; list-style: none; }
.home-hero__chips li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #2D3240; }
.home-hero__chips svg { padding: 3px; border-radius: 50%; background: var(--theme-primary-light); color: var(--theme-primary-dark); box-sizing: content-box; }

@media only screen and (max-width: 991px) {
  .home-hero { min-height: 0; background-position: 70% bottom; background-size: auto 56%; }
  .home-hero::before { background: linear-gradient(180deg, #EEF4FB 0%, #EEF4FB 55%, rgba(238, 244, 251, 0) 85%); }
  .home-hero .container { padding-top: 36px; padding-bottom: 290px; }
  .home-hero__title { font-size: 32px; }
}
@media only screen and (max-width: 560px) {
  .home-hero__btn { flex: 1 1 100%; justify-content: center; }
  .home-hero__title { font-size: 28px; }
}

/* ========================================================
   FONT THỐNG NHẤT: Be Vietnam Pro (tự lưu trên server) + hạn chế chữ in hoa toàn bộ
   ======================================================== */

body,
body :where(h1, h2, h3, h4, h5, h6, p, a, li, span, div, button, input, select, textarea, label, th, td, small, strong, em, b, time, nav, summary) {
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* Tiêu đề, menu, nút, tên sản phẩm: viết hoa chữ đầu như câu thường */
.heading-title,
.title,
.section-title,
.group-title *,
.cat-header .heading-title,
.home-news__title,
.quote-card__title,
.archive-title,
.product-title,
.card-heading,
.page-title,
.footer-main__heading,
.footer-links__col h3,
.ab-title,
.ab-why__title,
.ab-hero__title,
#bottom-header nav ul li > a,
#bottom-header nav ul li > a span,
.btn-main,
.product-item .product-inf .title,
.product-item .product-inf .title a,
.header-cart .cart-label,
.nav-menu-main a,
.selector-label,
.breadcrumbs li,
.breadcrumbs li a {
  text-transform: none !important;
}
.home-news__title,
.quote-card__title { letter-spacing: 0; }

/* ========================================================
   HEADER: hotline, Zalo và nút Báo giá nhanh nổi bật; logo to hơn
   ======================================================== */

.header-cta { display: flex; align-items: center; gap: 12px; margin-right: 8px; }
.header-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--theme-primary);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(84, 133, 198, 0.4);
  transition: background 0.15s ease;
}
.header-quote:hover { background: var(--theme-primary-dark); }

@media only screen and (max-width: 1279px) {
  .header-search { width: 260px; }
}
@media only screen and (max-width: 1099px) {
  .header-search { display: none; }
}
@media only screen and (max-width: 767px) {
  .main-header-bar { height: 68px; }
  .header-logo .site-logo-img { max-height: 46px; }
  .header-quote { padding: 0 14px; font-size: 13px; height: 38px; }
  .header-cta { gap: 8px; margin-right: 4px; }
}

/* Thẻ sản phẩm theo feedback khách: tên trước, chất liệu/kích thước, nút Yêu cầu báo giá */
.trending-card .title,
.trending-card__title { font-family: "Be Vietnam Pro", sans-serif; font-size: 17px; font-weight: 600; }
.trending-card__specs { margin: 0 0 12px; padding: 0; list-style: none; }
.trending-card__specs li {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trending-card__specs strong { font-weight: 600; color: #2D3240; }
.trending-card__body .trending-card__price-row { margin: 2px 0 12px; }
.trending-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  margin-top: auto;
  border: 1px solid var(--theme-primary);
  border-radius: 999px;
  background: #ffffff;
  color: var(--theme-primary-dark) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.trending-card__cta:hover { background: var(--theme-primary); color: #ffffff !important; }

/* Nhãn nhỏ cũng bỏ in hoa toàn bộ */
.ab-eyebrow,
.home-hero__eyebrow,
.about-modern__eyebrow,
.quote-card__eyebrow,
.ab-why__chip,
.ab-tl__tag,
.cat-showcase__eyebrow { text-transform: none !important; letter-spacing: 0.02em !important; }

/* Khung nhận báo giá ở trang sản phẩm */
.quote-panel__intro { margin: -8px 0 16px; font-size: 13px; line-height: 1.6; color: #6B7280; }
.quote-panel .order-row { margin-top: 4px; }
.quote-panel__field { display: block; margin: 14px 0 0; }
.quote-panel__field > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #2D3240; }
.quote-panel__field em { font-style: normal; color: #DC2626; }
.quote-panel__field input,
.quote-panel__field textarea {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #E3EAF4;
  border-radius: 12px;
  background: #F9FBFD;
  font: inherit;
  font-size: 14px;
  color: #181A20;
  box-sizing: border-box;
}
.quote-panel__field textarea { resize: vertical; min-height: 84px; }
.quote-panel__field input:focus,
.quote-panel__field textarea:focus { outline: none; border-color: var(--theme-primary); background: #ffffff; box-shadow: 0 0 0 3px rgba(84, 133, 198, 0.18); }
.quote-panel__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.quote-panel .field-error { display: block; margin-top: 4px; font-size: 12px; color: #DC2626; }
.quote-panel .field-error:empty { display: none; }
.quote-panel .form-error { margin: 14px 0 0; }
.quote-panel .btn-buy-now { margin-top: 18px; }
.quote-panel__success { padding: 24px 4px 8px; text-align: center; }
.quote-panel__success[hidden] { display: none; }
.quote-panel__success h3 { margin: 0 0 8px; font-size: 18px; color: var(--theme-primary-dark); }
.quote-panel__success p { margin: 0; font-size: 14px; color: #4B5160; }
@media only screen and (max-width: 560px) { .quote-panel__row { grid-template-columns: minmax(0, 1fr); } }

/* Ô bẫy bot dùng chung cho mọi form (không phụ thuộc modal) */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.trending-card__specs,
.trending-card__desc { margin-bottom: 14px; }

/* ========================================================
   NÚT NỔI GÓC DƯỚI PHẢI: Zalo + gọi điện (nằm trên nút "lên đầu trang")
   ======================================================== */

.float-contact {
  position: fixed;
  z-index: 998;
  right: 22px;
  bottom: 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.float-contact__btn {
  position: relative;
  display: flex;
  text-decoration: none;
}
.float-contact__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 40, 80, 0.28);
  transition: transform 0.15s ease;
}
.float-contact__icon--text { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; }
.float-contact__btn--zalo .float-contact__icon { background: #0068FF; }
.float-contact__btn--phone .float-contact__icon { background: #22A453; }
.float-contact__btn:hover .float-contact__icon { transform: scale(1.08); }
/* Vòng sóng nhấp nháy quanh nút */
.float-contact__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  opacity: 0.45;
  animation: float-contact-pulse 2s ease-out infinite;
  z-index: -1;
}
@keyframes float-contact-pulse { from { transform: scale(1); opacity: 0.45; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .float-contact__icon::before { animation: none; } }

/* Nhãn hiện ra khi rê chuột */
.float-contact__label {
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  color: #181A20;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(15, 40, 80, 0.18);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  opacity: 0;
  transform: translate(8px, -50%);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.float-contact__btn:hover .float-contact__label,
.float-contact__btn:focus-visible .float-contact__label { opacity: 1; transform: translate(0, -50%); }

@media only screen and (max-width: 767px) {
  .float-contact { right: 14px; bottom: 150px; gap: 10px; }
  .float-contact__icon { width: 46px; height: 46px; }
}

/* ========================================================
   ĐỘ RỘNG TỐI ĐA TOÀN WEBSITE = 1440px
   Theme đặt .container 640 / 768 / 1024 / 1340 theo breakpoint; từ 1024px trở lên cho co giãn theo màn hình, tối đa 1440px.
   Mọi khối (header, thanh menu, breadcrumb, nội dung, footer) dùng .container nên đổi một chỗ là đổi cả site.
   ======================================================== */
@media only screen and (min-width: 64rem) {
  :is(.container, .flex-container, .grid-container):not(.full) { max-width: 1440px; }
}

/* Tooltip In nhanh nằm sát mép phải của header: canh theo mép phải để không đẩy trang rộng hơn màn hình khi khung rộng 1440px */
.header-quick-print__tooltip { left: auto; right: 0; transform: translateY(-4px); }
.header-quick-print__tooltip::before { left: auto; right: 14px; transform: none; }
.header-quick-print:hover .header-quick-print__tooltip,
.header-quick-print:focus-visible .header-quick-print__tooltip { transform: translateY(0); }

/* Nút điều hướng slider "Sản phẩm cùng loại" nhô ra mép phải khi khung rộng 1440px: cắt phần tràn để không sinh thanh cuộn ngang */
.product-detail-modern-page { overflow-x: clip; }

/* ========================================================
   BẢNG THÔNG TIN THỐNG NHẤT
   Bảng "Mô tả ngắn" cạnh ảnh sản phẩm, bảng thông số trong mô tả chi tiết và bảng trong mô tả danh mục
   dùng chung một kiểu: viền mảnh bo góc, cột nhãn nền xám nhạt chữ đậm, không nền sọc.
   ======================================================== */

.product-specs__table,
.product-description-html table {
  width: 100%;
  margin: 0 0 22px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ECEFF2;
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
}
.product-specs__table { margin-bottom: 0; }

.product-specs__table tbody tr,
.product-description-html tbody tr:nth-child(even),
.product-description-html tbody tr { background: transparent; }

.product-specs__table th,
.product-specs__table td,
.product-description-html th,
.product-description-html td {
  padding: 12px 16px;
  border-bottom: 1px solid #F1F3F6;
  text-align: left;
  vertical-align: top;
  background: transparent;
  color: #4B5160;
  font-weight: 400;
}
.product-specs__table tr:last-child th,
.product-specs__table tr:last-child td,
.product-description-html tr:last-child th,
.product-description-html tr:last-child td { border-bottom: 0; }

/* Cột nhãn */
.product-specs__table th,
.product-description-html th,
.product-description-html td:first-child {
  width: 34%;
  background: #F7F9FC;
  color: #2D3240;
  font-weight: 600;
}
.product-description-html td:first-child strong { font-weight: 600; color: inherit; }

/* ========================================================
   HERO TRANG CHỦ: slider ảnh nền tự chạy, có nút trước/sau, lớp phủ nhẹ để chữ luôn đọc được
   ======================================================== */
.home-hero { background-image: none; overflow: hidden; }
.home-hero__slider { position: absolute; inset: 0; z-index: 0; }
.home-hero__slider .swiper-container,
.home-hero__slider .swiper,
.home-hero__slider .swiper-wrapper,
.home-hero__slider .swiper-slide { height: 100%; }
.home-hero__slider .swiper-slide { width: 100%; }
.home-hero__slider .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.home-hero::before { z-index: 1; }
.home-hero .container { z-index: 2; }

/* Nút trước / sau ở hai mép, giữa chiều cao */
.home-hero__slider .swiper-controls { position: absolute; inset: 0; margin: 0; pointer-events: none; z-index: 3; }
.home-hero__slider .swiper-controls .swiper-button {
  position: absolute;
  top: auto;
  bottom: 24px;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  pointer-events: auto;
  box-shadow: 0 6px 16px rgba(15, 40, 80, 0.18);
}
.home-hero__slider .swiper-controls .swiper-button-prev { right: 74px; left: auto; }
.home-hero__slider .swiper-controls .swiper-button-next { right: 18px; left: auto; }
.home-hero__slider .swiper-controls .swiper-button::before { opacity: 1; }

/* Bốn điểm tick luôn cùng một hàng trên máy tính; chỉ xuống dòng ở mobile */
.home-hero__chips { flex-wrap: nowrap; gap: 8px 20px; }
.home-hero__chips li { white-space: nowrap; }
.home-hero__text { max-width: 640px; }

@media only screen and (max-width: 767px) {
  .home-hero__chips { flex-wrap: wrap; }
  .home-hero__slider .swiper-controls .swiper-button { width: 36px; height: 36px; bottom: 14px; }
  .home-hero__slider .swiper-controls .swiper-button-prev { right: 58px; }
  .home-hero__slider .swiper-controls .swiper-button-next { right: 12px; }
}

/* Khung nội dung nằm trên slider nhưng không chặn thao tác: chỉ phần chữ/nút nhận chuột, nút trước/sau bấm được */
.home-hero .container { pointer-events: none; }
.home-hero__text { pointer-events: auto; }

/* Hero cao hơn: 640px trên máy tính, 560px trên tablet; mobile giữ theo nội dung */
@media only screen and (max-width: 1199px) { .home-hero { min-height: 560px; } }
@media only screen and (max-width: 991px) { .home-hero { min-height: 0; } }

/* ========================================================
   TRANG DANH MỤC / THẺ SẢN PHẨM TRÊN MOBILE
   ======================================================== */

/* Danh sách sản phẩm không còn đệm trái mặc định 40px của <ul> (làm lưới lệch và hẹp) */
.archive-product .main-taxonomy-product .content-col ul.products { padding: 0; list-style: none; }

/* 3 nút hover (yêu thích / cùng danh mục / xem nhanh) chỉ dành cho máy có chuột; ẩn hẳn trên mobile/cảm ứng */
@media only screen and (max-width: 767px), (hover: none) {
  .trending-card__actions { display: none !important; }
}

@media only screen and (max-width: 767px) {
  .trending-card__media { height: 170px; padding: 12px; }
  .trending-card__body { padding: 12px 12px 14px; }
  .trending-card .title,
  .trending-card__title {
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.8em;
  }
  .trending-card__specs li { font-size: 12px; }
  .trending-card__desc { font-size: 12.5px; min-height: 0; -webkit-line-clamp: 2; }
  .trending-card__cta { height: 38px; padding: 0 8px; font-size: 13px; white-space: nowrap; }
}

/* ========================================================
   TRANG SẢN PHẨM: bảng thuộc tính sang cột phải (ngay trên card báo giá) + hộp tiêu đề/giá
   ======================================================== */

/* Hộp đầu trang sản phẩm: [tên + dòng chữ nhỏ] ở đầu, [giá] ở cuối, căn giữa theo trục dọc của hộp */
.product-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 4px 0 18px; }
.product-head__main { min-width: 0; flex: 1 1 auto; }
.product-head__main .product-title { margin: 0 0 6px; }
.product-head__main .stock-status { margin: 0; min-height: 0; }
.product-head__main .product-meta-row { margin: 8px 0 0; }
.product-head__price { flex: none; margin: 0; text-align: right; white-space: nowrap; }
@media only screen and (max-width: 560px) {
  .product-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .product-head__price { text-align: left; }
}


/* ========================================================
   BỐ CỤC TRANG SẢN PHẨM (máy tính, từ 992px): lưới 3 cột
   Cột 1 ảnh | cột 2 thông tin | cột 3 báo giá.
   Hàng 1: hộp tên + giá (cột 2-3). Hàng 2: bảng thuộc tính trải qua cột 2 và 3.
   Hàng 3+: thông tin phụ (cột 2) và card báo giá (cột 3, đỉnh card chạm đáy bảng).
   ======================================================== */
@media only screen and (min-width: 992px) {
  .product-hero-grid {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr) 420px;
    column-gap: 32px;
    row-gap: 0;
    align-items: start;
  }
  .product-main-column,
  .product-summary-box { display: contents; }

  .product-gallery-column { grid-column: 1; grid-row: 1 / span 3; }
  .product-info-top { grid-column: 2 / 4; grid-row: 1; }
  .product-specs--wide { grid-column: 2 / 4; grid-row: 2; }
  .product-info-bottom { grid-column: 2; grid-row: 3; padding-top: 24px; }
  .order-details-column { grid-column: 3; grid-row: 3 / span 2; align-self: stretch; }
  .product-full-content-section { grid-column: 1 / 3; grid-row: 4; margin-top: 24px; }

  .product-info-top { margin-bottom: 0; }
  .product-info-top .product-head { margin-bottom: 16px; }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .product-hero-grid { grid-template-columns: 300px minmax(0, 1fr) 360px; column-gap: 24px; }
}

/* Bảng thuộc tính trải ngang: đáy bảng chạm đỉnh card báo giá ở cột 3 */
.product-specs--wide { margin: 0; }
.product-specs--wide .product-specs__table { border-radius: 16px 16px 0 16px; background: #ffffff; }
.product-specs--wide .product-specs__table th { width: 30%; }
.order-details-column .order-details-card { border-top-left-radius: 0; border-top-right-radius: 0; border-top-color: transparent; }

/* Mobile: một cột theo thứ tự ảnh, tên + giá, bảng thuộc tính, thông tin phụ, card báo giá, mô tả */
@media only screen and (max-width: 991px) {
  .product-hero-grid { display: flex; flex-direction: column; gap: 20px; }
  .product-main-column, .product-summary-box { display: contents; }
  .product-gallery-column { order: 1; }
  .product-info-top { order: 2; }
  .product-specs--wide { order: 3; }
  .product-info-bottom { order: 4; }
  .order-details-column { order: 5; }
  .product-full-content-section { order: 6; margin-top: 0; }
  .product-specs--wide .product-specs__table { border-radius: 16px; }
  .order-details-column .order-details-card { border-radius: 16px; border-top-color: #ECEFF2; }
}

/* ========================================================
   CARD NHẬN BÁO GIÁ (trang sản phẩm): cách bảng thuộc tính 1rem, bo góc đủ, form gọn đẹp
   ======================================================== */

.order-details-column .order-details-card {
  margin-top: 1rem;
  padding: 28px 26px 26px;
  border: 1px solid #E6ECF5;
  border-radius: 20px;
  background: #ffffff;
}
.product-specs--wide .product-specs__table { border-radius: 16px; }
@media only screen and (max-width: 991px) {
  .order-details-column .order-details-card { margin-top: 0; }
}

.quote-panel .card-heading {
  position: relative;
  margin: 0 0 6px;
  padding-left: 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #181A20;
}
.quote-panel .card-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 4px;
  background: var(--theme-primary);
}
.quote-panel__intro { margin: 0 0 20px; padding-left: 14px; font-size: 13px; line-height: 1.6; color: #6B7280; }

/* Số lượng: hộp nền nhạt, nhãn trái - bộ chỉnh phải */
.quote-panel .order-row {
  margin: 0 0 4px;
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  background: #F4F7FB;
}
.quote-panel .row-label { font-size: 14px; font-weight: 600; color: #2D3240; }
.quote-panel .quantity-stepper { border: 1px solid #DDE5F0; border-radius: 999px; background: #ffffff; }
.quote-panel .step-btn { width: 36px; height: 36px; background: transparent; }
.quote-panel .qty-input { width: 44px; height: 36px; }

.quote-panel__field { margin: 16px 0 0; }
.quote-panel__field > span { margin-bottom: 7px; padding-left: 4px; font-size: 13px; font-weight: 500; color: #4B5160; }
.quote-panel__field input,
.quote-panel__field textarea {
  padding: 0 18px;
  height: 48px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #F1F4F9;
  font-size: 14px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.quote-panel__field textarea { height: auto; min-height: 96px; padding: 14px 18px; border-radius: 20px; line-height: 1.55; }
.quote-panel__field input::placeholder,
.quote-panel__field textarea::placeholder { color: #98A1B0; }
.quote-panel__field input:focus,
.quote-panel__field textarea:focus { border-color: var(--theme-primary); background: #ffffff; box-shadow: 0 0 0 3px rgba(84, 133, 198, 0.16); }
.quote-panel .field-error { margin-left: 14px; }

.quote-panel .btn-buy-now {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  margin-top: 20px;
  border: 0;
  border-radius: 999px;
  background: var(--theme-primary);
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(84, 133, 198, 0.35);
  transition: background 0.15s ease, transform 0.15s ease;
}
.quote-panel .btn-buy-now:hover { background: var(--theme-primary-dark); transform: translateY(-1px); }
.quote-panel .btn-buy-now:disabled { opacity: 0.6; transform: none; cursor: wait; }

/* ========================================================
   TRANG DANH MỤC: sidebar dưới ảnh banner + ảnh sản phẩm phủ kín card
   ======================================================== */

/* Ảnh sản phẩm phủ kín khung card (vuông), không còn viền xám xung quanh */
.trending-card__media { height: auto; aspect-ratio: 1 / 1; padding: 0; }
.trending-card__img-link { display: block; width: 100%; height: 100%; }
.trending-card__img-link img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
@media only screen and (max-width: 767px) { .trending-card__media { height: auto; padding: 0; } }

.category-sidebar { margin-top: 20px; padding: 18px 16px; border: 1px solid #E6ECF5; border-radius: 16px; background: #ffffff; }
.category-sidebar__title { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--theme-primary); font-size: 16px; font-weight: 700; line-height: 1.2; color: #181A20; text-transform: none; }
.category-sidebar__list { margin: 0; padding: 0; list-style: none; }
.category-sidebar__list li { margin: 0; }
.category-sidebar__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #4B5160;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.category-sidebar__list a small { flex: none; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #F1F4F9; font-size: 12px; text-align: center; color: #6B7280; }
.category-sidebar__list a:hover { background: var(--theme-primary-light); color: var(--theme-primary-dark); }
.category-sidebar__list a.is-current { background: var(--theme-primary-light); color: var(--theme-primary-dark); font-weight: 600; }
.category-sidebar__list a.is-current small { background: var(--theme-primary); color: #ffffff; }
.category-sidebar--help p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: #6B7280; }
.category-sidebar__call { display: block; padding: 11px 14px; border-radius: 999px; background: var(--theme-primary); color: #ffffff !important; font-weight: 600; text-align: center; text-decoration: none; }
.category-sidebar__call:hover { background: var(--theme-primary-dark); }

/* ========================================================
   HEADER: logo lớn hơn, thanh tìm kiếm nâng cao nằm bên phải
   ======================================================== */
.main-header-bar { height: 96px; position: relative; z-index: 110; }
.header-left { margin-left: 0 !important; gap: 0 !important; }
.header-right { margin-left: auto !important; gap: 14px !important; }
.header-logo .site-logo-img { max-height: 76px; }

.header-search { position: relative; width: 400px; flex: 0 1 400px; }
.header-search .search-form { overflow: visible; background: #F3F4F5; border: 1px solid transparent; transition: border-color 0.15s ease, background 0.15s ease; }
.header-search .search-form:focus-within { background: #ffffff; border-color: var(--theme-primary); }
.header-search .search-icon { display: none; }
.header-search .search-category {
  flex: 0 0 auto;
  width: 118px;
  max-width: 118px;
  height: 100%;
  border: 0 !important;
  border-right: 1px solid #E1E4E8 !important;
  border-radius: 10px 0 0 10px;
  background: transparent;
  padding: 0 24px 0 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  text-overflow: ellipsis;
  outline: none;
  box-shadow: none !important;
}
.header-search .search-input { padding: 0 12px; border-radius: 0; }
.header-search .search-submit { padding: 0 18px; }

.search-suggest {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.16);
  padding: 6px;
}
.search-suggest[hidden] { display: none; }
.search-suggest__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: #111827; }
.search-suggest__item img { width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover; border-radius: 8px; background: #F3F4F6; }
.search-suggest__item span { display: flex; flex-direction: column; min-width: 0; }
.search-suggest__item strong { font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-suggest__item small { margin-top: 2px; font-size: 12px; color: #6B7280; }
.search-suggest__item:hover, .search-suggest__item.is-active, .search-suggest__all:hover, .search-suggest__all.is-active { background: var(--theme-primary-light); }
.search-suggest__all { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid #F0F1F3; border-radius: 8px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--theme-primary-dark); text-decoration: none; }
.search-suggest__none { padding: 14px; text-align: center; font-size: 14px; color: #6B7280; }

.header-search-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #F3F4F5; color: #111827; cursor: pointer; }

@media only screen and (max-width: 1279px) {
  .header-search { width: 330px; flex-basis: 330px; }
  .header-search .search-category { width: 104px; max-width: 104px; }
}
@media only screen and (max-width: 1099px) {
  .header-search { display: none; }
  .header-search-toggle { display: inline-flex; }
  .header-right .header-search.is-open {
    display: block;
    position: absolute;
    z-index: 55;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    padding: 10px 16px 12px;
    background: #ffffff;
    border-bottom: 1px solid #ECEFF2;
    box-shadow: 0 12px 24px rgba(17, 24, 39, 0.1);
  }
  .header-search.is-open .search-suggest { left: 16px; right: 16px; min-width: 0; }
}
@media only screen and (max-width: 767px) {
  .main-header-bar { height: 76px; }
  .header-logo .site-logo-img { max-height: 54px; }
}
@media only screen and (max-width: 600px) {
  .header-right .header-search.is-open { display: block; }
  .header-search .search-category { display: none; }
  .header-search .search-input { padding-left: 14px; }
}

/* ========================================================
   TRANG KẾT QUẢ TÌM KIẾM
   ======================================================== */
.search-page .main-taxonomy-product { padding: 0 0 56px; }
.search-page .section-breadcrumb { margin-bottom: 0 !important; }
.search-page .main-taxonomy-product .content-col .top-archive-product { margin: 28px 0 18px; }
.search-page .grid-products { display: block; }
.search-page .main-taxonomy-product .content-col { flex: 0 0 100%; max-width: 100%; width: 100%; padding-left: 0; }
.search-page__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.search-page__head .archive-title { margin: 0; }
.search-page__count { margin: 0; font-size: 14px; color: #6B7280; }

.search-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 24px; padding: 16px; background: #F6F8FB; border: 1px solid #E5EAF2; border-radius: 12px; }
.search-filters__field { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 12.5px; font-weight: 600; color: #4B5563; }
.search-filters__field--q { flex: 1 1 240px; }
.search-filters input[type="search"], .search-filters select { height: 44px; padding: 0 14px; border: 1px solid #D5DCE6; border-radius: 10px; background: #ffffff; font-family: inherit; font-size: 14px; color: #111827; min-width: 180px; }
.search-filters__field--q input { width: 100%; }
.search-filters input:focus, .search-filters select:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px rgba(84, 133, 198, 0.18); }
.search-filters__submit { height: 44px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--theme-primary); color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.search-filters__submit:hover { background: var(--theme-primary-dark); }
.search-filters__reset { align-self: center; font-size: 13.5px; color: #6B7280; text-decoration: underline; }

.search-page .main-taxonomy-product .content-col ul.products li.product { width: calc((100% - 36px) / 4); }
@media only screen and (max-width: 1023px) { .search-page .main-taxonomy-product .content-col ul.products li.product { width: calc((100% - 24px) / 3); } }
@media only screen and (max-width: 767px) { .search-page .main-taxonomy-product .content-col ul.products li.product { width: calc((100% - 12px) / 2); } .search-filters__field, .search-filters input[type="search"], .search-filters select { width: 100%; } .search-filters__submit { width: 100%; } }

.search-empty { padding: 48px 16px; text-align: center; }
.search-empty h2 { margin: 0 0 8px; font-size: 22px; }
.search-empty p { margin: 0 0 14px; color: #6B7280; }
.search-empty__label { font-weight: 600; color: #374151 !important; }
.search-empty__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.search-empty__chips a { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--theme-primary-light); color: var(--theme-primary-dark); font-size: 14px; font-weight: 500; text-decoration: none; }
.search-empty__chips a:hover { background: var(--theme-primary); color: #ffffff; }

/* Số lượng đặt tối thiểu (MOQ) ở khung báo giá */
.quote-panel__moq { margin: -4px 0 14px; font-size: 13px; line-height: 1.5; color: var(--theme-primary-dark); font-weight: 500; }

/* ========================================================
   HERO: hai banner ngang 3:1 (đã có chữ trong ảnh) chạy full-width; thông điệp + nút gọi nằm ngay dưới banner
   ======================================================== */
.home-hero { display: block; min-height: 0; background: #ffffff; }
.home-hero::before { display: none; }
.home-hero__slider { position: relative; inset: auto; }
.home-hero__slider .swiper-container,
.home-hero__slider .swiper,
.home-hero__slider .swiper-wrapper,
.home-hero__slider .swiper-slide { height: auto; }
.home-hero__slider .swiper-slide img { height: auto; aspect-ratio: 2172 / 724; object-fit: cover; object-position: center; }
.home-hero .container { padding-top: 28px; padding-bottom: 32px; }
.home-hero__text {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title actions" "lead actions" "chips chips";
  gap: 6px 32px;
  align-items: center;
}
.home-hero__title { grid-area: title; margin: 0; font-size: 30px; }
.home-hero__lead { grid-area: lead; margin: 0; }
.home-hero__actions { grid-area: actions; justify-content: flex-end; }
.home-hero__chips { grid-area: chips; margin: 14px 0 0; }
@media only screen and (max-width: 991px) {
  .home-hero .container { padding-top: 22px; padding-bottom: 24px; }
  .home-hero__text { grid-template-columns: 1fr; grid-template-areas: "title" "lead" "actions" "chips"; }
  .home-hero__actions { justify-content: flex-start; margin-top: 12px; }
  .home-hero__title { font-size: 26px; }
}

/* HERO: khối thông điệp là thẻ trắng nổi, đè lên mép dưới banner (nửa trên nằm trên ảnh, nửa dưới trên nền trắng) */
.home-hero { overflow: visible; background: transparent; }
.home-hero__slider { overflow: hidden; }
.home-hero .container { position: relative; z-index: 6; margin-top: -52px; padding-top: 0; padding-bottom: 0; }
.home-hero__text {
  padding: 28px 34px 26px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(24, 52, 96, 0.18);
}
.home-hero__chips { margin-top: 12px; }
/* nút trước/sau nằm trên mép thẻ, không bị thẻ che */
.home-hero__slider .swiper-controls .swiper-button { bottom: 76px; }
.home-policy { padding-top: 56px; }
@media only screen and (max-width: 991px) {
  .home-hero .container { margin-top: -36px; padding-top: 0; padding-bottom: 0; }
  .home-hero__text { padding: 20px 18px; border-radius: 16px; }
  .home-hero__slider .swiper-controls .swiper-button { bottom: 54px; }
  .home-policy { padding-top: 36px; }
}

/* HERO: thẻ nổi không còn đoạn mô tả; tiêu đề + 4 điểm tick bên trái, hai nút bên phải */
.home-hero__text { grid-template-areas: "title actions" "chips actions"; align-items: center; }
.home-hero__chips { margin-top: 10px; }
@media only screen and (max-width: 991px) {
  .home-hero__text { grid-template-areas: "title" "actions" "chips"; }
}

/* Footer: nút gửi yêu cầu báo giá (thay ô đăng ký email không hoạt động) và liên kết mạng xã hội tự thêm */
.footer-signup__cta {
  display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 26px; border-radius: 999px;
  background: #ffffff; color: var(--theme-primary-dark) !important; font-size: 14px; font-weight: 700; text-decoration: none;
}
.footer-signup__cta:hover { filter: brightness(0.95); }
.footer-social__custom { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.6); color: #ffffff !important; font-size: 13px; text-decoration: none; }

/* NÚT NỔI: vị trí trái/phải và độ cao do admin chọn (--float-bottom); mặc định bên trái */
.float-contact { bottom: var(--float-bottom, 160px); }
.float-contact--left { left: 22px; right: auto; align-items: flex-start; }
.float-contact--right { right: 22px; left: auto; align-items: flex-end; }
.float-contact--left .float-contact__label { left: calc(100% + 10px); right: auto; transform: translate(-8px, -50%); }
.float-contact--left .float-contact__btn:hover .float-contact__label,
.float-contact--left .float-contact__btn:focus-visible .float-contact__label { transform: translate(0, -50%); }
@media only screen and (max-width: 767px) {
  .float-contact { bottom: calc(var(--float-bottom, 160px) - 10px); }
  .float-contact--left { left: 14px; right: auto; }
  .float-contact--right { right: 14px; left: auto; }
}