:root {
  --font: "UTM Avo", "Segoe UI", Arial, sans-serif;
  --navy-950: #07173e;
  --navy-900: #0b1f4f;
  --navy-800: #123171;
  --navy-700: #1c438e;
  --yellow-500: #ffd51a;
  --yellow-600: #e4b900;
  --red-600: #c93645;
  --green-600: #12834f;
  --ink-950: #111827;
  --muted-700: #5f6b7d;
  --muted-500: #8791a2;
  --line-200: #dce3ed;
  --surface-50: #fbfcff;
  --surface-100: #f3f6fb;
  --surface-200: #eaf0f8;
  --white: #fff;
  --shadow-sm: 0 8px 26px rgba(8, 28, 73, .08);
  --shadow-md: 0 18px 48px rgba(8, 28, 73, .14);
  --shadow-lg: 0 30px 90px rgba(5, 20, 58, .25);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --container: 1320px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink-950);
  background: var(--white);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.modal-open { overflow: hidden; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 999; padding: 10px 14px; color: #fff; background: var(--navy-950); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.eyebrow { display: inline-block; color: var(--navy-700); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.section { padding: 66px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.section-heading h2 { margin: 5px 0 0; color: var(--navy-950); font-size: clamp(27px, 3vw, 39px); line-height: 1.2; letter-spacing: -.03em; }
.section-heading > p { max-width: 550px; margin: 0; color: var(--muted-700); font-size: 13px; }
.btn {
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: var(--navy-950); background: var(--yellow-500); box-shadow: 0 10px 24px rgba(228,185,0,.22); }
.btn-primary:hover { background: #ffe05b; }
.btn-secondary { color: var(--navy-950); border-color: #cbd5e4; background: #fff; }
.btn-secondary:hover { border-color: var(--navy-700); box-shadow: var(--shadow-sm); }
.btn-ghost { color: var(--navy-900); border-color: #e0e7f0; background: var(--surface-100); }
.btn-zalo { color: #fff; background: #0878e8; }
.btn-danger { color: #a0212e; background: #fff0f2; }
.full { width: 100%; }

/* Header */
.topbar { color: #dbe5ff; background: var(--navy-950); font-size: 11px; }
.topbar-inner { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.topbar-message, .topbar-links { display: flex; align-items: center; gap: 18px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow-500); box-shadow: 0 0 0 5px rgba(255,213,26,.12); }
.site-header { position: sticky; top: 0; z-index: 120; background: rgba(255,255,255,.97); box-shadow: 0 1px 0 rgba(8,28,73,.08); backdrop-filter: blur(14px); }
.header-main { min-height: 86px; display: grid; grid-template-columns: 300px minmax(350px, 1fr) auto; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 62px; height: 62px; object-fit: contain; border-radius: 14px; }
.brand-copy { min-width: 0; display: grid; }
.brand-copy strong { color: var(--navy-950); font-size: 20px; line-height: 1.2; letter-spacing: .025em; }
.brand-copy span { overflow: hidden; color: var(--muted-700); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.search-area { position: relative; }
.search-wrap { display: grid; grid-template-columns: 1fr auto; overflow: hidden; border: 1px solid #cfd8e6; border-radius: 13px; background: #fff; box-shadow: inset 0 1px 2px rgba(12,30,72,.04); }
.search-wrap:focus-within { border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(28,67,142,.11); }
.search-wrap input { min-width: 0; height: 48px; padding: 0 16px; border: 0; outline: 0; color: var(--ink-950); background: transparent; }
.search-wrap button { min-width: 112px; border: 0; color: var(--navy-950); background: var(--yellow-500); font-weight: 800; }
.search-suggestions {
  position: absolute; top: calc(100% + 7px); left: 0; right: 0; z-index: 180;
  display: none; overflow: hidden; border: 1px solid var(--line-200); border-radius: 13px;
  background: #fff; box-shadow: var(--shadow-md);
}
.search-suggestions.open { display: block; }
.search-suggestion { width: 100%; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-bottom: 1px solid #edf1f6; background: #fff; text-align: left; }
.search-suggestion:hover { background: #f7f9fd; }
.search-suggestion img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: var(--surface-100); }
.search-suggestion span { min-width: 0; display: grid; }
.search-suggestion strong { overflow: hidden; color: var(--navy-950); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestion small { color: var(--muted-700); }
.search-suggestion b { color: var(--red-600); font-size: 12px; }
.header-actions { display: flex; align-items: center; gap: 7px; }
.header-action { position: relative; min-width: 68px; height: 56px; display: grid; place-items: center; align-content: center; gap: 2px; border: 0; border-radius: 11px; color: var(--navy-950); background: transparent; }
.header-action:hover { background: var(--surface-100); }
.header-action .action-icon { font-size: 21px; line-height: 1; }
.header-action > span:last-of-type { color: var(--muted-700); font-size: 9px; }
.header-action b { position: absolute; top: 4px; right: 6px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; color: #fff; border: 2px solid #fff; border-radius: 20px; background: var(--red-600); font-size: 9px; }

/* Main navigation / mega menu */
.main-nav { border-top: 1px solid #eef2f7; border-bottom: 1px solid #e4e9f1; background: #fff; }
.nav-inner { position: relative; min-height: 50px; display: flex; align-items: center; }
.mobile-menu-button { display: none; }
.nav-menu { width: 100%; display: flex; align-items: stretch; gap: 2px; }
.nav-item { position: static; display: flex; align-items: stretch; }
.nav-link, .nav-trigger {
  min-height: 49px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px;
  border: 0; color: var(--navy-950); background: transparent; font-weight: 500; font-size: 12px;
}
.nav-link:hover, .nav-trigger:hover, .nav-item:focus-within > .nav-trigger { color: var(--navy-700); background: #f6f8fc; }
.nav-link.active { color: var(--navy-800); box-shadow: inset 0 -3px 0 var(--yellow-500); }
.nav-caret { font-size: 10px; transition: transform .2s ease; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret, .nav-item.open .nav-caret { transform: rotate(180deg); }
.nav-cta { margin-left: auto; align-self: center; min-height: 38px; padding-inline: 16px; color: var(--navy-950); border-radius: 10px; background: var(--yellow-500); font-size: 11px; font-weight: 800; }
.mega-menu, .dropdown-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 1px); z-index: 150;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(7px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav-item:hover > .mega-menu, .nav-item:focus-within > .mega-menu, .nav-item.open > .mega-menu,
.nav-item:hover > .dropdown-menu, .nav-item:focus-within > .dropdown-menu, .nav-item.open > .dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.mega-panel {
  display: grid; grid-template-columns: 1.15fr 1.25fr 1.15fr .9fr; gap: 28px;
  padding: 28px; border: 1px solid var(--line-200); border-top: 0; border-radius: 0 0 20px 20px;
  background: #fff; box-shadow: var(--shadow-lg);
}
.mega-column { min-width: 0; }
.mega-column h3 { margin: 0 0 10px; color: var(--navy-950); font-size: 13px; }
.mega-links { display: grid; gap: 3px; }
.mega-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border-radius: 8px; color: #3e4a5e; font-size: 11px; }
.mega-link:hover { color: var(--navy-800); background: var(--surface-100); }
.mega-link span:not(:only-child):last-child { min-width: 26px; padding: 2px 6px; border-radius: 20px; color: var(--navy-700); background: #eef3ff; font-size: 9px; text-align: center; }
.mega-promo { min-height: 225px; display: flex; flex-direction: column; justify-content: end; padding: 19px; overflow: hidden; border-radius: 16px; color: #fff; background: radial-gradient(circle at 78% 15%, rgba(255,213,26,.5), transparent 28%), linear-gradient(145deg, var(--navy-950), var(--navy-700)); }
.mega-promo span { color: var(--yellow-500); font-size: 10px; font-weight: 800; }
.mega-promo h3 { margin: 7px 0 8px; color: #fff; font-size: 20px; line-height: 1.25; }
.mega-promo p { margin: 0 0 13px; color: #dce4f9; font-size: 10px; }
.mega-promo a { width: fit-content; color: var(--navy-950); background: var(--yellow-500); }
.dropdown-menu { left: auto; right: auto; width: 330px; }
.dropdown-panel { display: grid; gap: 4px; padding: 13px; border: 1px solid var(--line-200); border-top: 0; border-radius: 0 0 14px 14px; background: #fff; box-shadow: var(--shadow-md); }
.dropdown-link { display: grid; gap: 2px; padding: 10px 11px; border-radius: 9px; }
.brand-dropdown-menu { left: 0; right: 0; width: auto; }
.brand-dropdown-grid { width: 100%; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; padding: 17px; }
.brand-dropdown-grid .dropdown-link { min-width: 0; border: 1px solid transparent; }
.brand-dropdown-grid .dropdown-link:hover { border-color: var(--line-200); }

.dropdown-link:hover { background: var(--surface-100); }
.dropdown-link strong { color: var(--navy-950); font-size: 11px; }
.dropdown-link small { color: var(--muted-700); font-size: 9px; }

/* Promo slider */
.promo-slider { position: relative; width: min(1500px, calc(100% - 24px)); height: clamp(360px, 38vw, 520px); margin: 14px auto 0; overflow: hidden; border-radius: 22px; background: var(--navy-950); box-shadow: var(--shadow-md); }
.promo-track, .promo-slide { position: absolute; inset: 0; }
.promo-slide { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; padding: clamp(34px,5vw,76px); opacity: 0; visibility: hidden; transform: scale(1.015); transition: opacity .65s ease, transform .65s ease, visibility .65s ease; }
.promo-slide.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.promo-slide:nth-child(1) { background: radial-gradient(circle at 83% 18%, rgba(0,214,196,.28), transparent 25%), linear-gradient(130deg,#07173e 0%,#123171 60%,#0b1f4f 100%); }
.promo-slide:nth-child(2) { background: radial-gradient(circle at 80% 22%, rgba(255,213,26,.4), transparent 28%), linear-gradient(130deg,#0b1f4f,#102c6a); }
.promo-slide:nth-child(3) { background: radial-gradient(circle at 80% 20%, rgba(255,77,77,.28), transparent 27%), linear-gradient(130deg,#1b1c2c,#4a101e); }
.promo-slide:nth-child(4) { background: radial-gradient(circle at 80% 20%, rgba(131,199,255,.3), transparent 27%), linear-gradient(130deg,#07173e,#143b7c); }
.promo-slide:nth-child(5) { background: radial-gradient(circle at 80% 20%, rgba(255,213,26,.35), transparent 28%), linear-gradient(130deg,#0e1b2d,#243d60); }
.promo-copy { z-index: 2; max-width: 720px; }
.promo-kicker { color: var(--yellow-500); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.promo-copy h2 { max-width: 760px; margin: 12px 0 14px; color: #fff; font-size: clamp(32px,4.3vw,62px); line-height: 1.08; letter-spacing: -.045em; }
.promo-copy p { max-width: 650px; margin: 0 0 23px; color: #d7e1f7; font-size: clamp(12px,1.25vw,16px); }
.promo-media { height: 100%; display: grid; place-items: center; }
.promo-media img { width: min(480px, 90%); max-height: 93%; object-fit: contain; border-radius: 22px; filter: drop-shadow(0 25px 35px rgba(0,0,0,.25)); }
.promo-control { position: absolute; top: 50%; z-index: 6; width: 44px; height: 44px; display: grid; place-items: center; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; background: rgba(5,18,52,.38); font-size: 27px; backdrop-filter: blur(8px); }
.promo-control:hover { background: rgba(255,213,26,.9); color: var(--navy-950); }
.promo-control.prev { left: 16px; }
.promo-control.next { right: 16px; }
.promo-dots { position: absolute; left: 50%; bottom: 16px; z-index: 7; display: flex; gap: 7px; transform: translateX(-50%); }
.promo-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 20px; background: rgba(255,255,255,.4); transition: width .2s ease, background .2s ease; }
.promo-dots button.active { width: 28px; background: var(--yellow-500); }

/* Trust and category sections */
.benefits { border-bottom: 1px solid var(--line-200); background: #fff; }
.benefit-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.benefit-card { min-height: 102px; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; padding: 20px; border-right: 1px solid var(--line-200); }
.benefit-card:last-child { border-right: 0; }
.benefit-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--navy-950); background: var(--yellow-500); font-weight: 900; }
.benefit-card strong { display: block; color: var(--navy-950); font-size: 12px; }
.benefit-card p { margin: 2px 0 0; color: var(--muted-700); font-size: 10px; }
.category-section { padding-bottom: 42px; }
.category-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 13px; }
.category-card { min-height: 125px; display: grid; align-content: space-between; gap: 8px; padding: 17px; border: 1px solid var(--line-200); border-radius: 15px; background: #fff; text-align: left; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.category-card:hover, .category-card.active { transform: translateY(-3px); border-color: #aebfe2; box-shadow: var(--shadow-sm); }
.category-card .category-symbol { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 12px; color: var(--navy-950); background: #fff4bf; font-size: 11px; font-weight: 900; }
.category-card strong { color: var(--navy-950); font-size: 12px; line-height: 1.35; }
.category-card small { color: var(--muted-700); font-size: 9px; }

/* Featured compact products */
.featured-section { padding-top: 34px; background: var(--surface-50); border-block: 1px solid #edf1f6; }
.featured-row { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; }
.featured-card { overflow: hidden; border: 1px solid var(--line-200); border-radius: 15px; background: #fff; box-shadow: 0 5px 16px rgba(8,28,73,.045); }
.featured-card-image { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; background: #f7f9fd; }
.featured-card-image img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.featured-card:hover .featured-card-image img { transform: scale(1.025); }
.featured-card-copy { padding: 12px; }
.featured-card-copy small { color: var(--navy-700); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.featured-card-copy h3 { min-height: 34px; margin: 4px 0 6px; color: var(--navy-950); font-size: 11px; line-height: 1.45; }
.featured-card-copy strong { color: var(--red-600); font-size: 13px; }

/* Catalog */
.product-section { padding-top: 60px; }
.product-heading { align-items: center; }
.product-tools { display: flex; align-items: center; gap: 8px; }
.product-tools select, .filter-toggle { min-height: 42px; padding: 0 12px; border: 1px solid #d5deea; border-radius: 10px; color: var(--navy-950); background: #fff; font-weight: 700; font-size: 10px; }
.filter-toggle { display: none; }
.view-switch { display: flex; overflow: hidden; border: 1px solid #d5deea; border-radius: 10px; }
.view-switch button { width: 40px; height: 40px; border: 0; background: #fff; }
.view-switch button.active { color: #fff; background: var(--navy-900); }
.catalog-layout { display: grid; grid-template-columns: 255px minmax(0,1fr); gap: 23px; align-items: start; }
.filter-sidebar { position: sticky; top: 150px; padding: 18px; border: 1px solid var(--line-200); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.filter-sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.filter-sidebar-header h3 { margin: 0; color: var(--navy-950); font-size: 15px; }
.filter-sidebar-header button { display: none; width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--surface-100); font-size: 20px; }
.filter-group { display: grid; gap: 6px; margin-bottom: 13px; }
.filter-group label, .filter-label { color: var(--navy-950); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.filter-group select, .price-inputs input {
  width: 100%; min-height: 40px; padding: 0 34px 0 11px; border: 1px solid #d9e0ea; border-radius: 9px;
  color: var(--ink-950); background-color: #fff; font-size: 10px; outline: none;
}
.filter-group select {
  appearance: none;
  background-image: linear-gradient(45deg,transparent 50%,#53627a 50%),linear-gradient(135deg,#53627a 50%,transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size: 5px 5px,5px 5px; background-repeat: no-repeat;
}
.filter-group select:focus, .price-inputs input:focus { border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(28,67,142,.1); }
.filter-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.price-inputs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.price-inputs input { padding: 0 8px; }
.filter-checks { display: grid; gap: 8px; margin: 10px 0 16px; }
.filter-checks label { display: flex; align-items: center; gap: 8px; color: #46536a; font-size: 10px; }
.filter-checks input { accent-color: var(--navy-800); }
.catalog-content { min-width: 0; }
.catalog-meta { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 4px 12px; }
.catalog-meta > div:first-child { display: grid; }
.catalog-meta strong { color: var(--navy-950); font-size: 13px; }
.catalog-meta span { color: var(--muted-700); font-size: 9px; }
.active-filters { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }
.filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 0; border-radius: 20px; color: var(--navy-800); background: #eef3ff; font-size: 9px; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; }
.product-grid.list-view { grid-template-columns: 1fr; }
.product-card { position: relative; overflow: hidden; border: 1px solid var(--line-200); border-radius: 15px; background: #fff; box-shadow: 0 5px 16px rgba(8,28,73,.045); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.product-card:hover { transform: translateY(-3px); border-color: #b8c5db; box-shadow: var(--shadow-sm); }
.product-card-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #f7f9fd; }
.product-card-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .28s ease; }
.product-card:hover .product-card-media img { transform: scale(1.025); }
.product-badges { position: absolute; left: 8px; top: 8px; display: grid; gap: 4px; }
.badge { width: fit-content; padding: 4px 7px; border-radius: 20px; color: #fff; background: var(--navy-900); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.badge.yellow { color: var(--navy-950); background: var(--yellow-500); }
.badge.gray { color: #4d596b; background: #eef1f5; }
.product-favorite { position: absolute; right: 8px; top: 8px; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(7,23,62,.08); border-radius: 50%; color: var(--navy-950); background: rgba(255,255,255,.9); font-size: 17px; }
.product-favorite.active { color: #fff; background: var(--red-600); }
.product-card-body { padding: 12px; }
.product-kicker { color: var(--navy-700); font-size: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.product-card h3 { min-height: 36px; margin: 4px 0 5px; color: var(--navy-950); font-size: 11px; line-height: 1.45; }
.product-meta { min-height: 17px; overflow: hidden; color: var(--muted-700); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.product-price-row { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.product-price { display: grid; }
.product-price strong { color: var(--red-600); font-size: 14px; }
.product-price small { color: var(--muted-500); font-size: 7px; }
.product-card-actions { display: grid; grid-template-columns: 1fr 42px; gap: 6px; margin-top: 8px; }
.product-card-actions .btn { min-height: 38px; padding: 0 10px; font-size: 9px; }
.quick-view { width: 42px; border: 1px solid #d7dfeb; border-radius: 10px; color: var(--navy-900); background: #fff; font-size: 17px; }
.product-compare { width: 100%; margin-top: 6px; padding: 5px; border: 0; color: var(--muted-700); background: transparent; font-size: 8px; text-align: center; }
.product-compare.active { color: var(--navy-800); font-weight: 800; }
.product-grid.list-view .product-card { display: grid; grid-template-columns: 190px 1fr; }
.product-grid.list-view .product-card-media { aspect-ratio: auto; min-height: 190px; }
.product-grid.list-view .product-card-body { display: grid; align-content: center; }
.product-grid.list-view .product-card h3 { min-height: 0; font-size: 15px; }
.product-grid.list-view .product-meta { white-space: normal; }
.empty-products { grid-column: 1 / -1; min-height: 260px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed #cdd6e3; border-radius: 16px; color: var(--muted-700); text-align: center; }
.pagination-row { display: flex; justify-content: center; margin-top: 24px; }

/* Builder / conversion sections */
.builder-section { color: #fff; background: var(--navy-950); }
.builder-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; }
.builder-copy h2 { margin: 8px 0 12px; color: #fff; font-size: clamp(31px,4vw,49px); line-height: 1.13; }
.builder-copy p { max-width: 550px; color: #c8d3ed; }
.builder-copy .eyebrow { color: var(--yellow-500); }
.builder-points { display: grid; gap: 8px; margin-top: 22px; }
.builder-points span { display: flex; align-items: center; gap: 9px; color: #dbe4f7; font-size: 11px; }
.builder-points b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--navy-950); background: var(--yellow-500); }
.builder-card { padding: 26px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; color: var(--ink-950); background: #fff; box-shadow: var(--shadow-lg); }
.builder-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 19px; }
.builder-card-head div { display: grid; }
.builder-card-head span { color: var(--navy-700); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.builder-card-head strong { color: var(--navy-950); font-size: 25px; line-height: 1.2; }
.builder-card-head small { color: var(--muted-700); }
.builder-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.builder-fields label { display: grid; gap: 6px; color: var(--navy-950); font-size: 10px; font-weight: 700; }
.builder-fields label.wide { grid-column: 1 / -1; }
.builder-fields select, .builder-fields input { min-height: 43px; padding: 0 11px; border: 1px solid #d7deea; border-radius: 9px; background: #fff; }
.builder-estimate { display: flex; align-items: center; justify-content: space-between; margin: 17px 0; padding: 15px; border-radius: 12px; background: #fff6cf; }
.builder-estimate span { color: var(--navy-900); font-weight: 700; }
.builder-estimate strong { color: var(--red-600); font-size: 24px; }
.builder-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.builder-note { margin: 11px 0 0; color: var(--muted-700); font-size: 9px; text-align: center; }

/* Sales-focused extras */
.sales-focus { background: var(--surface-50); }
.sales-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 16px; }
.sales-card { min-height: 220px; padding: 24px; border: 1px solid var(--line-200); border-radius: 18px; background: #fff; }
.sales-card.primary { color: #fff; background: radial-gradient(circle at 85% 15%, rgba(255,213,26,.45), transparent 25%), linear-gradient(135deg,var(--navy-950),var(--navy-700)); }
.sales-card span { color: var(--yellow-600); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.sales-card.primary span { color: var(--yellow-500); }
.sales-card h3 { margin: 8px 0 9px; color: var(--navy-950); font-size: 21px; line-height: 1.25; }
.sales-card.primary h3 { color: #fff; font-size: 28px; }
.sales-card p { margin: 0 0 16px; color: var(--muted-700); font-size: 11px; }
.sales-card.primary p { color: #d7e0f5; }
.brand-strip { display: flex; flex-wrap: wrap; gap: 9px; }
.brand-chip { padding: 10px 14px; border: 1px solid var(--line-200); border-radius: 11px; color: var(--navy-950); background: #fff; font-weight: 800; font-size: 10px; }
.brand-chip:hover { border-color: var(--navy-700); }
.pricing-card { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 34px; border: 1px solid var(--line-200); border-radius: 20px; background: linear-gradient(110deg,#edf3ff 0%,#fff 52%,#fff5c1 100%); box-shadow: var(--shadow-sm); }
.pricing-card h2 { margin: 7px 0 8px; color: var(--navy-950); font-size: clamp(27px,3vw,39px); }
.pricing-card p { margin: 0; color: var(--muted-700); }
.pricing-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.blog-section { padding-top: 45px; }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.blog-card { overflow: hidden; border: 1px solid var(--line-200); border-radius: 16px; background: #fff; }
.blog-thumb { height: 130px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 78% 20%,rgba(255,213,26,.55),transparent 26%),linear-gradient(135deg,var(--navy-950),var(--navy-700)); font-size: 30px; font-weight: 900; }
.blog-copy { padding: 17px; }
.blog-copy span { color: var(--navy-700); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.blog-copy h3 { margin: 6px 0 8px; color: var(--navy-950); font-size: 15px; line-height: 1.4; }
.blog-copy p { margin: 0 0 10px; color: var(--muted-700); font-size: 10px; }
.blog-copy a { color: var(--navy-800); font-size: 10px; font-weight: 800; }

/* Footer / floating contacts */
.footer { padding-top: 52px; color: #dce5f8; background: var(--navy-950); }
.footer-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 38px; }
.footer-brand img { width: 72px; height: 72px; object-fit: contain; border-radius: 15px; }
.footer h3, .footer h4 { color: #fff; }
.footer-brand h3 { margin: 14px 0 6px; font-size: 19px; }
.footer-brand p { max-width: 330px; margin: 0; color: #aebbd7; font-size: 10px; }
.footer h4 { margin: 0 0 13px; font-size: 12px; }
.footer-column { display: grid; align-content: start; gap: 8px; }
.footer a, .footer span { color: #b8c4dd; font-size: 10px; }
.footer a:hover { color: var(--yellow-500); }
.footer-bottom { display: flex; justify-content: space-between; gap: 18px; margin-top: 38px; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.11); }
.floating-contact { position: fixed; right: 18px; bottom: 18px; z-index: 170; display: grid; gap: 9px; }
.float-btn { position: relative; width: 47px; height: 47px; display: grid; place-items: center; border-radius: 50%; color: #fff; box-shadow: 0 9px 25px rgba(0,0,0,.2); font-weight: 900; animation: floatBounce 3.2s ease-in-out infinite; }
.float-btn::before { content: ""; position: absolute; inset: -5px; border: 2px solid currentColor; border-radius: 50%; opacity: 0; animation: contactPulse 2.5s ease-out infinite; }
.float-btn:nth-child(2) { animation-delay: .2s; }
.float-btn:nth-child(3) { animation-delay: .4s; }
.float-btn:nth-child(4) { animation-delay: .6s; }
.float-btn.phone { background: #12834f; }
.float-btn.zalo { background: #0878e8; font-size: 10px; }
.float-btn.facebook { background: #1769d1; font-size: 20px; }
.float-btn.youtube { background: #d8202d; font-size: 16px; }
@keyframes floatBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes contactPulse { 0%{transform:scale(.8);opacity:.45} 75%,100%{transform:scale(1.35);opacity:0} }

/* Modals */
.modal-backdrop { position: fixed; inset: 0; z-index: 210; opacity: 0; visibility: hidden; background: rgba(4,12,38,.6); backdrop-filter: blur(5px); transition: .2s ease; }
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal { position: fixed; inset: 0; z-index: 230; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: .2s ease; }
.modal.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-panel { position: relative; width: min(940px,100%); max-height: calc(100dvh - 40px); overflow: auto; border: 1px solid rgba(255,255,255,.75); border-radius: 22px; background: #fff; box-shadow: var(--shadow-lg); transform: translateY(12px) scale(.99); transition: transform .2s ease; }
.modal.open .modal-panel { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 13px; right: 13px; z-index: 5; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; color: var(--navy-950); background: var(--surface-100); font-size: 23px; }
.product-modal-panel { padding: 28px; }
.product-modal-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; }
.product-modal-media { aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line-200); border-radius: 17px; background: #f7f9fd; }
.product-modal-media img { width: 100%; height: 100%; padding: 10px; object-fit: contain; image-rendering: auto; }
.product-modal-info { min-width: 0; padding-top: 8px; }
.product-modal-info h2 { margin: 7px 45px 8px 0; color: var(--navy-950); font-size: clamp(26px,3vw,37px); line-height: 1.18; }
.product-modal-info > p { color: var(--muted-700); font-size: 11px; }
.product-modal-price { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin: 15px 0; padding: 14px; border-radius: 12px; background: #fff1f3; }
.product-modal-price strong { color: var(--red-600); font-size: 26px; }
.product-modal-price span { color: var(--muted-700); font-size: 9px; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 8px 0; border-bottom: 1px solid var(--line-200); font-size: 10px; text-align: left; vertical-align: top; }
.spec-table th { width: 40%; color: var(--muted-700); font-weight: 500; }
.spec-table td { color: var(--ink-950); font-weight: 700; }
.product-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.compare-panel { width: min(1120px,100%); padding: 27px; }
.compare-content { overflow-x: auto; }
.compare-table { width: 100%; min-width: 750px; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 11px; border: 1px solid var(--line-200); text-align: center; font-size: 10px; }
.compare-table th:first-child, .compare-table td:first-child { position: sticky; left: 0; z-index: 2; width: 150px; color: var(--navy-950); background: #f7f9fd; text-align: left; }
.compare-table img { width: 120px; height: 120px; margin: 0 auto; object-fit: contain; }
.account-panel { width: min(520px,100%); padding: 28px; }
.account-panel h2 { margin: 6px 0 10px; color: var(--navy-950); font-size: 28px; }
.account-panel p { color: var(--muted-700); font-size: 11px; }
.account-actions { display: grid; gap: 8px; margin-top: 16px; }
.account-note { margin-top: 13px; padding: 11px; border-radius: 10px; color: #5e4a00; background: #fff6cf; font-size: 9px; }

/* Horizontal cart modal */
.cart-panel { width: min(1100px,100%); padding: 0; overflow: hidden; }
.cart-head { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 24px; border-bottom: 1px solid var(--line-200); }
.cart-head div { display: grid; }
.cart-head span { color: var(--muted-700); font-size: 9px; text-transform: uppercase; }
.cart-head h2 { margin: 0; color: var(--navy-950); font-size: 25px; }
.cart-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.85fr); min-height: 460px; }
.cart-items { max-height: 590px; overflow: auto; padding: 16px 23px 23px; }
.cart-empty { min-height: 340px; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted-700); text-align: center; }
.cart-empty strong { color: var(--navy-950); font-size: 18px; }
.cart-item { display: grid; grid-template-columns: 78px minmax(0,1fr) 95px 105px 34px; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line-200); }
.cart-item img { width: 78px; height: 78px; padding: 3px; object-fit: contain; border-radius: 11px; background: var(--surface-100); }
.cart-item-info { min-width: 0; display: grid; gap: 3px; }
.cart-item-info strong { overflow: hidden; color: var(--navy-950); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cart-item-info small { color: var(--muted-700); font-size: 8px; }
.cart-qty { width: fit-content; display: inline-flex; align-items: center; overflow: hidden; border: 1px solid #d5deea; border-radius: 8px; }
.cart-qty button { width: 28px; height: 28px; border: 0; background: #fff; }
.cart-qty span { min-width: 28px; text-align: center; font-size: 9px; }
.cart-line-total { color: var(--red-600); font-size: 11px; text-align: right; }
.remove-cart { width: 31px; height: 31px; border: 0; border-radius: 8px; color: #a72a36; background: #fff0f2; font-size: 17px; }
.cart-summary-side { padding: 22px; border-left: 1px solid var(--line-200); background: #fbfcff; }
.quick-order-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cart-summary-side label { display: grid; gap: 5px; margin-bottom: 10px; color: var(--navy-950); font-size: 9px; font-weight: 700; }
.cart-summary-side input, .cart-summary-side textarea { width: 100%; padding: 10px 11px; border: 1px solid #d5deea; border-radius: 9px; outline: none; background: #fff; }
.cart-summary-side input:focus, .cart-summary-side textarea:focus { border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(28,67,142,.1); }
.cart-total { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 5px; padding-top: 14px; border-top: 1px solid var(--line-200); }
.cart-total span { color: var(--muted-700); }
.cart-total strong { color: var(--red-600); font-size: 23px; }
.cart-price-note { margin: 0 0 14px; color: var(--muted-700); font-size: 8px; }
.cart-actions { display: grid; gap: 8px; }
.zalo-order-status { min-height: 34px; margin-top: 8px; color: var(--muted-700); font-size: 9px; }

/* Compare tray / toast */
.compare-tray { position: fixed; left: 50%; bottom: 17px; z-index: 180; width: min(620px,calc(100% - 38px)); display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 14px; transform: translate(-50%,150%); color: #fff; border-radius: 15px; background: var(--navy-950); box-shadow: var(--shadow-lg); transition: transform .24s ease; }
.compare-tray.open { transform: translate(-50%,0); }
.compare-tray span { color: #b9c5df; font-size: 8px; }
.compare-tray strong { display: block; font-size: 12px; }
.compare-tray-actions { display: flex; gap: 7px; }
.compare-tray-actions button:first-child { border: 0; color: #fff; background: transparent; font-size: 9px; }
.compare-tray .btn { min-height: 37px; font-size: 9px; }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 300; max-width: calc(100% - 40px); padding: 11px 15px; transform: translate(-50%,28px); opacity: 0; color: #fff; border-radius: 10px; background: var(--navy-950); box-shadow: var(--shadow-md); font-size: 10px; transition: .2s ease; pointer-events: none; }
.toast.show { transform: translate(-50%,0); opacity: 1; }

/* Standalone detail page */
.simple-header { border-bottom: 1px solid var(--line-200); background: #fff; }
.simple-header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.simple-nav { display: flex; align-items: center; gap: 16px; }
.simple-nav a { color: var(--navy-950); font-size: 11px; font-weight: 700; }
.detail-main { padding: 42px 0 70px; background: var(--surface-50); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; color: var(--muted-700); font-size: 9px; }
.detail-grid { display: grid; grid-template-columns: minmax(350px,.9fr) minmax(0,1.1fr); gap: 42px; align-items: start; }
.detail-media { aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line-200); border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm); }
.detail-media img { width: 100%; height: 100%; padding: 14px; object-fit: contain; }
.detail-copy { padding: 8px 0; }
.detail-copy h1 { margin: 7px 0 9px; color: var(--navy-950); font-size: clamp(31px,4vw,48px); line-height: 1.12; letter-spacing: -.035em; }
.detail-copy .lead { color: var(--muted-700); }
.detail-price { display: flex; align-items: end; gap: 13px; margin: 18px 0; }
.detail-price strong { color: var(--red-600); font-size: 32px; }
.detail-price span { color: var(--muted-700); font-size: 10px; }
.stock-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 20px; color: #0f6b42; background: #e8f7ef; font-size: 9px; font-weight: 700; }
.detail-actions { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px; margin: 18px 0; }
.qty-input { display: grid; grid-template-columns: 34px 1fr 34px; overflow: hidden; border: 1px solid #d5deea; border-radius: 10px; background: #fff; }
.qty-input button { border: 0; background: #fff; }
.qty-input input { width: 100%; border: 0; outline: 0; text-align: center; }
.detail-info { margin-top: 20px; padding: 18px; border: 1px solid var(--line-200); border-radius: 15px; background: #fff; }
.related-section { padding-top: 42px; }
.combo-box { margin-top: 24px; padding: 20px; border: 1px solid var(--line-200); border-radius: 17px; background: #fff; }
.combo-box h3 { margin: 0 0 13px; color: var(--navy-950); }
.combo-items { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.combo-item { display: grid; grid-template-columns: 58px 1fr; gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--line-200); border-radius: 11px; }
.combo-item img { width: 58px; height: 58px; object-fit: contain; }
.combo-item strong { color: var(--navy-950); font-size: 9px; }
.combo-item small { color: var(--red-600); font-size: 9px; }

/* Responsive */
@media (max-width: 1180px) {
  .header-main { grid-template-columns: 250px minmax(300px,1fr) auto; gap: 18px; }
  .header-action { min-width: 54px; }
  .header-action > span:last-of-type { display: none; }
  .category-grid { grid-template-columns: repeat(3,1fr); }
  .featured-row { grid-template-columns: repeat(4,1fr); }
  .product-grid { grid-template-columns: repeat(3,1fr); }
  .mega-panel { grid-template-columns: 1fr 1fr 1fr; }
  .mega-promo { display: none; }
}
@media (max-width: 920px) {
  .container { width: min(100% - 28px, var(--container)); }
  .topbar-message { display: none; }
  .header-main { grid-template-columns: 1fr auto; min-height: 74px; }
  .brand img { width: 52px; height: 52px; }
  .brand-copy strong { font-size: 17px; }
  .search-area { grid-column: 1 / -1; order: 3; margin-bottom: 12px; }
  .header-actions { justify-content: end; }
  .main-nav { position: relative; }
  .nav-inner { min-height: 49px; }
  .mobile-menu-button { display: inline-flex; align-items: center; gap: 7px; min-height: 39px; padding: 0 13px; border: 1px solid #d7deea; border-radius: 9px; color: var(--navy-950); background: #fff; font-weight: 800; }
  .nav-menu { position: absolute; left: 14px; right: 14px; top: calc(100% + 1px); z-index: 160; display: none; max-height: calc(100dvh - 150px); overflow: auto; padding: 10px; border: 1px solid var(--line-200); border-radius: 0 0 15px 15px; background: #fff; box-shadow: var(--shadow-md); }
  .nav-menu.open { display: grid; }
  .nav-item { display: grid; }
  .nav-link, .nav-trigger { width: 100%; min-height: 43px; justify-content: space-between; padding: 0 11px; border-radius: 9px; text-align: left; }
  .nav-cta { margin: 7px 0 0; min-height: 43px; }
  .mega-menu, .dropdown-menu { position: static; width: auto; display: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .nav-item.open > .mega-menu, .nav-item.open > .dropdown-menu { display: block; }
  .mega-panel { grid-template-columns: 1fr; gap: 14px; padding: 13px; border: 0; border-radius: 10px; background: var(--surface-100); box-shadow: none; }
  .mega-column h3 { margin-top: 4px; }
  .dropdown-panel { padding: 8px; border: 0; border-radius: 9px; background: var(--surface-100); box-shadow: none; }
  .brand-dropdown-menu { width: auto; }
  .brand-dropdown-grid { width: auto; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .promo-slider { height: 520px; }
  .promo-slide { grid-template-columns: 1fr; align-content: center; padding: 38px 38px 52px; }
  .promo-copy { max-width: none; }
  .promo-copy h2 { font-size: 37px; }
  .promo-media { position: absolute; right: -10px; bottom: 8px; width: 42%; height: 48%; opacity: .55; }
  .benefit-grid { grid-template-columns: repeat(2,1fr); }
  .benefit-card:nth-child(2) { border-right: 0; }
  .benefit-card { border-bottom: 1px solid var(--line-200); }
  .catalog-layout { grid-template-columns: 1fr; }
  .filter-toggle { display: inline-flex; align-items: center; }
  .filter-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 250; width: min(340px,90vw); max-height: 100dvh; overflow: auto; transform: translateX(-105%); border-radius: 0; transition: transform .23s ease; }
  .filter-sidebar.open { transform: translateX(0); }
  .filter-sidebar-header button { display: grid; place-items: center; }
  .product-grid { grid-template-columns: repeat(3,1fr); }
  .builder-grid, .detail-grid { grid-template-columns: 1fr; }
  .sales-grid { grid-template-columns: 1fr 1fr; }
  .sales-card.primary { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1.3fr 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary-side { border-left: 0; border-top: 1px solid var(--line-200); }
  .cart-item { grid-template-columns: 70px minmax(0,1fr) 90px 34px; }
  .cart-line-total { grid-column: 3; }
  .product-modal-grid { grid-template-columns: 1fr; }
  .product-modal-media { max-width: 540px; width: 100%; margin-inline: auto; }
}
@media (max-width: 680px) {
  body { font-size: 13px; }
  .container { width: min(100% - 20px, var(--container)); }
  .section { padding: 48px 0; }
  .section-heading { align-items: start; flex-direction: column; gap: 8px; }
  .topbar-inner { justify-content: center; }
  .topbar-links span { display: none; }
  .header-main { gap: 8px; }
  .brand-copy span { display: none; }
  .header-actions { gap: 0; }
  .header-action { min-width: 45px; height: 48px; }
  .search-wrap button { min-width: 88px; font-size: 10px; }
  .promo-slider { width: calc(100% - 12px); height: 500px; margin-top: 6px; border-radius: 16px; }
  .promo-slide { padding: 30px 28px 56px; }
  .promo-copy h2 { font-size: 31px; }
  .promo-copy p { max-width: 93%; }
  .promo-media { width: 50%; height: 43%; opacity: .48; }
  .promo-control { width: 38px; height: 38px; }
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .benefit-card { min-height: 92px; padding: 14px 11px; }
  .benefit-card p { display: none; }
  .category-grid { grid-template-columns: repeat(2,1fr); }
  .featured-row { grid-template-columns: repeat(2,1fr); }
  .product-heading { align-items: stretch; }
  .product-tools { width: 100%; flex-wrap: wrap; }
  .product-tools select { flex: 1; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .product-card-body { padding: 10px; }
  .product-card h3 { min-height: 48px; font-size: 10px; }
  .product-card-actions { grid-template-columns: 1fr 38px; }
  .quick-view { width: 38px; }
  .product-grid.list-view .product-card { grid-template-columns: 120px 1fr; }
  .product-grid.list-view .product-card-media { min-height: 150px; }
  .builder-card { padding: 18px; }
  .builder-card-head strong { font-size: 21px; }
  .builder-fields { grid-template-columns: 1fr; }
  .builder-fields label.wide { grid-column: auto; }
  .builder-actions { grid-template-columns: 1fr; }
  .sales-grid { grid-template-columns: 1fr; }
  .sales-card.primary { grid-column: auto; }
  .pricing-card { align-items: stretch; flex-direction: column; padding: 24px; }
  .pricing-actions { flex-direction: column; }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .floating-contact { right: 10px; bottom: 10px; }
  .float-btn { width: 43px; height: 43px; }
  .modal { padding: 8px; }
  .modal-panel { max-height: calc(100dvh - 16px); border-radius: 17px; }
  .product-modal-panel, .compare-panel, .account-panel { padding: 18px; }
  .product-modal-actions { grid-template-columns: 1fr; }
  .cart-head { padding: 14px 18px; }
  .cart-items { padding: 12px 16px; }
  .cart-item { grid-template-columns: 58px minmax(0,1fr) 34px; gap: 8px; }
  .cart-item img { width: 58px; height: 58px; }
  .cart-qty { grid-column: 2; }
  .cart-line-total { grid-column: 2; text-align: left; }
  .remove-cart { grid-column: 3; grid-row: 1; }
  .quick-order-fields { grid-template-columns: 1fr; }
  .detail-actions { grid-template-columns: 1fr; }
  .combo-items { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .category-grid, .featured-row, .product-grid { grid-template-columns: 1fr 1fr; }
  .brand-copy strong { font-size: 15px; }
  .product-card h3 { font-size: 9px; }
}

/* =========================================================
   V6 — Tăng khả năng đọc, cân chỉnh khoảng cách và slide 400px
   ========================================================= */
body { font-size: 16px; line-height: 1.62; }
.eyebrow { font-size: 12px; }
.section { padding: 64px 0; }
.section-heading { margin-bottom: 28px; }
.section-heading h2 { font-size: clamp(30px, 3vw, 42px); }
.section-heading > p { max-width: 620px; font-size: 15px; line-height: 1.65; }
.btn { min-height: 46px; padding-inline: 19px; font-size: 13px; }
.topbar { font-size: 13px; }
.topbar-inner { min-height: 38px; }
.brand-copy strong { font-size: 22px; }
.brand-copy span { font-size: 12px; }
.search-wrap input, .search-wrap button { font-size: 14px; }
.search-suggestion strong, .search-suggestion b { font-size: 13px; }
.search-suggestion small { font-size: 11px; }
.header-action > span:last-of-type, .header-action b { font-size: 11px; }
.nav-link, .nav-trigger { padding-inline: 16px; font-size: 17px; }
.mega-column h3 { font-size: 15px; }
.mega-link { padding: 9px 10px; font-size: 13px; }
.mega-link span:not(:only-child):last-child { font-size: 10px; }
.mega-promo span { font-size: 11px; }
.mega-promo h3 { font-size: 22px; }
.mega-promo p { font-size: 12px; line-height: 1.6; }
.dropdown-link strong { font-size: 13px; }
.dropdown-link small { font-size: 11px; line-height: 1.5; }

.promo-slider { height: clamp(440px, 38vw, 560px); }
.promo-slide { grid-template-columns: minmax(0, 1.2fr) 440px; gap: 34px; }
.promo-kicker { font-size: 12px; }
.promo-copy h2 { font-size: clamp(36px, 4.15vw, 60px); }
.promo-copy p { max-width: 700px; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.65; }
.promo-media { width: 400px; height: 400px; justify-self: center; align-self: center; }
.promo-media img { width: 400px; height: 400px; max-width: 100%; max-height: 100%; padding: 4px; object-fit: contain; }

.benefit-card strong { font-size: 14px; }
.benefit-card p { font-size: 12px; line-height: 1.55; }
.category-card { padding: 17px; }
.category-card .category-symbol { font-size: 12px; }
.category-card strong { font-size: 14px; }
.category-card small { font-size: 11px; line-height: 1.45; }
.featured-card-copy { padding: 13px; }
.featured-card-copy small { font-size: 10px; }
.featured-card-copy h3 { min-height: 40px; font-size: 13px; line-height: 1.48; }
.featured-card-copy strong { font-size: 16px; }
.product-tools select, .filter-toggle { font-size: 12px; }
.filter-sidebar { padding: 19px; }
.filter-sidebar-header h3 { font-size: 18px; }
.filter-group label, .filter-label { font-size: 11px; }
.filter-group select, .filter-group input, .price-inputs input { min-height: 43px; font-size: 13px; }
.filter-checks label { font-size: 12px; }
.catalog-meta strong { font-size: 15px; }
.catalog-meta span { font-size: 11px; }
.filter-chip { font-size: 11px; }
.product-card-body { padding: 14px; }
.product-kicker { font-size: 10px; }
.product-card h3 { min-height: 43px; margin: 5px 0 4px; font-size: 13px; line-height: 1.42; }
.product-meta { min-height: 20px; font-size: 10px; line-height: 1.35; }
.product-price strong { font-size: 17px; }
.product-price small { font-size: 9px; }
.product-card-actions .btn { font-size: 11px; }
.product-compare { font-size: 10px; }
.badge { font-size: 9px; }
.builder-card-head p, .builder-fields label, .builder-note, .sales-card p, .pricing-card p, .blog-card p { font-size: 13px; line-height: 1.65; }
.builder-fields select, .builder-fields input, .quick-order-fields input, .cart-summary-side textarea { font-size: 13px; }
.builder-card-head strong { font-size: 28px; }
.builder-estimate span { font-size: 13px; }
.builder-estimate strong { font-size: 28px; }
.sales-card span, .blog-copy span { font-size: 10px; }
.sales-card h3, .blog-card h3 { font-size: 20px; }
.brand-chip { font-size: 12px; }
.footer, .footer-column a, .footer-column span, .footer-brand p { font-size: 13px; }
.footer-column h4, .footer-brand h3 { font-size: 16px; }
.simple-nav a { font-size: 13px; }
.breadcrumbs { font-size: 11px; }
.detail-copy .lead { font-size: 15px; line-height: 1.72; }
.detail-price span, .stock-pill { font-size: 12px; }
.spec-table { font-size: 12px; }
.combo-item strong, .combo-item small { font-size: 11px; }
.product-modal-info > p { font-size: 14px; line-height: 1.68; }
.cart-head span, .cart-item-info small, .cart-price-note, .zalo-order-status { font-size: 11px; }
.cart-item-info strong { font-size: 13px; }
.cart-line-total { font-size: 14px; }
.cart-summary-side label { font-size: 12px; }
.account-panel p, .account-note { font-size: 13px; line-height: 1.65; }
.toast { font-size: 12px; }

@media (max-width: 1180px) {
  .promo-slide { grid-template-columns: minmax(0,1fr) 360px; }
  .promo-media, .promo-media img { width: 360px; height: 360px; }
}
@media (max-width: 920px) {
  body { font-size: 15px; }
  .promo-slide { grid-template-columns: 1fr; gap: 0; }
  .promo-media { position: absolute; right: 15px; bottom: 15px; width: 270px; height: 270px; opacity: .5; }
  .promo-media img { width: 270px; height: 270px; }
  .nav-link, .nav-trigger { font-size: 14px; }
}
@media (max-width: 680px) {
  body { font-size: 14px; }
  .section-heading h2 { font-size: 29px; }
  .section-heading > p { font-size: 13px; }
  .promo-copy h2 { font-size: 32px; }
  .promo-copy p { font-size: 14px; }
  .promo-media { width: 220px; height: 220px; }
  .promo-media img { width: 220px; height: 220px; }
  .product-card h3 { min-height: 45px; font-size: 12px; }
  .product-kicker { font-size: 9px; }
  .product-price strong { font-size: 15px; }
}
@media (max-width: 420px) {
  .product-card h3 { font-size: 12px; }
}

@media(max-width:560px){.brand-dropdown-grid{grid-template-columns:1fr}}

.zalo-order-status{padding:10px 12px;border:1px solid #b9d8fb;border-radius:10px;background:#eef7ff;line-height:1.5}


/* V9.3 — thông tin nhận hàng trong giỏ */
.required-mark{color:#c22736;font-weight:900}
.cart-summary-side textarea{resize:vertical;line-height:1.5;font-size:12px}
#cartCustomerAddress{min-height:64px;max-height:120px}
#cartNote{min-height:58px;max-height:105px}
.cart-summary-side label{font-size:11.5px}
.cart-summary-side input,.cart-summary-side textarea{font-size:12.5px}
@media(max-width:700px){.quick-order-fields{grid-template-columns:1fr}}

/* V9.5 — chi phí giao hàng cố định trong giỏ */
.cart-cost-lines{display:grid;gap:8px;margin:16px 0 6px;padding-top:14px;border-top:1px solid var(--line-200)}
.cart-cost-lines>div{display:flex;align-items:center;justify-content:space-between;gap:15px;color:var(--muted-700);font-size:13px}
.cart-cost-lines>div strong{color:var(--navy-950);font-size:14px}
.cart-cost-lines .cart-total{margin:3px 0 0;padding-top:11px;border-top:1px dashed var(--line-200)}
.cart-cost-lines .cart-total strong{color:var(--red-600);font-size:23px}

/* V9.6 - Trang chủ ưu tiên hình ảnh và sản phẩm */
.brand-visual-slider{
  width:min(1760px,calc(100% - 12px));
  height:420px;
  margin-top:12px;
  border-radius:20px;
  background:#0b1f3a;
}
.brand-visual-slider .promo-slide{
  display:block;
  padding:0;
  background:none!important;
}
.brand-visual-slider .promo-slide>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.brand-visual-slider .promo-control{width:44px;height:58px;border-radius:14px;background:rgba(8,25,54,.62);backdrop-filter:blur(8px)}
.brand-visual-slider .promo-dots{bottom:15px}

.benefits{padding:14px 0}
.benefit-card{min-height:72px;padding:12px 14px}
.benefit-card p{display:none}
.benefit-card strong{font-size:13px}
.benefit-icon{width:34px;height:34px;font-size:10px}
.section{padding:34px 0}
.section-heading{margin-bottom:18px}
.section-heading h2{font-size:clamp(28px,3vw,38px)}
.section-link{color:#174c9e;font-weight:800;font-size:13px;white-space:nowrap}

.category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.visual-category-card{position:relative;display:block;min-height:230px;padding:0;overflow:hidden;border-radius:18px;background:#fff;text-align:left}
.visual-category-card .category-image{display:block;width:100%;height:210px;background:linear-gradient(180deg,#fff,#f3f6fb)}
.visual-category-card .category-image img{width:100%;height:100%;object-fit:contain;transition:transform .22s ease}
.visual-category-card:hover .category-image img{transform:scale(1.05)}
.visual-category-card .category-card-label{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;border-top:1px solid #e5ebf3}
.visual-category-card strong{font-size:14px}
.visual-category-card small{font-size:10px;white-space:nowrap}
.visual-category-card.active{box-shadow:0 0 0 2px #174c9e,0 14px 30px rgba(23,76,158,.12)}

.featured-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.featured-card{border-radius:16px;overflow:hidden}
.featured-card-image{aspect-ratio:1/1;min-height:0}
.featured-card-copy h3{min-height:38px}

.home-showcase-section{background:linear-gradient(180deg,#f6f9fe,#eef4fb)}
.compact-heading{margin-bottom:14px}
.home-product-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none}
.home-product-tabs::-webkit-scrollbar{display:none}
.home-product-tabs button{flex:0 0 auto;min-height:40px;padding:0 16px;border:1px solid #cfdbea;border-radius:999px;background:#fff;color:#315184;font:800 12px "Be Vietnam Pro",sans-serif;cursor:pointer}
.home-product-tabs button.active{border-color:#174c9e;background:#174c9e;color:#fff;box-shadow:0 8px 20px rgba(23,76,158,.18)}
.home-product-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.home-product-card{overflow:hidden;border:1px solid #dce5f1;border-radius:17px;background:#fff;box-shadow:0 10px 24px rgba(11,31,58,.055);transition:.18s ease}
.home-product-card:hover{transform:translateY(-3px);box-shadow:0 17px 34px rgba(11,31,58,.11)}
.home-product-image{display:block;aspect-ratio:1/1;padding:10px;background:#fff}
.home-product-image img{width:100%;height:100%;object-fit:contain}
.home-product-copy{padding:11px 12px 12px;border-top:1px solid #edf1f6}
.home-product-copy small{display:block;overflow:hidden;color:#667085;font-size:9px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.home-product-copy h3{min-height:38px;margin:5px 0 8px;font-size:12px;line-height:1.45}
.home-product-copy h3 a{color:#0b1f3a}
.home-product-copy>div{display:flex;align-items:center;justify-content:space-between;gap:8px}
.home-product-copy strong{color:#c22736;font-size:15px}
.home-product-copy button{width:34px;height:34px;border:0;border-radius:10px;background:#ffd51a;color:#0b1f3a;font-size:20px;font-weight:900;cursor:pointer}
.home-showcase-footer{display:flex;justify-content:center;margin-top:17px}

.product-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.product-card-media{aspect-ratio:1/1}
.product-card-body{padding:12px}
.product-card h3{min-height:40px;font-size:12px}
.product-meta{display:none}
.product-compare{display:none}
.product-card-actions .btn{min-height:38px}

.builder-section{padding-top:30px}
.builder-grid{grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:18px}
.builder-copy p{max-width:520px}
.builder-points{display:none}
.home-secondary-section{display:none}
.blog-section{padding-top:28px}
.blog-card p{display:none}
.brand-strip{gap:8px}
.brand-chip{padding:10px 14px}

@media(max-width:1180px){
  .brand-visual-slider{height:420px}
  .featured-row,.home-product-grid,.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:920px){
  .brand-visual-slider{width:calc(100% - 8px);height:360px;border-radius:16px}
  .category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .featured-row,.home-product-grid,.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .builder-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .brand-visual-slider{height:250px;margin-top:5px;border-radius:13px}
  .brand-visual-slider .promo-control{width:36px;height:48px}
  .benefit-grid{grid-template-columns:1fr 1fr;gap:7px}
  .benefit-card{min-height:58px;padding:9px 10px}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .visual-category-card{min-height:178px;border-radius:14px}
  .visual-category-card .category-image{height:128px;padding:7px}
  .visual-category-card .category-card-label{padding:10px;display:grid;gap:2px}
  .visual-category-card strong{font-size:12px}
  .visual-category-card small{font-size:9px}
  .featured-row,.home-product-grid,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .home-product-copy{padding:9px}
  .home-product-copy h3{font-size:11px;min-height:36px}
  .home-product-copy strong{font-size:13px}
  .section{padding:27px 0}
  .section-heading{align-items:flex-end}
  .section-link{font-size:11px}
}


/* =========================================================
   V9.6.8 — CSS ổn định cho trang chủ
   Một khối override duy nhất, thay cho các lớp chồng chéo cũ.
   ========================================================= */
:root{
  --index-card-radius:18px;
  --index-soft-shadow:0 12px 30px rgba(11,31,58,.075);
  --index-hover-shadow:0 20px 42px rgba(11,31,58,.14);
}
html,body{max-width:100%;overflow-x:hidden}
#mainContent,.brand-visual-slider,.index-builder-section{max-width:100%}

/* Slide: ảnh đã được xuất đúng tỷ lệ 1760 x 533 nên không crop chữ. */
.brand-visual-slider{
  position:relative;
  width:min(1760px,calc(100% - 24px));
  height:auto;
  aspect-ratio:1760/533;
  max-height:533px;
  min-height:280px;
  margin:12px auto 0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:#08152b;
  box-shadow:0 20px 48px rgba(8,25,54,.18);
}
.brand-visual-slider .promo-track,
.brand-visual-slider .promo-slide{position:absolute;inset:0}
.brand-visual-slider .promo-slide{
  display:block;
  padding:0;
  overflow:hidden;
  background:#08152b!important;
}
.brand-visual-slider .promo-slide::before,
.brand-visual-slider .promo-slide::after{display:none!important}
.brand-visual-slider .promo-slide>img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  padding:0!important;
  object-fit:cover;
  object-position:center;
  transform:none!important;
  filter:none!important;
}
.brand-visual-slider .promo-control{
  width:46px;
  height:58px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  background:rgba(8,25,54,.66);
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  backdrop-filter:blur(10px);
}
.brand-visual-slider .promo-control:hover{background:#ffd51a;color:#0b1f3a}
.brand-visual-slider .promo-control.prev{left:18px}
.brand-visual-slider .promo-control.next{right:18px}
.brand-visual-slider .promo-dots{bottom:16px;padding:6px 9px;border-radius:999px;background:rgba(8,25,54,.28);backdrop-filter:blur(7px)}

/* Nhịp trang chủ */
.index-featured-section{padding-block:42px;background:linear-gradient(180deg,#f7f9fd,#eef3fa)}
.index-catalog-section{padding-top:56px}
.index-featured-section .section-heading,
.index-catalog-section .section-heading{align-items:flex-end}
.index-featured-section .section-heading h2,
.index-catalog-section .section-heading h2{letter-spacing:-.025em}
.index-featured-section .section-link{display:inline-flex;align-items:center;min-height:38px;padding:0 13px;border-radius:10px;background:#fff;box-shadow:0 6px 16px rgba(11,31,58,.06)}
.category-section{padding-top:44px;padding-bottom:46px}
.visual-category-card{border:1px solid #e0e7f0;box-shadow:0 8px 22px rgba(11,31,58,.05)}
.visual-category-card:hover{box-shadow:var(--index-hover-shadow)}

/* Sản phẩm bán chạy */
.featured-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.featured-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid #e1e8f1;
  border-radius:var(--index-card-radius);
  background:#fff;
  box-shadow:var(--index-soft-shadow);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.featured-card:hover{transform:translateY(-4px);border-color:#c6d4e7;box-shadow:var(--index-hover-shadow)}
.featured-card-image{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:linear-gradient(180deg,#fff,#f7f9fc)}
.featured-card-image>a{display:block;width:100%;height:100%}
.featured-card-image img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .28s ease}
.featured-card:hover .featured-card-image img{transform:scale(1.035)}
.featured-card-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 56%,rgba(8,25,54,.12));opacity:0;pointer-events:none;transition:opacity .22s ease}
.featured-card:hover .featured-card-shade{opacity:1}
.featured-card-copy{position:relative;z-index:2;padding:13px 14px 15px;border-top:1px solid #edf1f6;background:#fff}
.featured-card-copy small{display:block;overflow:hidden;color:#315184;font-size:10px;font-weight:500;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
.featured-card-copy h3{min-height:2.9em;margin:6px 0 9px;font-size:13px;line-height:1.45}
.featured-card-copy h3 a{color:#0b1f3a}
.featured-card-copy strong{color:#c22736;font-size:16px}

/* 3 icon dùng chung cho bán chạy và danh mục */
.featured-hover-actions,
.product-hover-actions{
  position:absolute;
  left:50%;
  right:auto;
  top:auto;
  bottom:14px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  opacity:0;
  transform:translate(-50%,12px);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.featured-card:hover .featured-hover-actions,
.product-card:hover .product-hover-actions{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.featured-hover-actions .hover-icon-btn,
.product-hover-actions .hover-icon-btn{
  position:relative;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(11,31,58,.08);
  border-radius:50%;
  color:#0b1f3a;
  background:rgba(255,255,255,.97);
  box-shadow:0 10px 24px rgba(8,25,54,.18);
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,color .16s ease;
}
.featured-hover-actions .hover-icon-btn svg,
.product-hover-actions .hover-icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.featured-hover-actions .hover-icon-btn:hover,
.product-hover-actions .hover-icon-btn:hover{transform:translateY(-2px);background:#ffd51a;color:#0b1f3a}
.featured-hover-actions .hover-icon-btn.active,
.product-hover-actions .hover-icon-btn.active{background:#174c9e;color:#fff}
.featured-hover-actions .hover-icon-btn::after,
.product-hover-actions .hover-icon-btn::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(5px);
  padding:6px 9px;
  border-radius:8px;
  color:#fff;
  background:rgba(11,31,58,.96);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
}
.featured-hover-actions .hover-icon-btn:hover::after,
.product-hover-actions .hover-icon-btn:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.product-card .product-compare{display:none!important}

/* Danh mục sản phẩm */
.product-card{min-width:0;border:1px solid #e1e8f1;border-radius:var(--index-card-radius);box-shadow:var(--index-soft-shadow)}
.product-card:hover{border-color:#c6d4e7;box-shadow:var(--index-hover-shadow)}
.product-card-media{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#f8fafc)}
.product-card-media>a{display:block;width:100%;height:100%}
.product-card-media img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.product-card-body{position:relative;z-index:2;padding:13px 14px 15px;background:#fff}
.product-card h3{min-height:2.9em;font-size:13px;line-height:1.45}
.product-price strong{font-size:17px}
.filter-sidebar{border-radius:18px;box-shadow:0 14px 34px rgba(11,31,58,.07)}
.filter-group select,.price-inputs input{min-height:43px;border-radius:10px}

/* Builder: chống tràn ngang và tự chuyển một cột ở laptop. */
.index-builder-section{
  position:relative;
  overflow:hidden;
  padding-block:64px;
  background:radial-gradient(circle at 8% 18%,rgba(255,213,26,.14),transparent 25%),radial-gradient(circle at 94% 88%,rgba(45,105,210,.2),transparent 28%),#0b1f3a;
}
.index-builder-section::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(90deg,#000,transparent 80%)}
.index-builder-section .builder-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:48px;
  align-items:center;
}
.index-builder-section .builder-copy,
.index-builder-section .builder-card,
.index-builder-section .builder-fields,
.index-builder-section .builder-fields label{min-width:0;max-width:100%}
.index-builder-section .builder-copy{max-width:550px}
.index-builder-section .builder-copy h2{font-size:clamp(34px,4vw,50px);letter-spacing:-.035em}
.index-builder-section .builder-copy p{font-size:15px;line-height:1.75}
.index-builder-section .builder-points{display:grid;gap:10px;margin-top:24px}
.index-builder-section .builder-points span{font-size:13px}
.index-builder-section .builder-points b{flex:0 0 auto;width:32px;height:32px;border-radius:10px;box-shadow:0 8px 18px rgba(255,213,26,.16)}
.index-builder-section .builder-card{
  width:100%;
  box-sizing:border-box;
  padding:28px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:22px;
  box-shadow:0 24px 58px rgba(0,0,0,.22);
}
.index-builder-section .builder-card-head{padding-bottom:17px;border-bottom:1px solid #e8edf4;margin-bottom:19px}
.index-builder-section .builder-card-head strong{font-size:28px;letter-spacing:-.02em}
.index-builder-section .builder-card-head small{display:inline-flex;align-items:center;min-height:32px;padding:0 11px;border-radius:999px;background:#eef4ff;color:#174c9e;font-size:11px;font-weight:800}
.index-builder-section .builder-fields{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
}
.index-builder-section .builder-fields label{display:grid;gap:7px;font-size:12px}
.index-builder-section .builder-fields label.wide{grid-column:1/-1}
.index-builder-section .builder-fields select,
.index-builder-section .builder-fields input{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:46px;
  box-sizing:border-box;
  border-color:#d4deeb;
  border-radius:10px;
  font-size:14px;
  outline:0;
}
.index-builder-section .builder-fields select:focus,
.index-builder-section .builder-fields input:focus{border-color:#174c9e;box-shadow:0 0 0 3px rgba(23,76,158,.1)}
.index-builder-section .builder-estimate{margin:18px 0;padding:17px 18px;border:1px solid #f0d679;border-radius:14px;background:linear-gradient(90deg,#fff9df,#fff3b9)}
.index-builder-section .builder-estimate span{font-size:14px}
.index-builder-section .builder-estimate strong{font-size:29px;letter-spacing:-.02em}
.index-builder-section .builder-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.index-builder-section .builder-actions .btn{width:100%;min-width:0;min-height:47px;border-radius:11px;font-size:13px}
.index-builder-section .builder-note{margin-top:12px;font-size:11px;line-height:1.65}

@media(max-width:1180px){
  .brand-visual-slider{min-height:260px}
  .featured-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .index-builder-section{padding-block:50px}
  .index-builder-section .builder-grid{grid-template-columns:1fr;gap:30px}
  .index-builder-section .builder-copy{max-width:760px}
}
@media(max-width:920px){
  .brand-visual-slider{width:calc(100% - 16px);min-height:230px;border-radius:18px}
  .featured-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:680px){
  .brand-visual-slider{width:calc(100% - 10px);height:220px;min-height:220px;aspect-ratio:auto;margin-top:5px;border-radius:14px}
  .brand-visual-slider .promo-slide>img{object-fit:contain;background:#08152b}
  .brand-visual-slider .promo-control{width:38px;height:48px}
  .brand-visual-slider .promo-control.prev{left:8px}
  .brand-visual-slider .promo-control.next{right:8px}
  .brand-visual-slider .promo-dots{bottom:9px}
  .index-featured-section{padding-block:32px}
  .featured-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .featured-card-copy{padding:10px 10px 12px}
  .featured-card-copy h3{font-size:11px}
  .featured-card-copy strong{font-size:14px}
  .featured-hover-actions,.product-hover-actions{bottom:9px;gap:7px;opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .featured-hover-actions .hover-icon-btn,.product-hover-actions .hover-icon-btn{width:36px;height:36px}
  .featured-hover-actions .hover-icon-btn svg,.product-hover-actions .hover-icon-btn svg{width:17px;height:17px}
  .featured-hover-actions .hover-icon-btn::after,.product-hover-actions .hover-icon-btn::after{display:none}
  .index-builder-section{padding-block:38px}
  .index-builder-section .builder-copy h2{font-size:31px}
  .index-builder-section .builder-copy p{font-size:13px}
  .index-builder-section .builder-points span{font-size:12px}
  .index-builder-section .builder-card{padding:18px;border-radius:18px}
  .index-builder-section .builder-card-head{align-items:flex-start;flex-direction:column;gap:8px}
  .index-builder-section .builder-card-head strong{font-size:23px}
  .index-builder-section .builder-fields{grid-template-columns:1fr}
  .index-builder-section .builder-fields label.wide{grid-column:auto}
  .index-builder-section .builder-actions{grid-template-columns:1fr}
}
.nav-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* V9.7.1 FIX — gộp tên trường và dấu * thành một dòng */
.field-label{display:inline-flex!important;align-items:baseline!important;gap:3px!important;width:max-content!important;max-width:100%!important;white-space:nowrap!important;line-height:1.35!important}
.field-label .required-mark{display:inline!important;position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;color:#c22736!important;font-weight:800!important;line-height:1!important}


/* V9.7.2 — Danh mục sản phẩm Thuận Audio: 4 cột trên PC */
.product-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
}

@media(max-width:920px){
  .product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px!important;
  }
}

@media(max-width:680px){
  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
}


/* V9.7.3 — Main menu refinement and sidebar category accordion */
.mega-panel.mega-panel-wide{grid-template-columns:1.02fr 1.02fr 1.02fr 1.02fr .96fr;gap:20px}
.brand-quality-promo{min-height:236px}
.category-sidebar-menu{margin-bottom:18px;border:1px solid var(--line-200);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
.category-sidebar-title{padding:16px 18px 12px;border-bottom:1px solid var(--line-200);color:var(--navy-950);font-size:19px;font-weight:900;letter-spacing:.03em;text-transform:uppercase}
.category-accordion-item + .category-accordion-item{border-top:1px solid #e8edf5}
.category-accordion-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border:0;background:#fff;color:var(--navy-950);font-size:15px;font-weight:800;text-align:left;cursor:pointer}
.category-accordion-trigger:hover{background:#f7f9fd}
.category-accordion-label{display:flex;align-items:center;gap:10px;min-width:0}
.category-accordion-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;padding:2px 8px;border-radius:999px;background:#eef3ff;color:var(--navy-700);font-size:11px;font-weight:800}
.category-accordion-icon{flex:0 0 auto;font-size:22px;line-height:1;color:#0e2a62}
.category-accordion-panel{display:none;padding:0 0 8px;background:#fff}
.category-accordion-item.open .category-accordion-panel{display:block}
.category-accordion-item.open .category-accordion-icon::before{content:'−'}
.category-accordion-icon::before{content:'+'}
.category-menu-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px 10px 36px;color:#24324d;font-size:14px;text-decoration:none;border-top:1px dashed rgba(11,31,58,.08)}
.category-menu-link:hover{background:#f7f9fd;color:var(--navy-800)}
.category-menu-link.active{color:var(--navy-900);font-weight:800;background:#f5f8ff}
.category-menu-link-main{display:flex;align-items:center;gap:10px;min-width:0}
.category-menu-arrow{font-size:14px;color:#0e2a62}
.category-menu-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;padding:2px 7px;border-radius:999px;background:#f2f5fb;color:#5d6c84;font-size:11px;font-weight:800}
.filter-sidebar-header{padding-top:2px;border-top:1px solid rgba(11,31,58,.08)}
.filter-sidebar-header h3{text-transform:uppercase;letter-spacing:.03em}
@media(max-width:1260px){.mega-panel.mega-panel-wide{grid-template-columns:1fr 1fr 1fr 1fr;}.brand-quality-promo{grid-column:1/-1;min-height:unset}}
@media(max-width:1024px){.category-sidebar-title{font-size:18px}.category-accordion-trigger{font-size:14px}.category-menu-link{font-size:13px}}
@media(max-width:920px){.category-sidebar-menu{margin-bottom:14px}.filter-sidebar-header{padding-top:14px}.mega-panel.mega-panel-wide{grid-template-columns:1fr 1fr}.brand-quality-promo{display:none}}
@media(max-width:560px){.category-sidebar-title{padding:15px 16px 11px;font-size:17px}.category-accordion-trigger{padding:14px 16px}.category-menu-link{padding:10px 16px 10px 28px}}


/* V9.7.4 — Sidebar accordion exclusive + mega menu premium */
.mega-panel.mega-panel-wide{grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:20px 22px 0;overflow:hidden}
.mega-panel-wide .mega-column{padding:4px 18px 18px;border-right:1px solid #edf1f6}
.mega-panel-wide .mega-column:first-child{padding-left:4px}
.mega-panel-wide .mega-column:nth-child(5){border-right:0}
.mega-panel-wide .mega-column h3{margin:0 0 10px;padding-bottom:9px;border-bottom:2px solid #ffd51a;color:var(--navy-950);font-size:14px;font-weight:900}
.mega-panel-wide .mega-link{min-height:37px;padding:7px 8px;border-radius:8px;color:#34435c;font-size:11.5px}
.mega-panel-wide .mega-link:hover{padding-left:12px;background:#f5f8fd;color:var(--navy-800)}
.mega-link-featured{font-weight:800;color:var(--navy-900)!important}
.brand-quality-promo{grid-column:1/-1;min-height:82px;margin:0 -22px;padding:16px 22px;display:grid;grid-template-columns:auto minmax(240px,1fr) minmax(320px,1.35fr) auto;align-items:center;gap:18px;border-radius:0;background:linear-gradient(100deg,#07173e,#123171)}
.brand-quality-promo span{white-space:nowrap}.brand-quality-promo h3{margin:0!important;font-size:17px!important}.brand-quality-promo p{margin:0!important;font-size:11px!important}.brand-quality-promo .btn{white-space:nowrap}
.category-sidebar-menu{border-radius:14px;box-shadow:none}.category-sidebar-title{background:#07173e;color:#fff;font-size:16px;letter-spacing:.045em}.category-accordion-trigger{min-height:48px;font-size:13.5px;font-weight:700}.category-accordion-item.open>.category-accordion-trigger{background:#f5f8fd;color:var(--navy-800)}.category-accordion-item.open>.category-accordion-trigger .category-accordion-label{font-weight:900}.category-accordion-panel{animation:accordionFade .16s ease}@keyframes accordionFade{from{opacity:.45;transform:translateY(-3px)}to{opacity:1;transform:none}}.category-menu-link{min-height:40px;padding:9px 14px 9px 30px;font-size:12.5px}.category-menu-link-main{gap:7px}.category-menu-arrow{font-weight:900}.category-menu-link.active{box-shadow:inset 3px 0 0 var(--yellow-500);background:#f3f7ff;color:var(--navy-900)}.category-menu-badge{font-size:9.5px}.filter-sidebar-header{margin-top:4px;padding-top:16px}.filter-sidebar-header h3{font-size:15px}
@media(max-width:1260px){.mega-panel.mega-panel-wide{grid-template-columns:repeat(3,minmax(0,1fr))}.mega-panel-wide .mega-column{border-right:1px solid #edf1f6;border-bottom:1px solid #edf1f6}.brand-quality-promo{grid-column:1/-1}}
@media(max-width:920px){.mega-panel.mega-panel-wide{grid-template-columns:1fr;padding:12px}.mega-panel-wide .mega-column{padding:10px;border-right:0}.brand-quality-promo{display:none}.category-sidebar-title{font-size:15px}.category-accordion-trigger{font-size:13px}}


/* V9.7.5 — bo tròn popup xem nhanh / so sánh */
.product-modal-panel,
.compare-panel{
  border-radius:26px!important;
  overflow:auto!important;
  background-clip:padding-box;
}
.product-modal-panel .product-modal-media{border-radius:20px}
.compare-panel .compare-content{border-radius:16px;overflow:auto}
@media(max-width:680px){
  .product-modal-panel,.compare-panel{border-radius:19px!important}
}


/* V9.7.6 — tinh chỉnh menu Dây tín hiệu, Jack và Phụ Kiện Audio [DIY] */
.diy-audio-dropdown-menu{min-width:360px}
.diy-audio-dropdown-grid{width:min(460px,calc(100vw - 32px));gap:5px;padding:14px}
.diy-audio-dropdown-grid .dropdown-link{padding:11px 12px;border-radius:10px}
.diy-audio-dropdown-grid .dropdown-link strong{font-size:13px}
.diy-audio-dropdown-grid .dropdown-link small{font-size:11px;line-height:1.45}
#megaJackLinks .mega-link{font-weight:400}
#megaJackLinks .mega-link-featured{font-weight:400!important}
@media(max-width:920px){
  .diy-audio-dropdown-menu{min-width:0}
  .diy-audio-dropdown-grid{width:auto}
}


/* V9.7.8 — Ảnh sản phẩm tự vừa khung sau khi upload */
.featured-card-image,
.product-card-media,
.home-product-image,
.product-modal-media,
.detail-media,
.combo-item,
.search-suggestion,
.cart-item{
  overflow:hidden;
}
.featured-card-image img,
.product-card-media img,
.home-product-image img,
.product-modal-media > img,
.detail-media > img,
.combo-item img,
.search-suggestion img,
.cart-item img,
.compare-table img{
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  image-rendering:auto;
}
.product-modal-media > img,
.detail-media > img{width:100%!important;height:100%!important;}
.featured-card-image img,
.product-card-media img,
.home-product-image img{width:100%!important;height:100%!important;}
.compare-table img{display:block;width:132px;height:132px;max-width:100%;}
.cart-item img{background:#fff;}
.search-suggestion img{background:#fff;}

/* V9.7.8.20 — kính lúp ô vuông cho ảnh xem nhanh và chi tiết */
.image-zoom{
  --image-zoom-lens-size:176px;
  position:relative;
  isolation:isolate;
  cursor:zoom-in;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.product-modal-media.image-zoom{--image-zoom-lens-size:148px}
.detail-media.image-zoom{--image-zoom-lens-size:190px}
.image-zoom>.image-zoom-source{display:block;pointer-events:none}
.image-zoom:focus-visible{outline:3px solid rgba(37,139,235,.34);outline-offset:4px}
.image-zoom-lens{
  --zoom-lens-x:8px;
  --zoom-lens-y:8px;
  position:absolute;
  top:var(--zoom-lens-y);
  left:var(--zoom-lens-x);
  z-index:4;
  width:min(var(--image-zoom-lens-size),calc(100% - 16px));
  aspect-ratio:1/1;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  border:2px solid rgba(37,139,235,.78);
  border-radius:13px;
  background:#fff;
  box-shadow:0 15px 36px rgba(7,23,62,.2),0 2px 8px rgba(37,139,235,.16);
  transform:scale(.96);
  transition:opacity .14s ease,transform .14s ease;
  will-change:left,top,transform;
}
.image-zoom-lens.is-visible{opacity:1;transform:scale(1)}
.product-modal-media .image-zoom-lens-image,
.detail-media .image-zoom-lens-image{
  position:absolute!important;
  display:block!important;
  max-width:none!important;
  min-width:0!important;
  width:auto;
  height:auto;
  padding:0!important;
  object-fit:fill!important;
  object-position:initial!important;
  image-rendering:auto;
  transition:none!important;
  pointer-events:none;
}
.image-zoom-hint{
  position:absolute;
  right:13px;
  bottom:13px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:10px;
  color:#fff;
  background:rgba(7,23,62,.82);
  box-shadow:0 7px 18px rgba(7,23,62,.15);
  backdrop-filter:blur(7px);
  font-size:11.5px;
  font-weight:700;
  line-height:1.2;
  pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;
}
.image-zoom-hint svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.image-zoom-hint-touch{display:none}
.image-zoom.is-zooming .image-zoom-hint{opacity:0;transform:translateY(4px)}
@media(hover:none),(pointer:coarse){
  .image-zoom{cursor:default}
  .image-zoom-hint-desktop{display:none}
  .image-zoom-hint-touch{display:inline}
}
@media(max-width:680px){
  .product-modal-media.image-zoom,
  .detail-media.image-zoom{--image-zoom-lens-size:142px}
  .image-zoom-hint{right:10px;bottom:10px;min-height:31px;padding:6px 9px;font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .image-zoom-lens,.image-zoom-hint{transition:none}
}

/* V9.7.8.21 — gallery ảnh sản phẩm: ảnh chính, tối đa 5 ảnh phụ và điều khiển slide */
.product-modal-panel{width:min(1080px,100%)}
.product-gallery{
  min-width:0;
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  gap:12px;
  align-items:start;
}
.product-gallery:not(.has-multiple){grid-template-columns:minmax(0,1fr)}
.product-gallery:not(.has-multiple) .product-gallery-thumbs{display:none}
.product-gallery-thumbs{
  display:grid;
  align-content:start;
  gap:9px;
  max-height:100%;
  overflow:auto;
  padding:1px 2px 1px 1px;
  scrollbar-width:thin;
  scrollbar-color:#c8d5e7 transparent;
}
.product-gallery-thumb{
  position:relative;
  width:58px;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:3px;
  border:1px solid #dce4ef;
  border-radius:9px;
  background:#fff;
  box-shadow:0 2px 7px rgba(7,23,62,.035);
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.product-gallery-thumb::after{
  content:"";
  position:absolute;
  inset:auto 9px 3px;
  height:2px;
  border-radius:2px;
  opacity:0;
  background:#258beb;
  transition:opacity .16s ease;
}
.product-gallery-thumb:hover{border-color:#9fc9ef;transform:translateY(-1px)}
.product-gallery-thumb.is-active{border-color:#258beb;box-shadow:0 0 0 2px rgba(37,139,235,.13),0 5px 14px rgba(7,23,62,.08)}
.product-gallery-thumb.is-active::after{opacity:1}
.product-gallery-thumb:focus-visible{outline:3px solid rgba(37,139,235,.3);outline-offset:2px}
.product-gallery-thumb img{width:100%;height:100%;object-fit:contain;background:#fff;pointer-events:none}
.product-gallery-stage{position:relative;min-width:0;aspect-ratio:1/1;isolation:isolate}
.product-gallery-stage>.product-modal-media,
.product-gallery-stage>.detail-media{width:100%!important;height:100%!important;max-width:none!important;margin:0!important;aspect-ratio:auto}
.product-gallery .image-zoom-hint{top:12px;right:12px;bottom:auto}
.product-gallery [data-gallery-main]{opacity:1;transition:opacity .14s ease}
.product-gallery [data-gallery-main].is-changing{opacity:.48}
.product-gallery-arrow{
  position:absolute;
  top:50%;
  z-index:6;
  width:39px;
  height:48px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(197,209,225,.88);
  border-radius:11px;
  color:#0b285d;
  background:rgba(255,255,255,.9);
  box-shadow:0 7px 20px rgba(7,23,62,.11);
  backdrop-filter:blur(7px);
  transform:translateY(-50%);
  cursor:pointer;
  transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease;
}
.product-gallery-arrow:hover{color:#147bd1;border-color:#8fc3ed;background:#fff;transform:translateY(-50%) scale(1.04)}
.product-gallery-arrow:focus-visible{outline:3px solid rgba(37,139,235,.3);outline-offset:2px}
.product-gallery-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.product-gallery-prev{left:12px}
.product-gallery-next{right:12px}
.product-gallery-dots{
  position:absolute;
  left:50%;
  bottom:14px;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:24px;
  padding:5px 8px;
  border-radius:20px;
  background:rgba(255,255,255,.82);
  box-shadow:0 4px 13px rgba(7,23,62,.08);
  backdrop-filter:blur(6px);
  transform:translateX(-50%);
}
.product-gallery-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#cdd4de;cursor:pointer;transition:width .16s ease,background .16s ease}
.product-gallery-dot.is-active{width:18px;border-radius:8px;background:#258beb}
.product-gallery-dot:focus-visible{outline:2px solid #0b5ea6;outline-offset:2px}
.product-gallery--detail{grid-template-columns:72px minmax(0,1fr);gap:14px}
.product-gallery--detail .product-gallery-thumb{width:68px;border-radius:10px}
.product-gallery--detail .product-gallery-thumbs{gap:10px}
.product-gallery--detail .product-gallery-arrow{width:42px;height:52px}

@media(max-width:1180px){
  .product-gallery--detail{width:min(720px,100%);margin-inline:auto}
  .product-gallery--quick{width:min(620px,100%);margin-inline:auto}
}
@media(max-width:680px){
  .product-gallery,
  .product-gallery--detail{grid-template-columns:minmax(0,1fr);gap:10px}
  .product-gallery-stage{grid-row:1}
  .product-gallery-thumbs{
    grid-row:2;
    display:flex;
    gap:8px;
    max-width:100%;
    padding:2px 2px 4px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
  }
  .product-gallery-thumb,
  .product-gallery--detail .product-gallery-thumb{flex:0 0 56px;width:56px;scroll-snap-align:start}
  .product-gallery-arrow{width:36px;height:44px;border-radius:10px}
  .product-gallery-prev{left:8px}
  .product-gallery-next{right:8px}
  .product-gallery .image-zoom-hint{top:9px;right:9px;bottom:auto}
  .product-gallery-dots{bottom:9px;gap:6px;min-height:22px;padding:4px 7px}
  .product-gallery-dot{width:6px;height:6px}
  .product-gallery-dot.is-active{width:16px}
}
@media(prefers-reduced-motion:reduce){
  .product-gallery-thumb,.product-gallery-arrow,.product-gallery-dot,.product-gallery [data-gallery-main]{transition:none}
  .product-gallery-thumb:hover{transform:none}
}


/* V9.7.8.2 — Menu chính theo nhóm sản phẩm */
@media(min-width:921px){
  .main-nav .nav-menu{gap:0;justify-content:center;flex-wrap:nowrap}
  .main-nav .nav-link,.main-nav .nav-trigger{padding-inline:11px;font-size:14px;white-space:nowrap}
  .product-nav-dropdown-menu{width:290px}
  .product-nav-dropdown-panel{padding:12px}
  .product-nav-dropdown-panel .mega-link{min-height:42px;padding:10px 11px;font-size:12px;border-radius:9px}
}
@media(min-width:1180px){
  .main-nav .nav-link,.main-nav .nav-trigger{padding-inline:13px;font-size:14.5px}
}


/* V9.7.8.5 — Khôi phục màu gốc + menu chính/menu con weight 600 */
.main-nav,
.main-nav .nav-link,
.main-nav .nav-trigger,
.main-nav .mega-link,
.main-nav .dropdown-link,
.main-nav .dropdown-link strong,
.main-nav .category-menu-link-main{
  font-size:16px!important;
  font-weight:600!important;
}


/* V9.7.8.6 — Menu Thương hiệu mở rộng, gọn và không hiển thị số lượng */
@media(min-width:1181px){
  .brand-dropdown-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:5px!important;
    padding:14px!important;
  }
}
@media(min-width:921px) and (max-width:1180px){
  .brand-dropdown-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    padding:13px!important;
  }
}
.brand-dropdown-grid .brand-menu-link{
  min-height:40px;
  display:flex!important;
  align-items:center;
  padding:8px 10px!important;
  border:1px solid transparent;
  border-radius:8px;
}
.brand-dropdown-grid .brand-menu-link strong{
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.25;
}
.brand-dropdown-grid .brand-menu-link:hover{
  border-color:var(--line-200);
}
@media(max-width:920px){
  .brand-dropdown-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:4px!important;
    padding:10px!important;
  }
  .brand-dropdown-grid .brand-menu-link{min-height:38px;padding:7px 9px!important;}
}
@media(max-width:560px){
  .brand-dropdown-grid{grid-template-columns:1fr!important;}
}


/* V9.7.8.7 — Đồng bộ menu chính và DANH MỤC */
.main-nav .nav-label{
  font:inherit;
  color:inherit;
}


/* =========================================================
   V9.7.8.8 — Premium brand mega menu + refined dropdown motion
   ========================================================= */

/* Menu chính: underline chạy từ giữa + caret mềm hơn */
@media(min-width:921px){
  .main-nav .nav-trigger,
  .main-nav .nav-link{
    position:relative;
    isolation:isolate;
  }

  .main-nav .nav-trigger::after,
  .main-nav .nav-link::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:5px;
    height:2px;
    border-radius:999px;
    background:#38a8ff;
    transform:scaleX(0);
    transform-origin:center;
    opacity:0;
    transition:
      transform .22s cubic-bezier(.22,1,.36,1),
      opacity .18s ease;
  }

  .main-nav .nav-item:hover > .nav-trigger::after,
  .main-nav .nav-item:focus-within > .nav-trigger::after,
  .main-nav .nav-link:hover::after{
    transform:scaleX(1);
    opacity:1;
  }

  .main-nav .nav-caret{
    transition:transform .24s cubic-bezier(.22,1,.36,1), opacity .18s ease;
  }

  /* Dropdown/mega menu: fade + lift + scale + blur nhẹ */
  .main-nav .mega-menu,
  .main-nav .dropdown-menu{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-9px) scale(.988);
    transform-origin:top center;
    filter:blur(3px);
    transition:
      opacity .20s ease,
      transform .24s cubic-bezier(.22,1,.36,1),
      filter .20s ease,
      visibility 0s linear .24s;
    will-change:opacity,transform,filter;
  }

  .main-nav .nav-item:hover > .mega-menu,
  .main-nav .nav-item:focus-within > .mega-menu,
  .main-nav .nav-item.open > .mega-menu,
  .main-nav .nav-item:hover > .dropdown-menu,
  .main-nav .nav-item:focus-within > .dropdown-menu,
  .main-nav .nav-item.open > .dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
    filter:blur(0);
    transition:
      opacity .18s ease,
      transform .24s cubic-bezier(.22,1,.36,1),
      filter .18s ease,
      visibility 0s;
  }

  /* Panel có chiều sâu mềm hơn */
  .main-nav .dropdown-panel,
  .main-nav .mega-panel{
    border-color:#e6edf6;
    box-shadow:
      0 18px 48px rgba(10,31,75,.12),
      0 3px 10px rgba(10,31,75,.05);
  }

  /* Link menu con cũng có motion tinh tế */
  .main-nav .mega-link,
  .main-nav .dropdown-link{
    transition:
      background-color .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      transform .20s cubic-bezier(.22,1,.36,1),
      color .18s ease;
  }

  .main-nav .mega-link:hover,
  .main-nav .dropdown-link:hover{
    transform:translateY(-1px);
  }
}

/* BRAND MEGA MENU — card tối giản, 4 cột */
@media(min-width:1181px){
  .brand-dropdown-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
    padding:20px 22px 22px!important;
  }
}

@media(min-width:921px) and (max-width:1180px){
  .brand-dropdown-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    padding:16px!important;
  }
}

.brand-dropdown-menu .brand-dropdown-grid{
  border-radius:0 0 18px 18px;
  background:
    linear-gradient(180deg,rgba(248,251,255,.92),rgba(255,255,255,.99) 28%),
    #fff;
}

.brand-dropdown-grid .brand-menu-link{
  position:relative;
  min-height:52px;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 11px 9px 13px!important;
  overflow:hidden;
  border:1px solid transparent!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.62);
  box-shadow:0 0 0 rgba(20,64,120,0);
}

.brand-dropdown-grid .brand-menu-link::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(110deg,#f2f9ff,#fff 58%);
  opacity:0;
  transition:opacity .20s ease;
}

.brand-dropdown-grid .brand-menu-name{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-dropdown-grid .brand-menu-dot{
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#38a8ff;
  box-shadow:0 0 0 0 rgba(56,168,255,.22);
  transition:
    transform .22s cubic-bezier(.22,1,.36,1),
    box-shadow .22s ease,
    background-color .18s ease;
}

.brand-dropdown-grid .brand-menu-link strong{
  width:auto!important;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.2;
  font-size:15px!important;
  font-weight:600!important;
}

.brand-dropdown-grid .brand-menu-mark{
  flex:0 0 auto;
  width:34px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid #e5edf7;
  border-radius:9px;
  color:#65758c;
  background:#f8fafc;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  opacity:.62;
  transform:translateX(0) scale(1);
  transition:
    color .18s ease,
    opacity .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    transform .22s cubic-bezier(.22,1,.36,1);
}

.brand-dropdown-grid .brand-menu-link:hover{
  border-color:#d8ecff!important;
  background:#f7fbff!important;
  box-shadow:0 8px 22px rgba(33,94,155,.09);
  transform:translateY(-2px)!important;
}

.brand-dropdown-grid .brand-menu-link:hover::before{
  opacity:1;
}

.brand-dropdown-grid .brand-menu-link:hover .brand-menu-dot{
  background:#1899ff;
  transform:scale(1.22);
  box-shadow:0 0 0 5px rgba(56,168,255,.13);
}

.brand-dropdown-grid .brand-menu-link:hover .brand-menu-mark{
  color:#0b2f63;
  opacity:1;
  border-color:#cfe6fb;
  background:#fff;
  transform:translateX(-2px) scale(1.04);
}

/* Stagger rất nhẹ khi mở menu thương hiệu */
@media(min-width:921px){
  .nav-item:hover .brand-dropdown-grid .brand-menu-link,
  .nav-item:focus-within .brand-dropdown-grid .brand-menu-link,
  .nav-item.open .brand-dropdown-grid .brand-menu-link{
    animation:taBrandItemIn .30s cubic-bezier(.22,1,.36,1) both;
  }
  .brand-dropdown-grid .brand-menu-link:nth-child(2n){animation-delay:.012s!important}
  .brand-dropdown-grid .brand-menu-link:nth-child(3n){animation-delay:.024s!important}
  .brand-dropdown-grid .brand-menu-link:nth-child(4n){animation-delay:.036s!important}

  @keyframes taBrandItemIn{
    from{opacity:0;transform:translateY(-5px)}
    to{opacity:1;transform:translateY(0)}
  }
}

/* Tablet/mobile: card gọn, animation đơn giản */
@media(max-width:920px){
  .brand-dropdown-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    padding:10px!important;
  }
  .brand-dropdown-grid .brand-menu-link{
    min-height:46px;
    padding:8px 9px!important;
  }
  .brand-dropdown-grid .brand-menu-link strong{
    font-size:14px!important;
  }
  .brand-dropdown-grid .brand-menu-mark{
    width:30px;
    height:28px;
  }
}

@media(max-width:560px){
  .brand-dropdown-grid{
    grid-template-columns:1fr!important;
  }
}

/* Tôn trọng người dùng giảm chuyển động */
@media(prefers-reduced-motion:reduce){
  .main-nav .mega-menu,
  .main-nav .dropdown-menu,
  .main-nav .nav-trigger::after,
  .main-nav .nav-link::after,
  .brand-dropdown-grid .brand-menu-link,
  .brand-dropdown-grid .brand-menu-dot,
  .brand-dropdown-grid .brand-menu-mark{
    transition:none!important;
    animation:none!important;
  }
}


/* =========================================================
   V9.7.8.9 — Logo thương hiệu thật, sắc nét và đồng nhất
   ========================================================= */
.brand-dropdown-grid .brand-menu-link{
  min-height:70px;
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr);
  align-items:center;
  gap:11px;
  padding:10px 11px!important;
}

.brand-dropdown-grid .brand-menu-logo{
  width:112px;
  height:46px;
  display:grid;
  place-items:center;
  padding:6px 8px;
  overflow:hidden;
  border:1px solid #e7edf5;
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 7px rgba(13,40,79,.035);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .22s cubic-bezier(.22,1,.36,1);
}

.brand-dropdown-grid .brand-menu-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
}

.brand-dropdown-grid .brand-menu-name{
  min-width:0;
  display:block;
}

.brand-dropdown-grid .brand-menu-name strong{
  display:block;
  overflow:hidden;
  color:#132b4c;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.25;
  font-size:14px!important;
  font-weight:600!important;
}

.brand-dropdown-grid .brand-menu-link:hover .brand-menu-logo{
  border-color:#cfe4f8;
  box-shadow:0 5px 14px rgba(24,83,144,.10);
  transform:scale(1.025);
}

@media(max-width:1180px){
  .brand-dropdown-grid .brand-menu-link{
    grid-template-columns:88px minmax(0,1fr);
    min-height:64px;
    gap:9px;
    padding:8px 9px!important;
  }
  .brand-dropdown-grid .brand-menu-logo{
    width:88px;
    height:42px;
    padding:5px 7px;
  }
  .brand-dropdown-grid .brand-menu-name strong{font-size:13px!important;}
}

@media(max-width:920px){
  .brand-dropdown-grid .brand-menu-link{
    grid-template-columns:82px minmax(0,1fr);
    min-height:62px;
  }
  .brand-dropdown-grid .brand-menu-logo{
    width:82px;
    height:40px;
  }
}

@media(max-width:560px){
  .brand-dropdown-grid .brand-menu-link{
    grid-template-columns:112px minmax(0,1fr);
    min-height:66px;
  }
  .brand-dropdown-grid .brand-menu-logo{
    width:112px;
    height:44px;
  }
  .brand-dropdown-grid .brand-menu-name strong{font-size:14px!important;}
}

@media(prefers-reduced-motion:reduce){
  .brand-dropdown-grid .brand-menu-logo{
    transition:none!important;
  }
}


/* =========================================================
   V9.7.8.11 — Khôi phục font menu con và đồng bộ kích thước
   ========================================================= */
.main-nav .product-nav-dropdown-panel .mega-link,
.main-nav .dropdown-menu:not(.brand-dropdown-menu) .dropdown-link strong{
  font-size:14px!important;
  font-weight:600!important;
}

@media(max-width:1180px){
  .main-nav .product-nav-dropdown-panel .mega-link,
  .main-nav .dropdown-menu:not(.brand-dropdown-menu) .dropdown-link strong{
    font-size:13px!important;
  }
}

@media(max-width:560px){
  .main-nav .product-nav-dropdown-panel .mega-link,
  .main-nav .dropdown-menu:not(.brand-dropdown-menu) .dropdown-link strong{
    font-size:14px!important;
  }
}


/* =========================================================
   V9.7.8.15 — Premium submenu tinh gọn và thẳng hàng menu cha
   ========================================================= */
@media(min-width:921px){
  .main-nav .premium-submenu-nav-item{
    position:relative;
  }

  .main-nav .premium-submenu-menu{
    left:0;
    right:auto;
    width:360px;
  }

  .main-nav .premium-submenu-menu.submenu-two-column-menu{
    width:520px;
  }

  /* Chỉ menu ngoài cùng neo phải để không tràn; Audio DIY vẫn thẳng mép menu cha. */
  .main-nav .premium-submenu-nav-item:last-child > .premium-submenu-menu{
    left:auto;
    right:0;
  }
}

.main-nav .premium-submenu-panel{
  position:relative;
  width:100%;
  gap:0;
  padding:12px 4px 16px!important;
  overflow:hidden;
  border-color:#dfe7f1;
  border-radius:0 0 18px 18px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.99) 0%,rgba(249,252,255,.99) 72%,rgba(242,247,253,.99) 100%);
  box-shadow:
    0 22px 52px rgba(9,33,72,.15),
    0 4px 12px rgba(9,33,72,.06);
}

.main-nav .premium-submenu-panel::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,#0d2d5b 0%,#228fe7 58%,#8bc9ff 100%);
}

.main-nav .premium-submenu-panel .mega-links{
  grid-template-columns:1fr;
  column-gap:18px;
  row-gap:0;
}

.main-nav .premium-submenu-panel .mega-links.submenu-two-columns{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.main-nav .premium-submenu-panel .mega-link{
  position:relative;
  min-height:52px;
  justify-content:flex-start;
  padding:0 12px!important;
  border-radius:9px;
  color:#263d5d;
  background:transparent;
  letter-spacing:0;
  box-shadow:inset 0 0 0 1px transparent;
  transition:
    color .18s ease,
    background-color .18s ease,
    box-shadow .20s ease,
    transform .20s cubic-bezier(.22,1,.36,1);
}

/* Đường gạch ngang xám nhạt, thụt đều hai đầu để phân tách từng hãng. */
.main-nav .premium-submenu-panel .mega-link::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:1px;
  border-radius:999px;
  background:#dfe5ed;
  transition:background-color .18s ease,opacity .18s ease;
}

.main-nav .premium-submenu-panel .mega-link::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:20px;
  border-radius:999px;
  background:#258beb;
  opacity:0;
  transform:translateY(-50%) scaleY(.55);
  transition:opacity .18s ease,transform .20s cubic-bezier(.22,1,.36,1);
}

.main-nav .premium-submenu-panel .mega-link:hover,
.main-nav .premium-submenu-panel .mega-link:focus-visible{
  color:#0d4f91;
  background:linear-gradient(110deg,#f1f7ff,#fff 78%);
  box-shadow:
    inset 0 0 0 1px #cfe3f8,
    0 7px 17px rgba(31,92,154,.09);
  transform:translateY(-1px);
}

.main-nav .premium-submenu-panel .mega-link:hover::before,
.main-nav .premium-submenu-panel .mega-link:focus-visible::before{
  opacity:1;
  transform:translateY(-50%) scaleY(1);
}

.main-nav .premium-submenu-panel .mega-link:hover::after,
.main-nav .premium-submenu-panel .mega-link:focus-visible::after{
  background:#cbd8e7;
}

@media(max-width:920px){
  .main-nav .premium-submenu-menu{
    width:auto;
  }
  .main-nav .premium-submenu-panel{
    padding:10px 12px 13px!important;
    border-radius:0 0 14px 14px;
  }
  .main-nav .premium-submenu-panel .mega-links{
    column-gap:12px;
  }
  .main-nav .premium-submenu-panel .mega-link{
    min-height:48px;
    padding-inline:10px!important;
  }
  .main-nav .premium-submenu-panel .mega-link::after{
    left:10px;
    right:10px;
  }
}

@media(max-width:560px){
  .main-nav .premium-submenu-panel .mega-links.submenu-two-columns{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .main-nav .premium-submenu-panel .mega-link,
  .main-nav .premium-submenu-panel .mega-link::before,
  .main-nav .premium-submenu-panel .mega-link::after{
    transition:none!important;
  }
}


/* =========================================================
   V9.7.8.14 — Đồng bộ submenu mô tả và quy tắc số cột
   ========================================================= */
.main-nav .premium-submenu-rich-grid{
  display:grid;
  grid-template-columns:1fr;
  column-gap:18px;
  row-gap:0;
}

.main-nav .premium-submenu-rich-grid.submenu-two-columns{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link{
  position:relative;
  min-height:72px;
  display:grid;
  align-content:center;
  gap:3px;
  padding:10px 12px!important;
  border:0!important;
  border-radius:9px;
  background:transparent;
  box-shadow:inset 0 0 0 1px transparent;
  transition:
    color .18s ease,
    background-color .18s ease,
    box-shadow .20s ease,
    transform .20s cubic-bezier(.22,1,.36,1);
}

.main-nav .diy-audio-dropdown-grid .premium-submenu-rich-grid .dropdown-link{
  min-height:52px;
}

.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link strong{
  overflow:hidden;
  color:#263d5d;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.3;
}

.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link small{
  display:-webkit-box;
  overflow:hidden;
  color:#77869a;
  font-size:10px;
  line-height:1.4;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

/* Mọi menu con dạng mô tả cũng có gạch ngang xám nhạt phân cách. */
.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:1px;
  border-radius:999px;
  background:#dfe5ed;
  transition:background-color .18s ease;
}

.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:24px;
  border-radius:999px;
  background:#258beb;
  opacity:0;
  transform:translateY(-50%) scaleY(.55);
  transition:opacity .18s ease,transform .20s cubic-bezier(.22,1,.36,1);
}

.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link:hover,
.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link:focus-visible{
  background:linear-gradient(110deg,#f1f7ff,#fff 78%);
  box-shadow:
    inset 0 0 0 1px #cfe3f8,
    0 7px 17px rgba(31,92,154,.09);
  transform:translateY(-1px);
}

.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link:hover strong,
.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link:focus-visible strong{
  color:#0d4f91;
}

.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link:hover::before,
.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link:focus-visible::before{
  opacity:1;
  transform:translateY(-50%) scaleY(1);
}

.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link:hover::after,
.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link:focus-visible::after{
  background:#cbd8e7;
}

@media(max-width:920px){
  .main-nav .premium-submenu-rich-grid{
    column-gap:12px;
  }
  .main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link{
    min-height:68px;
    padding-inline:10px!important;
  }
  .main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link::after{
    left:10px;
    right:10px;
  }
}

@media(max-width:560px){
  .main-nav .premium-submenu-rich-grid.submenu-two-columns{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link,
  .main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link::before,
  .main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link::after{
    transition:none!important;
  }
}

/* V9.7.8.26 - variant selector on product detail */
.variant-box{display:grid;gap:7px;margin:14px 0;padding:13px 14px;border:1px solid #dbe5ef;border-radius:14px;background:#f8fafc}.variant-box label{font-weight:700;color:#0f2742}.variant-box small{color:#64748b}.variant-select{width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#0f172a;font:inherit}

/* Customer authentication V9.7.8.31 */
.auth-account-panel{width:min(460px,100%);padding:28px}.auth-subtitle{color:#68778b;line-height:1.6;margin:6px 0 18px}.auth-form{display:grid;gap:14px}.auth-form[hidden],#authGuestView[hidden],#authMemberView[hidden]{display:none!important}.auth-form h3{font-size:22px;margin:2px 0 0;text-align:center}.auth-form>p{margin:0;color:#68778b;line-height:1.55}.auth-form label{display:grid;gap:7px;font-size:13px;font-weight:700;color:#31445d}.auth-form input{width:100%;min-height:48px;border:1px solid #d3dce8;border-radius:10px;padding:0 13px;font:inherit;background:#fff;color:#162439;outline:none}.auth-form input:focus{border-color:#174c9e;box-shadow:0 0 0 3px rgba(23,76,158,.10)}.auth-password-wrap{position:relative}.auth-password-wrap input{padding-right:62px}.auth-eye{position:absolute;right:7px;top:7px;height:34px;padding:0 9px;border:0;border-radius:8px;background:#eef3fa;color:#174c9e;font-weight:700;cursor:pointer}.auth-links{display:flex;justify-content:space-between;gap:14px;align-items:center}.auth-links.single{justify-content:center}.auth-links button{border:0;background:transparent;padding:3px 0;color:#174c9e;cursor:pointer;font:inherit;font-size:13px}.auth-message{display:none;margin:0 0 14px;padding:11px 12px;border-radius:9px;background:#fff0f2;color:#9d2432;font-size:13px;line-height:1.5}.auth-message.show{display:block}.auth-message.ok{background:#eaf8f0;color:#17623e}.auth-profile-card{display:grid;gap:5px;padding:18px;margin:14px 0;border-radius:14px;background:#f5f8fc;border:1px solid #dce5f1}.auth-profile-card strong{font-size:20px}.auth-profile-card span{color:#68778b;font-size:14px}@media(max-width:600px){.auth-account-panel{padding:22px 17px}.auth-links{flex-direction:column;gap:8px}}

/* V9.7.8.40.3 auth refinements */
.auth-optional{font-weight:500;color:#7b8797}.auth-email-form{margin:16px 0;padding-top:16px;border-top:1px solid #e3e9f1}.auth-email-form h3{font-size:17px;text-align:left}.auth-email-form>p{font-size:13px}.auth-eye{min-width:48px}


/* V9.7.8.40.3 — UI polish: 5px geometry + compact product choices */
:root{--ui-radius:5px;--index-card-radius:5px}
/* Popup surfaces */
.modal-panel,.auth-account-panel,.account-modal-panel,.cart-panel,.compare-tray{border-radius:var(--ui-radius)!important}
/* Product cards and every UI class explicitly named as a card */
[class~="product-card"],[class~="featured-card"],[class~="home-product-card"],[class~="blog-card"],[class~="sales-card"],[class~="pricing-card"],[class~="builder-card"],[class~="visual-category-card"],[class~="auth-profile-card"],[class~="sidebar-card"],[class~="knowledge-card"],[class~="article-card"],[class~="service-card"],[class~="contact-card"],[class~="info-card"],[class~="summary-card"],[class~="card"]{border-radius:var(--ui-radius)!important}
/* Image sliders / slide frames */
.promo-slider,.brand-visual-slider,.promo-slide,.brand-visual-slide,.slider-frame,.slide-image,.detail-media,.product-modal-media,.featured-card-image,.home-product-image{border-radius:var(--ui-radius)!important}
/* Detail product choice */
.variant-box{display:grid;gap:9px;margin:13px 0;padding:12px;border:1px solid #d9e2ee;border-radius:5px!important;background:#f8faff}
.variant-box-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.variant-box-head>span{color:var(--navy-950);font-size:12px;font-weight:850}
.variant-box-head>small{color:#768397;font-size:10px;white-space:nowrap}
.variant-select-wrap{position:relative}
.variant-select{width:100%;min-height:44px;padding:0 42px 0 12px;border:1px solid #cbd7e6;border-radius:5px!important;background:#fff;color:#10223d;font:700 12px var(--font);appearance:none;outline:none;box-shadow:0 3px 10px rgba(11,31,58,.035)}
.variant-select:focus{border-color:#174c9e;box-shadow:0 0 0 3px rgba(23,76,158,.09)}
.variant-select-arrow{position:absolute;right:13px;top:50%;transform:translateY(-54%);pointer-events:none;color:#315184;font-size:16px;font-weight:900}
.variant-box-note{color:#7a8798;font-size:10px;line-height:1.35}
@media(max-width:600px){.variant-box-head{align-items:flex-start;flex-direction:column;gap:2px}.variant-box-head>small{white-space:normal}}

/* V9.7.8.40.3 universal radius */
[class*="-card"],[class~="card"],.modal-panel{border-radius:5px!important}
.promo-slider,.brand-visual-slider,.promo-slide,.brand-visual-slide,.slide-image,.detail-media,.product-modal-media{border-radius:5px!important}


/* V9.7.8.40.3 — touchup: stronger text + 5px uniform corners */
:root{--ui-radius:5px;--index-card-radius:5px}
/* Radius cleanup for product detail controls, popup controls and common UI surfaces */
.search-wrap,.search-suggest,.header-action,.nav-cta,.product-tools select,.filter-toggle,.view-switch,.filter-sidebar,.category-card,.featured-card,.product-card,.home-product-card,.blog-card,.builder-card,.sales-card,.pricing-card,.empty-products,.product-modal-panel,.product-modal-media,.product-modal-price,.account-note,.cart-item img,.cart-qty,.qty-input,.detail-media,.detail-info,.combo-box,.combo-item,.zalo-order-status,.variant-box,.variant-select,.auth-form input,.auth-eye,.auth-message,.auth-profile-card,.product-gallery-thumb,.product-gallery-arrow,.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link,.index-featured-section .section-link,.home-product-copy button,.quick-view{border-radius:5px!important}
.cart-qty button,.qty-input button,.qty-input input,.variant-select-wrap,.variant-select-wrap .variant-select,.variant-select-wrap .variant-select-arrow,.modal-close{border-radius:5px!important}
/* Slightly stronger typography where text looked too thin */
.product-kicker,.product-card h3,.product-grid.list-view .product-card h3,.featured-card-copy small,.product-modal-info>p,.variant-box small,.variant-box-note,.auth-subtitle,.auth-form>p,.auth-message,.auth-profile-card span,.auth-optional,.product-modal-price span,.section-heading p,.checkout-item small,.cart-item small,.home-product-copy p,.knowledge-card p,.sidebar-card a,.main-nav .premium-submenu-panel .premium-submenu-rich-grid .dropdown-link,.mega-link,.filter-chip{font-weight:600!important}
/* Product title / detail description readability */
.product-modal-info h2,.product-card h3,.detail-summary h1,.detail-summary .product-name,.product-title{font-weight:600!important}


/* V9.7.8.40.3 — full 5px radius audit */
:root{--ui-radius:5px;--index-card-radius:5px}
/* Primary form controls and standard buttons */
.btn,a.btn,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,textarea,
.search-wrap,.search-suggest,.view-switch,.product-tools select,.filter-toggle,
.filter-sidebar,.category-sidebar-menu,.category-sidebar-title,.category-accordion-trigger,.category-accordion-panel,
.quick-view,.nav-cta,.header-action,
.qty-input,.cart-qty,.detail-info,.combo-box,.combo-item,.builder-estimate,
.product-modal-price,.account-note,.zalo-order-status,
.variant-box,.variant-select,.variant-select-wrap,
.auth-form input,.auth-eye,.auth-message,.auth-profile-card,
.index-featured-section .section-link,.home-product-copy button,
.product-gallery-thumb,.product-gallery-arrow,
.featured-hover-actions .hover-icon-btn,.product-hover-actions .hover-icon-btn,
.checkout-server-panel button,.checkout-bank-info button,
.track-search-card .btn{
  border-radius:5px!important;
}
/* Buttons inside grouped controls */
.builder-actions .btn,.index-builder-section .builder-actions .btn,
.product-card-actions .btn,.compare-tray .btn,.cart-qty button,.qty-input button,
.settings-actions .btn,.payment-admin-actions .btn,.order-detail-actions .btn,
.order-head-actions .btn,.manual-order-actions .btn,.notice-actions .btn,.pricing-actions .btn,
.article-cta .btn,.float-cart .btn{
  border-radius:5px!important;
}
/* Category block cleanup */
.category-sidebar-menu{border-radius:5px!important;overflow:hidden}
.category-sidebar-title{border-radius:5px 5px 0 0!important}
.category-accordion-item:last-child .category-accordion-trigger{border-radius:0 0 5px 5px!important}
.category-accordion-item:first-child:last-child .category-accordion-trigger{border-radius:0 0 5px 5px!important}
/* Small readable text that still looked thin */
.category-accordion-trigger,.category-menu-link,.filter-sidebar label,.filter-sidebar h3,
.builder-panel label,.builder-estimate span,.builder-estimate small,
.product-card h3,.product-modal-info>p,.variant-box small,.variant-box-note,
.auth-subtitle,.auth-form>p,.auth-message,.auth-profile-card span,
.checkout-item small,.cart-item small,.track-empty,.track-help,
.sidebar-card a,.knowledge-card p,.featured-card-copy small{
  font-weight:600!important;
}


/* V9.7.8.40.3 — readability pass: no thin UI text */
body{font-weight:600}
body p,body small,body label,body li,body td,body th,
body input,body select,body textarea,body option,
body a,body button,
body .muted,body [class*="subtitle"],body [class*="note"],body [class*="copy"],
body [class*="description"],body [class*="caption"],body [class*="meta"],
body [class*="hint"],body [class*="helper"],body [class*="kicker"]{font-weight:600!important}
body input::placeholder,body textarea::placeholder{font-weight:600!important;opacity:.82}
/* Keep stronger hierarchy stronger */
body h1,body h2,body h3,body h4,body strong,body b,.eyebrow,.btn,.section-title{font-weight:800}
/* Final radius normalization for rectangular UI controls/surfaces */
.btn,a.btn,button:not(.float-btn):not(.promo-control):not(.product-gallery-arrow),
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea,
.search-wrap,.search-suggest,.header-action,.nav-cta,.view-switch,.filter-sidebar,.category-sidebar-menu,
.category-sidebar-title,.category-accordion-trigger,.category-accordion-panel,
.product-card,.featured-card,.home-product-card,.blog-card,.builder-card,.sales-card,.pricing-card,
.modal-panel,.product-modal-media,.detail-media,.detail-info,.combo-box,.combo-item,
.qty-input,.cart-qty,.variant-box,.variant-select,.auth-profile-card,.auth-message,
.builder-estimate,.gallery-editor-empty,.gallery-editor-item,.gallery-uploader,
.product-gallery-thumb,.track-search-card,.track-result-card,.track-empty,.track-help,
.checkout-form-card,.order-summary-card,.checkout-server-panel,.checkout-bank-panel,.checkout-qr-box{
  border-radius:5px!important;
}


/* V9.7.8.40.3 — inventory storefront states */
.product-card-media,.featured-card-image,.home-product-image,.detail-stock-media{position:relative}
.is-out-of-stock img{opacity:.48;filter:grayscale(.22);transition:.18s ease}
.out-of-stock-overlay{position:absolute;left:50%;top:50%;z-index:8;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 13px;border:1px solid rgba(255,255,255,.85);border-radius:5px;background:rgba(11,31,58,.84);color:#fff;font-size:11px;font-weight:850;letter-spacing:.08em;white-space:nowrap;box-shadow:0 8px 24px rgba(5,18,44,.18);pointer-events:none}
.is-out-of-stock .hover-icon-btn[data-action="add-cart"],.is-out-of-stock [data-home-add]{opacity:.48;cursor:not-allowed;pointer-events:none}
.detail-stock-media{min-width:0}.detail-stock-media>.product-gallery{height:100%}

/* =========================================================
   V9.7.8.40.3 — MOBILE RESPONSIVE AUDIT
   Desktop giữ nguyên; tối ưu tablet/mobile <= 920px
   ========================================================= */
@media (max-width:920px){
  html,body{max-width:100%;overflow-x:hidden}
  body{font-size:15px;line-height:1.58}
  .container{width:min(100% - 24px,var(--container))}
  .simple-header-inner{min-height:68px;gap:12px}
  .simple-header .brand img,.admin-header .brand img{width:44px;height:44px}
  .simple-header .brand-copy strong,.admin-header .brand-copy strong{font-size:16px}
  .simple-nav{gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .simple-nav a,.simple-nav button{min-height:36px;padding:0 9px;font-size:11px}
  .section{padding:48px 0}
  .section-heading h2{font-size:30px}
  .section-heading>p{font-size:14px}
  .modal{padding:10px}
  .modal-panel{width:min(100%,720px);max-height:calc(100dvh - 20px);overflow:auto;border-radius:5px!important}
  .modal-close{position:sticky;top:6px;margin-left:auto;display:grid;z-index:20}
  .product-modal-panel,.compare-panel,.account-panel,.auth-account-panel{padding:18px!important}
  .product-modal-grid{gap:18px}
  .product-modal-info h2{font-size:26px;margin-right:0}
  .product-modal-price{align-items:flex-start;flex-direction:column;gap:4px}
  .product-modal-actions{grid-template-columns:1fr 1fr}
  .detail-grid{gap:20px}
  .detail-summary h1{font-size:30px;line-height:1.25}
  .detail-actions{grid-template-columns:1fr 1fr}
  .detail-info,.combo-box{padding:15px}
  .product-gallery--detail .product-gallery-thumbs{gap:7px;overflow-x:auto;scroll-snap-type:x proximity}
  .product-gallery--detail .product-gallery-thumb{flex:0 0 62px;width:62px;height:62px;scroll-snap-align:start}
}

@media (max-width:680px){
  .container{width:min(100% - 16px,var(--container))}
  body{font-size:14px}
  .topbar{display:none}
  .site-header{position:sticky;top:0}
  .header-main{min-height:auto;padding:8px 0 10px;grid-template-columns:minmax(0,1fr) auto;gap:7px}
  .brand{gap:8px}
  .brand img{width:42px;height:42px!important;border-radius:5px!important}
  .brand-copy strong{font-size:15px!important;white-space:nowrap}
  .header-actions{gap:1px}
  .header-action{min-width:39px;width:39px;height:42px;border-radius:5px!important}
  .header-action .action-icon{font-size:19px}
  .header-action b{top:0;right:0}
  .search-area{margin-bottom:0;margin-top:2px}
  .search-wrap{height:44px;border-radius:5px!important}
  .search-wrap input{height:42px;padding:0 11px;font-size:13px}
  .search-wrap button{min-width:72px;font-size:11px}
  .nav-inner{min-height:44px}
  .mobile-menu-button{min-height:36px;padding:0 11px;border-radius:5px!important;font-size:12px}
  .nav-menu{left:8px;right:8px;max-height:calc(100dvh - 126px);padding:7px;border-radius:5px!important}
  .nav-link,.nav-trigger,.nav-cta{min-height:41px;border-radius:5px!important;font-size:12px;font-weight:700}
  .dropdown-panel,.mega-panel,.dropdown-link,.mega-link{border-radius:5px!important}
  .brand-dropdown-grid{grid-template-columns:1fr}
  .promo-slider{height:410px;width:calc(100% - 8px);border-radius:5px!important}
  .promo-slide{padding:24px 20px 54px;align-content:start;padding-top:46px}
  .promo-copy{position:relative;z-index:2}
  .promo-copy h2{font-size:28px;line-height:1.17}
  .promo-copy p{max-width:100%;font-size:13px;line-height:1.55}
  .promo-copy .btn{width:100%}
  .promo-media{right:-8%;bottom:0;width:62%;height:45%;opacity:.32}
  .promo-control{width:34px;height:34px;border-radius:5px!important}
  .section{padding:38px 0}
  .section-heading{margin-bottom:18px}
  .section-heading h2{font-size:27px}
  .section-heading>p{font-size:13px}
  .benefit-grid{grid-template-columns:1fr 1fr}
  .benefit-card{padding:12px 9px;min-height:84px}
  .benefit-card strong{font-size:12px}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .category-card{min-height:104px;padding:12px}
  .featured-row,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .product-card-body{padding:10px!important}
  .product-card h3{min-height:42px;font-size:11px!important;line-height:1.42}
  .product-price strong{font-size:15px}
  .product-card-actions{display:grid;grid-template-columns:1fr 36px;gap:5px}
  .product-card-actions .btn{min-height:36px;padding:0 7px;font-size:10px}
  .quick-view{width:36px}
  .filter-sidebar{width:min(330px,92vw);padding:14px}
  .filter-sidebar-header{position:sticky;top:0;z-index:3;background:#fff}
  .builder-card{padding:14px}
  .builder-fields,.builder-actions{grid-template-columns:1fr!important}
  .builder-fields input,.builder-fields select{min-height:44px}
  .pricing-card,.sales-card{padding:18px}
  .footer{padding-top:32px}
  .footer-grid{gap:24px}
  .footer-bottom{gap:8px;text-align:center}
  .floating-contact{right:7px;bottom:7px;gap:6px}
  .float-btn{width:40px;height:40px}
  .modal{padding:6px;align-items:end}
  .modal-panel{width:100%;max-height:94dvh;border-radius:5px!important}
  .modal-close{top:4px;right:4px;width:34px;height:34px;border-radius:5px!important}
  .product-modal-panel,.compare-panel,.account-panel,.auth-account-panel{padding:14px!important}
  .product-modal-info{padding-top:0}
  .product-modal-info h2{font-size:22px;line-height:1.28;margin:4px 34px 8px 0}
  .product-modal-price strong{font-size:22px}
  .product-modal-actions,.detail-actions{grid-template-columns:1fr!important}
  .auth-form{gap:11px}
  .auth-form h3{font-size:20px}
  .auth-form input{min-height:44px}
  .auth-links{align-items:stretch!important}
  .auth-links button{text-align:center;min-height:34px}
  .cart-panel{width:100%!important}
  .cart-head{padding:12px 14px}
  .cart-items{padding:8px 12px}
  .cart-item{grid-template-columns:52px minmax(0,1fr) 30px;gap:7px;padding:10px 0}
  .cart-item img{width:52px;height:52px}
  .cart-item strong{font-size:12px}
  .cart-summary-side{padding:14px}
  .compare-tray{width:calc(100% - 16px);bottom:8px;gap:8px;padding:8px}
  .compare-tray-actions{display:flex;gap:5px}
  .detail-main{padding-top:18px}
  .detail-summary h1{font-size:25px}
  .detail-price strong{font-size:26px}
  .detail-media{max-height:74vw}
  .detail-info,.combo-box{padding:13px;margin-top:14px}
  .variant-box{padding:10px}
}

@media (max-width:390px){
  .brand-copy strong{font-size:14px!important}
  .header-action{min-width:36px;width:36px}
  .promo-slider{height:390px}
  .promo-copy h2{font-size:25px}
  .category-grid,.featured-row,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-card h3{font-size:10.5px!important}
  .product-card-actions .btn{font-size:9.5px}
}


/* V9.7.8.40.3 — product detail cleanup + fixed header */
/* Keep everything from the main navigation upward visible while scrolling. */
.topbar{position:sticky;top:0;z-index:131}
.site-header{position:sticky;top:38px;z-index:130}
.simple-header{position:sticky;top:0;z-index:130;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(8,28,73,.08)}
@media(max-width:920px){.topbar{display:none}.site-header{top:0}}

/* Compare has been replaced by direct purchase on product cards. */
#compareTray,#compareModal{display:none!important}
.product-buy-now{width:100%;min-height:38px;margin-top:8px;border-radius:5px!important;font-size:11px}
.product-buy-now:disabled,.hover-icon-btn:disabled{opacity:.48;cursor:not-allowed;transform:none!important}

/* Product detail: cleaner, denser information area. */
.detail-info{padding:14px 16px!important}
.detail-info .spec-table tr:last-child th,.detail-info .spec-table tr:last-child td{border-bottom:0}
.detail-info .spec-table th,.detail-info .spec-table td{padding:9px 0;font-size:12px;font-weight:600}
.detail-info .spec-table th{width:36%;color:#617086}
.detail-info .spec-table td{color:#13213a;font-weight:700}
.detail-copy .lead{max-width:760px}
/* Detail zoom was reduced from 2.55x to 1.7x in product.js (about one-third less). */

@media(max-width:680px){
  .product-buy-now{min-height:40px;font-size:12px}
  .detail-info{padding:12px!important}
  .detail-info .spec-table th,.detail-info .spec-table td{font-size:11px;padding:8px 0}
}


/* V9.7.8.40.3 — fixed header shell + compact 3-part product detail */
.site-sticky-shell{position:sticky;top:0;z-index:140;background:#fff;box-shadow:0 1px 0 rgba(8,28,73,.08)}
.site-sticky-shell .topbar,.site-sticky-shell .site-header{position:relative!important;top:auto!important;z-index:auto!important}
.site-sticky-shell .site-header{box-shadow:none}
@media(max-width:920px){.site-sticky-shell .topbar{display:none}}
.simple-header{position:sticky!important;top:0!important;z-index:140!important}
.product-buy-now{display:none!important}
.detail-grid{gap:34px}
.detail-copy{padding-top:4px}
.detail-copy .lead{margin:8px 0 0;max-width:680px;font-size:13px;line-height:1.7;font-weight:600;color:#607087}
.detail-wishlist{margin-top:0;min-height:40px}
.product-detail-sections{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:14px;margin-top:24px}
.product-detail-card{min-width:0;padding:18px;border:1px solid #dbe4ef;border-radius:5px!important;background:#fff;box-shadow:0 7px 20px rgba(11,31,58,.045)}
.product-detail-heading{display:flex;align-items:center;gap:11px;margin-bottom:13px;padding-bottom:11px;border-bottom:1px solid #e8edf4}
.product-detail-heading>span{width:31px;height:31px;display:grid;place-items:center;flex:0 0 auto;border-radius:5px;background:#07173e;color:#fff;font-size:10px;font-weight:800}
.product-detail-heading div{min-width:0}
.product-detail-heading small{display:block;color:#56709b;font-size:9px;font-weight:800;letter-spacing:.08em}
.product-detail-heading h2{margin:2px 0 0;color:#07173e;font-size:17px;line-height:1.25}
.product-info-card .spec-table th,.product-info-card .spec-table td{padding:9px 0;border-bottom:1px solid #edf1f6;font-size:12px;line-height:1.45}
.product-info-card .spec-table th{width:40%;padding-right:14px;color:#627187;font-weight:600}
.product-info-card .spec-table td{color:#11223d;font-weight:700}
.product-info-card .spec-table tr:last-child th,.product-info-card .spec-table tr:last-child td{border-bottom:0}
.product-description-copy{display:grid;gap:9px}
.product-description-copy p{margin:0;color:#4f6078;font-size:13px;line-height:1.72;font-weight:600}
.product-combo-card{grid-column:1/-1}
.product-combo-card .combo-items{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-combo-card .combo-item{border-radius:5px!important;background:#fbfcfe}
.product-combo-card .combo-item strong{font-size:11px;line-height:1.45}
.product-combo-card .combo-item small{font-size:10px;font-weight:700}
.combo-box{display:none!important}
@media(max-width:920px){.product-detail-sections{grid-template-columns:1fr}.product-combo-card{grid-column:auto}.product-combo-card .combo-items{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.product-detail-sections{gap:10px;margin-top:16px}.product-detail-card{padding:13px}.product-detail-heading{gap:9px;margin-bottom:10px;padding-bottom:9px}.product-detail-heading>span{width:28px;height:28px}.product-detail-heading h2{font-size:15px}.product-info-card .spec-table th,.product-info-card .spec-table td{font-size:11px;padding:8px 0}.product-description-copy p{font-size:12px;line-height:1.65}.product-combo-card .combo-items{grid-template-columns:1fr}}


/* V9.7.8.40.3 — robust fixed header + cleaner product detail copy */
.site-sticky-shell{
  position:fixed!important;
  top:0!important;left:0!important;right:0!important;width:100%!important;
  z-index:1000!important;background:#fff!important;
  box-shadow:0 2px 12px rgba(8,28,73,.08)!important;
}
.site-sticky-shell .topbar,.site-sticky-shell .site-header{position:relative!important;top:auto!important}
.has-fixed-site-header{padding-top:var(--site-fixed-header-height,170px)!important}
@media(max-width:920px){
  .site-sticky-shell .topbar{display:none!important}
  .has-fixed-site-header{padding-top:var(--site-fixed-header-height,124px)!important}
}
/* Do not repeat the long description beside the product title. */
.detail-copy>.lead{display:none!important}
/* Each application/feature is shown on its own clean line. */
.product-description-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.product-description-list li{position:relative;margin:0;padding:0 0 0 16px;color:#33465f;font-size:12.5px;line-height:1.62;font-weight:600}
.product-description-list li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:2px;background:#174c9e;transform:translateY(-50%)}
@media(max-width:600px){
  .product-description-list{gap:7px}
  .product-description-list li{font-size:12px;line-height:1.58;padding-left:14px}
  .product-description-list li::before{width:5px;height:5px}
}


/* V9.7.8.40.3 — fixed-header modal stacking + quote builder cleanup */
/* Popup must sit above the fixed storefront header, otherwise its top is hidden. */
.modal-backdrop{z-index:2100!important}
.modal{z-index:2200!important}
.toast{z-index:2300!important}
/* Keep popup comfortably inside the viewport on desktop and mobile. */
.modal-panel{max-height:calc(100dvh - 28px)!important}
@media(max-width:600px){.modal{padding:8px!important}.modal-panel{max-height:calc(100dvh - 16px)!important}}
/* Empty cable length is intentional; make the placeholder easy to read. */
#builderLength::placeholder{color:#8a96a8;opacity:1;font-weight:600}

/* v9.7.8.40.3 — builder compatibility */
.builder-compatibility{margin:0;padding:9px 11px;border:1px solid #d9e2ec;border-radius:5px;background:#f7fafc;color:#334155;font-size:12px;font-weight:600;line-height:1.45}
.builder-compatibility.is-info{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}
.builder-compatibility.is-success{border-color:#bbf7d0;background:#f0fdf4;color:#15803d}
.builder-compatibility.is-warning{border-color:#fde68a;background:#fffbeb;color:#b45309}

/* v9.7.8.40.9 - custom cable configuration in cart */
.cart-config-item{display:grid;grid-template-columns:minmax(0,1fr) 105px 34px;align-items:start;gap:11px;margin:10px 0;padding:12px 0;border-bottom:1px solid var(--line-200);background:#fff}
.cart-config-body{min-width:0;display:grid;gap:8px;padding:2px 0}
.cart-config-head{display:grid;gap:5px;min-width:0}
.cart-config-head strong{color:#0b1f3a;font-size:14px;line-height:1.45}
.cart-config-badge{width:max-content;padding:3px 7px;border-radius:5px;background:#e8f2ff;color:#15508c;font-size:11px;font-weight:850}
.cart-config-details{display:grid;gap:6px}
.cart-config-details>div{display:grid;grid-template-columns:62px minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:start}
.cart-config-details span{grid-row:1/3;color:#64748b;font-size:11px;font-weight:800;text-transform:uppercase}
.cart-config-details b{min-width:0;color:#0b1f3a;font-size:12.5px;line-height:1.45}
.cart-config-details em{color:#52647d;font-size:12px;font-style:normal;font-weight:650;line-height:1.4}
.cart-config-item>.cart-line-total{align-self:center;text-align:right;color:var(--red-600);font-size:14px;white-space:nowrap}
.cart-config-item>.remove-cart{align-self:start}
@media(max-width:760px){.cart-config-item{grid-template-columns:minmax(0,1fr) 30px;gap:8px}.cart-config-item>.cart-line-total{grid-column:1;text-align:right;margin-top:2px}.cart-config-item>.remove-cart{grid-column:2;grid-row:1}.cart-config-details>div{grid-template-columns:54px minmax(0,1fr)}}


/* v9.7.8.40.10 - grouped custom cable, strand quantity and collapsible details */
.cart-config-qty{display:flex;align-items:center;gap:7px;width:max-content;margin-top:2px;color:#52647d;font-size:12px;font-weight:700}
.cart-config-qty>span{margin-right:2px}
.cart-config-qty button{width:28px;height:28px;border:1px solid var(--line-200);border-radius:5px;background:#fff;color:#0b1f3a;font-size:17px;font-weight:800;line-height:1;cursor:pointer}
.cart-config-qty button:hover{background:#f3f7fb}
.cart-config-qty b{min-width:48px;text-align:center;color:#0b1f3a;font-size:12.5px}
.cart-config-collapse{margin-top:2px}
.cart-config-collapse summary{width:max-content;cursor:pointer;color:#15508c;font-size:12.5px;font-weight:800;user-select:none}
.cart-config-collapse[open] summary{margin-bottom:7px}
.cart-config-collapse summary::marker{color:#15508c}
@media(max-width:760px){.cart-config-qty{flex-wrap:wrap}.cart-config-collapse summary{font-size:12px}}

/* V9.7.8.41.4 — Mobile header + drawer menu */
.mobile-drawer-head,.mobile-primary-links,.mobile-menu-section-title,.mobile-menu-overlay{display:none}

@media (max-width:920px){
  .site-header{background:#fff;backdrop-filter:none}
  .header-main{
    grid-template-columns:44px minmax(0,1fr) auto!important;
    min-height:68px!important;
    gap:8px!important;
    padding-top:7px;
    padding-bottom:7px;
  }
  .header-main>.mobile-menu-button{
    display:grid!important;
    place-items:center;
    align-content:center;
    gap:0;
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px;
    padding:0;
    border:1px solid #dfe5ee;
    border-radius:8px;
    background:#fff;
    color:var(--navy-950);
    box-shadow:none;
  }
  .mobile-menu-icon{font-size:23px;line-height:1}
  .mobile-menu-text{display:none}
  .brand{min-width:0;gap:8px}
  .brand img{width:46px!important;height:46px!important;flex:0 0 46px}
  .brand-copy{min-width:0}
  .brand-copy strong{font-size:15px!important;white-space:nowrap}
  .brand-copy span{font-size:10px}
  .header-actions{gap:0!important}
  .header-action{min-width:44px!important;width:44px;height:44px!important;border-radius:8px}
  .header-action .action-icon{font-size:20px}
  #wishlistButton{display:none}
  .search-area{grid-column:1/-1!important;order:3;margin:0!important;padding-top:2px}
  .search-wrap{min-height:43px;border-radius:8px}
  .search-wrap input{min-width:0;font-size:13px}
  .search-wrap button{min-width:76px!important;padding-inline:10px;font-size:11px!important}

  .main-nav{height:0!important;min-height:0!important;border:0!important;overflow:visible;background:transparent}
  .nav-inner{min-height:0!important;height:0!important}

  .mobile-menu-overlay{
    display:block;
    position:fixed;
    inset:0;
    z-index:398;
    background:rgba(3,14,37,.48);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease,visibility .2s ease;
  }
  .mobile-menu-overlay.open{opacity:1;visibility:visible}
  .nav-menu{
    position:fixed!important;
    inset:0 auto 0 0!important;
    z-index:400!important;
    width:min(360px,88vw)!important;
    max-width:none!important;
    max-height:100dvh!important;
    display:block!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    padding:0 0 24px!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:18px 0 45px rgba(7,23,62,.2)!important;
    transform:translateX(-104%);
    transition:transform .24s ease!important;
    visibility:hidden;
  }
  .nav-menu.open{transform:translateX(0);visibility:visible}
  body.mobile-menu-open{overflow:hidden}

  .mobile-drawer-head{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:68px;
    padding:12px 16px;
    border-bottom:1px solid #e8edf4;
    background:#fff;
  }
  .mobile-drawer-head div{display:grid;gap:2px}
  .mobile-drawer-head strong{color:var(--navy-950);font-size:16px}
  .mobile-drawer-head span{color:var(--muted-700);font-size:11px}
  .mobile-drawer-head button{
    width:38px;height:38px;border:0;border-radius:8px;background:#f3f6fa;color:var(--navy-950);font-size:25px;line-height:1
  }
  .mobile-primary-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 14px 10px}
  .mobile-primary-links a{
    min-height:40px;display:flex;align-items:center;padding:0 12px;border:1px solid #e3e8f0;border-radius:8px;background:#fff;color:var(--navy-950);font-size:13px;font-weight:700;text-decoration:none
  }
  .mobile-menu-section-title{display:block;padding:10px 16px 7px;color:#728097;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}

  .nav-item{display:block!important;margin:0 10px;border-bottom:1px solid #eef2f6}
  .nav-link,.nav-trigger{
    width:100%!important;min-height:50px!important;padding:0 8px!important;border-radius:0!important;justify-content:space-between!important;color:var(--navy-950)!important;background:#fff!important;font-size:15px!important;font-weight:700!important;text-align:left!important
  }
  .nav-item.open>.nav-trigger{color:var(--navy-800)!important}
  .nav-caret{font-size:14px!important}
  .nav-item.open>.nav-trigger .nav-caret{transform:rotate(180deg)}
  .mega-menu,.dropdown-menu{
    position:static!important;width:100%!important;min-width:0!important;display:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;padding:0 0 8px!important;border:0!important;background:#fff!important;box-shadow:none!important
  }
  .nav-item.open>.mega-menu,.nav-item.open>.dropdown-menu{display:block!important}
  .dropdown-panel,.mega-panel,.product-nav-dropdown-panel,.premium-submenu-panel{
    width:100%!important;display:block!important;padding:4px 0 8px 12px!important;border:0!important;border-radius:0!important;background:#f8faff!important;box-shadow:none!important
  }
  .brand-dropdown-grid{grid-template-columns:1fr 1fr!important;gap:4px!important;padding:7px!important}
  .mega-links,.premium-submenu-rich-grid{display:grid!important;grid-template-columns:1fr!important;gap:2px!important}
  .mega-link,.dropdown-link,.brand-menu-link{
    min-height:42px!important;display:flex!important;align-items:center!important;padding:9px 10px!important;border-radius:7px!important;color:#24324d!important;background:transparent!important;font-size:13px!important;line-height:1.35!important
  }
  .dropdown-link{align-items:flex-start!important;flex-direction:column!important}
  .dropdown-link small{margin-top:3px;color:#728097;font-size:11px!important}
  .nav-cta{margin:10px 14px!important}
}

@media (max-width:680px){
  .topbar{display:none!important}
  .header-main{padding-top:6px;padding-bottom:8px}
  .brand-copy span{display:none!important}
  .brand-copy strong{font-size:14px!important}
}

/* V9.7.8.41.7 — Responsive brand slider: no crop desktop, white arrows, hidden on mobile */
.brand-visual-slider{
  position:relative!important;
  width:min(1920px,calc(100% - 12px))!important;
  aspect-ratio:1920 / 650!important;
  height:auto!important;
  min-height:0!important;
  margin:8px auto 0!important;
  overflow:hidden!important;
  background:transparent!important;
  border-radius:5px!important;
  box-shadow:none!important;
}
.brand-visual-slider .promo-track,
.brand-visual-slider .promo-slide{
  position:absolute!important;
  inset:0!important;
}
.brand-visual-slider .promo-slide{
  display:block!important;
  padding:0!important;
  background:transparent!important;
}
.brand-visual-slider .slide-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
  border:0!important;
}
.brand-visual-slider .slide-image-mobile{display:none!important}
.brand-visual-slider .promo-control{
  position:absolute!important;
  top:50%!important;
  z-index:8!important;
  transform:translateY(-50%)!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:0 4px!important;
  border:0!important;
  border-radius:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  background:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  outline:none!important;
  text-decoration:none!important;
  color:rgba(255,255,255,.96)!important;
  font-family:Arial,sans-serif!important;
  font-size:54px!important;
  font-weight:300!important;
  line-height:.8!important;
  text-shadow:0 2px 8px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.3)!important;
  cursor:pointer!important;
  opacity:.92!important;
  transition:opacity .18s ease,color .18s ease,transform .18s ease!important;
}
.brand-visual-slider .promo-control::before,
.brand-visual-slider .promo-control::after{display:none!important;content:none!important}
.brand-visual-slider .promo-control:hover{
  opacity:1!important;
  color:#ffffff!important;
  background:none!important;
  transform:translateY(-50%) scale(1.06)!important;
}
.brand-visual-slider .promo-control.prev{left:10px!important}
.brand-visual-slider .promo-control.next{right:10px!important}
.brand-visual-slider .promo-dots{
  position:absolute!important;
  left:50%!important;
  bottom:10px!important;
  z-index:8!important;
  display:flex!important;
  gap:5px!important;
  transform:translateX(-50%)!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.brand-visual-slider .promo-dots button{
  width:6px!important;
  height:6px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.55)!important;
  box-shadow:none!important;
}
.brand-visual-slider .promo-dots button.active{
  width:18px!important;
  background:#ffd51a!important;
}
@media (max-width:767px){
  .brand-visual-slider{
    width:calc(100% - 10px)!important;
    aspect-ratio:1672 / 941!important;
    margin-top:5px!important;
  }
  .brand-visual-slider .slide-image-desktop{display:none!important}
  .brand-visual-slider .slide-image-mobile{display:block!important}
  .brand-visual-slider .promo-control{display:none!important}
  .brand-visual-slider .promo-dots{bottom:8px!important;gap:5px!important}
  .brand-visual-slider .promo-dots button{width:5px!important;height:5px!important;background:rgba(255,255,255,.5)!important}
  .brand-visual-slider .promo-dots button.active{width:16px!important}
}


/* V9.7.8.41.8 — Clean image arrows + destructive admin actions */
.brand-visual-slider .promo-control{
  width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;
  padding:0 3px!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;
  color:#fff!important;text-shadow:0 2px 8px rgba(0,0,0,.75)!important;
}
.product-gallery-arrow{
  width:30px!important;height:46px!important;min-width:0!important;padding:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;backdrop-filter:none!important;color:#fff!important;
  text-shadow:0 2px 7px rgba(0,0,0,.75)!important;
}
.product-gallery-arrow:hover{
  border:0!important;background:transparent!important;color:#fff!important;
  box-shadow:none!important;transform:translateY(-50%) scale(1.08)!important;
}
.product-gallery-arrow svg{width:28px!important;height:28px!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.order-row-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.order-delete-button,.movement-delete{
  min-height:32px;padding:0 9px;border:1px solid #efc7cd!important;border-radius:5px!important;
  background:#fff7f8!important;color:#a0212e!important;font-weight:800!important;cursor:pointer;
}
.order-delete-button:hover,.movement-delete:hover{background:#fdebed!important;border-color:#d98f99!important}
.order-delete-button:disabled,.movement-delete:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:767px){
  .brand-visual-slider .promo-control{display:none!important}
  .product-gallery-arrow{width:26px!important;height:40px!important}
}

/* v9.7.8.41.21 - product detail/mobile compact polish */
.combo-item>div{display:grid;gap:4px;min-width:0}
.combo-item strong,.combo-item small{display:block}
.combo-item strong{line-height:1.45}
.combo-item small{margin-top:1px;line-height:1.3}

@media (max-width: 640px){
  .detail-actions{
    grid-template-columns:82px minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  .detail-actions .qty-input{
    grid-template-columns:28px minmax(0,1fr) 28px!important;
    max-width:82px!important;
    min-height:42px!important;
    align-self:stretch!important;
  }
  .detail-actions .qty-input button{
    font-size:18px!important;
    font-weight:800!important;
  }
  .detail-actions .qty-input input{
    font-size:14px!important;
    font-weight:800!important;
    padding:0!important;
  }
  .detail-actions .btn{
    min-height:42px!important;
    padding:0 10px!important;
    font-size:11px!important;
    white-space:nowrap!important;
  }
}

@media (max-width: 400px){
  .detail-actions{
    grid-template-columns:76px 1fr 1fr!important;
    gap:7px!important;
  }
  .detail-actions .qty-input{max-width:76px!important;grid-template-columns:26px minmax(0,1fr) 26px!important}
  .detail-actions .btn{font-size:10.5px!important;padding:0 8px!important}
}

/* v9.7.8.41.23 - header icon + direct order tracking menu */
.header-action .action-icon{display:grid;place-items:center;width:24px;height:24px}
.header-action .action-icon svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.main-nav .nav-item-direct .nav-link{height:100%;display:flex;align-items:center;white-space:nowrap}
@media(max-width:1100px){
  .main-nav .nav-item-direct{display:block!important}
  .main-nav .nav-item-direct .nav-link{width:100%;min-height:43px;height:auto;justify-content:space-between}
}