/* NVT Theme - header/footer mới (mọi trang) + trang chủ. Thiết kế đã duyệt qua mock-up; font Inter, rộng 1320px, bo góc 10px. */
[hidden] { display: none !important; }

/* Bố cục: nền v1 (nền xám xanh nhạt, thẻ trắng bo góc, dải xanh đậm cho PC theo ngân sách), sắp xếp mục theo trang gốc. Mỗi nhóm hàng là một hàng gồm ô tiêu đề xanh bên trái + 5 thẻ sản phẩm. Tông màu lấy từ #006eb5 của site. */
:root {
  --bg: #f2f5f8; --surface: #ffffff; --soft: #f6f8fa; --ink: #0d1b2a; --text: #3c4b5a; --muted: #6b7a89; --line: #e1e7ed; --line-soft: color-mix(in srgb, var(--line) 45%, transparent);
  --brand: #006eb5; --brand-ink: #004f82; --brand-deep: #06335a; --brand-soft: #e6f2fa; --sale: #d7291f; --ok: #1a8f4f;
  --band: #08233b; --band-ink: #eaf3fb; --band-muted: #9db6ca;
  --shadow: 0 1px 2px rgba(13,27,42,.05), 0 10px 28px rgba(13,27,42,.09);
  --f-body: Inter, "Segoe UI", Roboto, Arial, sans-serif; --f-disp: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light; --r: 10px; --wrap: 1320px; --tile: #fafafa; --blend: normal; --h2: clamp(19px, 1.65vw, 23px);
}


/* Chỉ áp cho trang chủ + header/footer mới (độ ưu tiên 0 nhờ :where) để không ảnh hưởng nội dung các trang khác. */
:where(.nvt-home, .util, .hdr, .drawer, .f1, .mega) *, :where(.nvt-home, .util, .hdr, .drawer, .f1, .mega) *::before, :where(.nvt-home, .util, .hdr, .drawer, .f1, .mega) *::after { box-sizing: border-box; }
body.nvt-site { overflow-x: clip; }
body.nvt-home { margin: 0; font: 400 15px/1.6 var(--f-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
:where(.nvt-home, .util, .hdr, .drawer, .f1, .cfloat) a { color: inherit; text-decoration: none; }
:where(.nvt-home, .util, .hdr, .drawer, .f1) img { display: block; max-width: 100%; height: auto; }
:where(.nvt-home, .util, .hdr, .drawer, .f1) button { font: inherit; color: inherit; cursor: pointer; }
:where(.nvt-home, .util, .hdr, .drawer, .f1) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.nvt-home, .util, .hdr, .drawer, .f1) :focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sec { padding-top: 44px; }

/* tiêu đề mục: chữ lớn + đường kẻ + liên kết */
.lu { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.sh h2 { margin: 0; font: 800 var(--h2)/1.15 var(--f-disp); letter-spacing: -.005em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.sh i { display: block; flex: 1; height: 1px; min-width: 24px; background: var(--line); position: relative; }
.sh i, .ah-line, .hl { overflow-x: clip; overflow-y: visible; container-type: inline-size; }
.sh i::before, .sh i::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.sh i::before { left: 0; } .sh i::after { right: 0; }
.sh i s { position: absolute; top: -4px; left: 0; width: 96px; height: 9px; border-radius: 0; background: linear-gradient(90deg, transparent, var(--brand) 38%, #8fd0ff 62%, transparent) center / 100% 3px no-repeat, radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--brand) 38%, transparent), transparent 72%); animation: none; will-change: transform; transform: translate3d(calc((100cqw - 96px) * var(--p, 0)), 0, 0); }
/* đường kẻ dưới tiêu đề của mục không dùng .sh */
.hl { position: relative; height: 1px; background: rgba(255,255,255,.3); margin: -6px 0 22px; }
.hl::before, .hl::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.hl::before { left: 0; } .hl::after { right: 0; }
.hl s { position: absolute; top: -4px; left: 0; width: 96px; height: 9px; border-radius: 0; background: linear-gradient(90deg, transparent, #fff 40%, #bfe6ff 60%, transparent) center / 100% 3px no-repeat, radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,.42), transparent 72%); will-change: transform; animation: sweep 2.8s ease-in-out infinite alternate; }
.hl.dk { background: var(--line); margin: 0 0 22px; max-width: 520px; }
.hl.dk::before, .hl.dk::after { background: var(--brand); }
.hl.dk s { animation: none; transform: translate3d(calc((100cqw - 96px) * var(--p, 0)), 0, 0); background: linear-gradient(90deg, transparent, var(--brand) 38%, #8fd0ff 62%, transparent) center / 100% 3px no-repeat, radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--brand) 38%, transparent), transparent 72%); }
.sh a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--brand); white-space: nowrap; }
.sh a:hover { text-decoration: underline; }

/* thanh tiện ích + header */
.util { background: var(--brand); color: rgba(255,255,255,.88); font-size: 13px; }
.util .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; min-height: 40px; flex-wrap: nowrap; padding-block: 0; }
.util-run { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.util-t { display: flex; width: max-content; will-change: transform; animation: utilrun 64s linear infinite; }
.util-t > span { flex: none; padding-right: 56px; }
@keyframes utilrun { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .util-t { animation: none; } }
.util a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.util ul { display: flex; gap: 20px; }
.util b { color: #fff; font-weight: 700; }
.hdr { position: relative; z-index: 40; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.hdr-main { display: grid; grid-template-columns: auto minmax(240px, 1fr) auto auto auto; align-items: center; gap: 14px 16px; padding-block: 14px; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo img { width: 68px; height: 68px; object-fit: contain; }
.logo span { font: 800 15px/1 var(--f-disp); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; color: var(--ink); }
.logo small { display: block; margin-top: 3px; font: 500 11px/1.2 var(--f-body); letter-spacing: .14em; color: var(--muted); }
form.search { position: relative; width: 100%; }
form.search input { width: 100%; height: 44px; padding: 0 52px 0 16px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--soft); color: var(--ink); font: 400 13.5px var(--f-body); outline: 0; transition: border-color .15s, background .15s, box-shadow .15s; }
form.search input::placeholder { color: var(--muted); }
form.search input:focus { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
form.search button { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; }
form.search button:hover { background: var(--brand-ink); }
.ls { position: absolute; left: 0; right: calc(-1 * var(--lsx, 0px)); top: calc(100% + 10px); z-index: 60; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 20px 44px rgba(0,0,0,.22); max-height: 70vh; overflow: auto; }
.ls a { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.ls a:hover, .ls a.on { background: var(--brand-soft); }
.ls img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 10px; border: 1px solid var(--line); }
.ls mark { background: #ffe58a; color: #1a1300; border-radius: 3px; padding: 0 1px; }
.ls .p { display: block; font-weight: 700; color: var(--sale); font-variant-numeric: tabular-nums; }
.ls del { color: var(--muted); font-weight: 400; font-size: 12.5px; margin-right: 6px; }
.ls .empty, .ls .all { padding: 12px; text-align: center; color: var(--muted); font-size: 14px; }
.ls .all { color: var(--brand); font-weight: 600; }
.quick { display: flex; gap: 4px; }
.quick a { position: relative; isolation: isolate; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--brand); border-radius: 10px; background: var(--brand); font-weight: 600; font-size: 13.5px; color: #fff; white-space: nowrap; transition: color .3s ease .05s, box-shadow .2s; }
.quick a::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 9px; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform .38s cubic-bezier(.3, .7, .2, 1); }
.quick a:hover { color: var(--brand-ink); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 22%, transparent); }
.quick a:hover::after { transform: scaleX(1); }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes orbit { to { --ang: 360deg; } }
.quick a.glow:hover::before { opacity: 0; }
.quick a.glow::before { transition: opacity .2s; }
.quick a.glow::before { content: ""; position: absolute; inset: -1px; border-radius: 10px; padding: 2px; pointer-events: none; background: conic-gradient(from var(--ang), transparent 0 68%, rgba(255, 255, 255, .55) 88%, #fff 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: orbit 2.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .quick a.glow::before { display: none; } }
.quick svg { color: #fff; flex: none; width: 20px; height: 20px; transition: color .3s ease .05s; }
.quick a:hover svg { color: var(--brand); }
.hot { justify-self: end; line-height: 1.3; font-size: 12.5px; color: var(--muted); text-align: right; }
.hot b { display: block; font: 800 19px/1.2 var(--f-disp); letter-spacing: -.01em; color: var(--brand); font-variant-numeric: tabular-nums; }
.hot-s { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); font-size: 14px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.hot-s a { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.hot-s a:hover { color: var(--brand); }
.hdr-act { display: flex; align-items: center; gap: 10px; }
.ib { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); transition: border-color .15s, color .15s; }
.ib:hover { border-color: var(--brand); color: var(--brand); }
.ib i { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--sale); color: #fff; font: 700 11px/20px var(--f-body); text-align: center; font-style: normal; }
.burger { display: none; }
.nav { border-top: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: stretch; min-height: 52px; gap: 10px; }
.cat-btn { display: flex; align-items: center; gap: 10px; width: 264px; flex: none; padding: 0 20px; border: 0; background: var(--brand); color: #fff; font: 700 15.5px var(--f-disp); text-transform: uppercase; letter-spacing: .01em; }
.cat-btn:hover { background: var(--brand-ink); }
.nav .wrap > ul { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.nav .wrap > ul > li > a { display: flex; align-items: center; height: 100%; padding: 0 16px; font: 600 15.5px var(--f-body); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; border-bottom: 3px solid transparent; color: var(--ink); transition: color .15s, border-color .15s; }
.nav .wrap > ul > li > a:hover, .nav .wrap > ul > li > a.cur { color: var(--brand); border-bottom-color: var(--brand); }
.nav .wrap > ul > li > a.build { color: var(--sale); }

/* hero */
.hero { padding-top: 18px; }
.hero-grid { display: grid; grid-template-columns: 264px minmax(0, 1fr) 340px; gap: 16px; align-items: stretch; }
.vmenu { display: flex; flex-direction: column; padding: 6px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
.vmenu > li { flex: 1; display: flex; }
.vmenu > li > a { flex: 1; display: grid; grid-template-columns: 30px 1fr 14px; align-items: center; gap: 12px; padding: 4px 12px; border-radius: 10px; font-size: 14px; line-height: 1.3; color: var(--ink); transition: background .15s, color .15s; }
.vmenu > li > a:hover { background: var(--brand-soft); color: var(--brand-ink); }
/* Cầu nối vô hình qua khe 6px giữa dòng menu và bảng con: chuột đi ngang không làm bảng con tắt giữa chừng */
@media (min-width: 901px) { .vmenu > .has-mega > a { position: relative; } .vmenu > .has-mega > a::after { content: ""; position: absolute; top: 0; bottom: 0; right: -10px; width: 12px; } }
.vmenu .vm-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); transition: background .15s, color .15s; }
.vmenu > li > a:hover .vm-ic { background: var(--brand); color: #fff; }
.vmenu .vm-ch { color: var(--muted); }
.hero-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hero-main .slider { flex: none; aspect-ratio: 1000 / 833; }
.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.thumbs button { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--soft); aspect-ratio: 16 / 9; opacity: .6; box-shadow: 0 0 0 1px var(--line); transition: opacity .2s, box-shadow .2s, transform .2s; }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button:hover { opacity: .95; }
.thumbs button[aria-selected="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--brand); transform: translateY(-2px); }
.thumbs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--brand); transform-origin: left; animation: fill 5.2s linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.slider { position: relative; overflow: hidden; border-radius: var(--r); background: var(--band); box-shadow: var(--shadow); }
.slides { position: absolute; inset: 0; display: flex; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.slide { flex: 0 0 100%; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.sl-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(8,35,59,.6); color: #fff; display: grid; place-items: center; backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s, background .2s; }
.slider:hover .sl-btn, .sl-btn:focus-visible { opacity: 1; }
.sl-btn:hover { background: var(--brand); }
.sl-prev { left: 14px; } .sl-next { right: 14px; }
.dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; padding: 7px 11px; border-radius: 10px; background: rgba(8,35,59,.55); }
.dots button { width: 20px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: rgba(255,255,255,.45); transition: width .25s, background .25s; }
.dots button[aria-current="true"] { width: 36px; background: #fff; }
.tiles { display: grid; gap: 12px; align-content: start; }
.tile { position: relative; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow); background: var(--surface); }
.tile img { width: 100%; aspect-ratio: 460 / 259; object-fit: cover; transition: transform .5s; }
.tile { transition: transform .25s, box-shadow .25s; }
.tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(13,27,42,.28); }
.tile:hover img { transform: scale(1.06); }
.tile:hover::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } .tile::after { display: none; } }

/* cam kết */
.trust { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
.trust div { display: flex; gap: 14px; align-items: center; padding: 18px 22px; }
.trust div + div { border-left: 1px solid var(--line); }
.trust svg { flex: none; width: 34px; height: 34px; color: var(--brand); stroke-width: 1.6; }
.trust b { display: block; color: var(--ink); font-size: 14.5px; line-height: 1.3; font-weight: 600; }
.trust span { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* thẻ sản phẩm */
.card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 35%, var(--line)), var(--shadow); transform: translateY(-3px); }
.badge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 2px 8px; border-radius: 6px; background: var(--sale); color: #fff; font: 700 12.5px/1.5 var(--f-body); font-variant-numeric: tabular-nums; }
.card .im { display: grid; place-items: center; aspect-ratio: 1; padding: 18px; background: #fff; }
.card .im img { max-height: 100%; width: auto; object-fit: contain; transition: transform .35s; }
.card:hover .im img { transform: scale(1.05); }
.card .tx { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.card .ct { font: 600 10.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card h3 { margin: 0; font: 500 14px/1.4 var(--f-body); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.2em; }
.card:hover h3 { color: var(--brand); }
.foot { margin-top: auto; padding-top: 6px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.pr { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; min-width: 0; }
.pr del { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.pr b { font: 700 17px/1.3 var(--f-body); color: var(--sale); letter-spacing: -.01em; }
.add { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--brand-soft); color: var(--brand); transition: background .15s, color .15s; }
.add:hover { background: var(--brand); color: #fff; }
.add.done { background: var(--ok); color: #fff; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px) / 5); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px; margin: -4px; scroll-padding: 0 4px; }
.rail::-webkit-scrollbar { display: none; }
.rail .card { scroll-snap-align: start; }
.arrow { position: absolute; top: 34%; z-index: 3; width: 42px; height: 42px; border-radius: 10px; border: 0; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; color: var(--ink); }
.arrow:hover { background: var(--brand); color: #fff; }
.arrow.l { left: -16px; } .arrow.r { right: -16px; }

/* PC theo ngân sách */
.tA .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 10px; font: 700 14.5px var(--f-body); white-space: nowrap; transition: background .15s, color .15s; }
.tA .btn-b { background: var(--brand); color: #fff; } .tA .btn-b:hover { background: var(--brand-ink); }

/* mục bán chạy: 2 phương án */
.hotA { position: relative; overflow: hidden; padding: 28px; border-radius: var(--r); color: #fff; background:
  radial-gradient(circle at 88% 8%, rgba(255,255,255,.26) 0, rgba(255,255,255,0) 38%),
  radial-gradient(rgba(255,255,255,.2) 1.6px, transparent 1.8px) 0 0 / 22px 22px,
  linear-gradient(125deg, #0a68ad 0%, #1a86d0 55%, #3aa7ee 100%); }
.hotA::before, .hotA::after { content: ""; position: absolute; border-radius: 50%; border: 36px solid rgba(255,255,255,.08); pointer-events: none; }
.hotA::before { width: 360px; height: 360px; right: -110px; top: -170px; }
.hotA::after { width: 260px; height: 260px; left: -90px; bottom: -150px; border-width: 28px; }
.hotA > * { position: relative; z-index: 1; }
.hotA-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.hotA h2 { margin: 0 0 8px; font: 800 var(--h2)/1.15 var(--f-disp); letter-spacing: -.005em; text-transform: uppercase; }
.hotA p { margin: 0; color: rgba(255,255,255,.9); }
.ar-s { display: flex; gap: 8px; flex: none; }
.ar-s button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; display: grid; place-items: center; transition: background .15s, color .15s; }
.ar-s button:hover { background: #fff; color: #0a68ad; }
.hotA .rail { padding: 4px; margin: -4px; }
.rank { position: absolute; z-index: 2; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; min-width: 34px; justify-content: center; padding: 5px 11px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font: 800 13px/1.2 var(--f-body); font-variant-numeric: tabular-nums; pointer-events: none; }
.rank.r1, .rank.r2, .rank.r3 { gap: 6px; padding: 7px 14px 7px 11px; font-size: 16px; box-shadow: 0 6px 14px rgba(13,27,42,.22), inset 0 1px 0 rgba(255,255,255,.55); }
.rank.r1 { background: linear-gradient(135deg, #ffe27a, #f2a900); color: #5b3b00; }
.rank.r2 { background: linear-gradient(135deg, #f2f5f9, #b4bfcc); color: #2f3b49; }
.rank.r3 { background: linear-gradient(135deg, #f6c39f, #cc7d47); color: #4a2410; }
.rank svg { width: 18px; height: 18px; }
.card.top { --rk: #f2a900; box-shadow: 0 0 0 2px var(--rk), 0 14px 30px color-mix(in srgb, var(--rk) 45%, transparent); }
.card.top.r2 { --rk: #aab6c4; }
.card.top.r3 { --rk: #cc7d47; }
.card.top::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--rk), color-mix(in srgb, var(--rk) 35%, #fff)); border-radius: 10px 10px 0 0; }
.bgA { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.bgA-l { padding: 36px 40px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(160deg, var(--brand-soft) 0%, var(--surface) 75%); }
.bgA-k { font: 700 13px/1.4 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); }
.bgA-num { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 22px; line-height: .95; }
.bgA-num b { font: 800 clamp(84px, 9vw, 132px)/.9 var(--f-disp); letter-spacing: -.05em; color: var(--brand); font-variant-numeric: tabular-nums; min-width: 1.1ch; }
.bgA-num span { font: 700 28px var(--f-disp); color: var(--ink); letter-spacing: -.01em; }
.rg-wrap { position: relative; padding: 6px 0 34px; }
.rg { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 10px; border-radius: 10px; outline: 0; cursor: pointer; background: linear-gradient(90deg, var(--brand) var(--p, 33%), var(--line) var(--p, 33%)); }
.rg::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 5px solid var(--brand); box-shadow: 0 3px 10px rgba(0,0,0,.25); cursor: grab; }
.rg::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid var(--brand); box-shadow: 0 3px 10px rgba(0,0,0,.25); cursor: grab; }
.rg:focus-visible::-webkit-slider-thumb { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.rg-ticks { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 20px; }
.rg-ticks span { position: absolute; transform: translateX(-50%); font: 500 12px var(--f-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.bgA-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bgA-chips button { padding: 8px 16px; border: 0; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font: 600 13.5px var(--f-body); color: var(--ink); transition: box-shadow .15s, background .15s, color .15s; }
.bgA-chips button:hover { box-shadow: 0 0 0 1px var(--brand); color: var(--brand); }
.bgA-chips button.on { background: var(--brand); color: #fff; box-shadow: none; }
.bgA-r { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 28px 28px 24px; background: var(--surface); border-left: 1px solid var(--line); }
.bgA-rh { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bgA-rh b { display: block; font: 800 20px/1.3 var(--f-disp); letter-spacing: -.01em; color: var(--ink); }
.bgA-rh span { font-size: 13px; color: var(--muted); }
.ar-s2 { display: flex; gap: 8px; flex: none; }
.ar-s2 button { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink); display: grid; place-items: center; transition: background .15s, color .15s; }
.ar-s2 button:hover { background: var(--brand); color: #fff; }
@keyframes bgin { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* thẻ PC ngang gọn, 2 hàng, trượt ngang */
.pcrail { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: calc((100% - 14px) / 2); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px; margin: -4px; scroll-padding: 0 4px; align-content: start; }
.pcrail::-webkit-scrollbar { display: none; }
.pch { position: relative; scroll-snap-align: start; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px; min-width: 0; height: 144px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; animation: bgin .3s ease; }
.pch:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 45%, var(--line)), var(--shadow); }
.pch .im { display: block; width: 112px; height: 112px; border-radius: 8px; overflow: hidden; background: #fff; align-self: center; }
.pch .im img { width: 100%; height: 100%; object-fit: cover; }
.pch .tx { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.pch .flag { align-self: flex-start; padding: 0 8px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-ink); font: 700 11px/1.7 var(--f-body); }
.pch h3 { margin: 0; font: 600 14px/1.35 var(--f-body); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pch .sp { font-size: 12.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pch .pz { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.pch .pz b { font: 800 17px/1.2 var(--f-body); letter-spacing: -.02em; color: var(--sale); }
.pch .pz del { font-size: 12px; color: var(--muted); }
.pch:hover h3 { color: var(--brand); }
.bgA-note { margin: 14px 0 0; font-size: 14px; color: var(--text); }
/* thẻ sản phẩm gọn cho mục theo danh mục */
/* mục theo danh mục (làm lại, nền sáng, gọn và nổi bật) */
#budget { padding-bottom: 48px; }
/* tiêu đề - đường kẻ có vệt sáng chạy - nút xem tất cả */
.ah { gap: 18px; }
.ah-line { display: block; flex: 1; height: 1px; min-width: 24px; background: linear-gradient(90deg, var(--line), var(--line)); position: relative; }
.ah-line::before, .ah-line::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.ah-line::before { left: 0; } .ah-line::after { right: 0; }
.ah-line s { position: absolute; top: -4px; left: 0; width: 96px; height: 9px; border-radius: 0; background: linear-gradient(90deg, transparent, var(--brand) 38%, #8fd0ff 62%, transparent) center / 100% 3px no-repeat, radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--brand) 38%, transparent), transparent 72%); animation: none; will-change: transform; transform: translate3d(calc((100cqw - 96px) * var(--p, 0)), 0, 0); }
@keyframes sweep { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(100cqw - 96px), 0, 0); } }
.ah .more { background: var(--surface); }
.ah .more:hover { background: var(--brand); }
.band { padding: 56px 0; }
.band.alt.nb { box-shadow: inset 0 1px 0 var(--line-soft); }
.band.alt + .band.alt { padding-top: 0; box-shadow: inset 0 -1px 0 var(--line-soft); }
.band.alt { background: var(--surface); box-shadow: inset 0 1px 0 var(--line-soft), inset 0 -1px 0 var(--line-soft); }
.ah { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.ah-t { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.ah h2 { margin: 0; font: 800 var(--h2)/1.15 var(--f-disp); letter-spacing: -.005em; text-transform: uppercase; color: var(--ink); }
.ah .cnt { padding: 3px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); font: 700 12.5px/1.6 var(--f-body); white-space: nowrap; }
.ah .more { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 10px; box-shadow: 0 0 0 1.5px var(--brand); color: var(--brand); font: 700 13.5px var(--f-body); white-space: nowrap; transition: background .15s, color .15s; }
.ah .more:hover { background: var(--brand); color: #fff; }
.a5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 18px; }
.at { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.at-im { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; background: var(--tile); overflow: hidden; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s; }
.at-im .ia { display: grid; place-items: center; width: 100%; height: 100%; padding: 16px; }
.at-im img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: var(--blend); transition: transform .35s; }
.at:hover .at-im { box-shadow: 0 0 0 2px var(--brand); }
.at:hover h3 a { color: var(--brand); }
.at:hover .at-im img { transform: scale(1.06); }
.at .tag2 { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 1px 9px; border-radius: 8px; background: var(--sale); color: #fff; font: 700 12.5px/1.6 var(--f-body); font-variant-numeric: tabular-nums; }
/* thẻ sản phẩm (bản mới) */
.at { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 10px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.at:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--brand), 0 14px 30px rgba(13,27,42,.14); }
.at-im { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; background: var(--tile); overflow: hidden; box-shadow: none; }
.at:hover .at-im { box-shadow: none; }
.at-tx { display: flex; flex-direction: column; gap: 7px; padding: 12px 4px 4px; flex: 1; }
.at-st { font: 600 11.5px/1 var(--f-body); color: var(--ok); }
.at-st::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }
.at-tx h3 { margin: 0; font: 600 14px/1.4 var(--f-body); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.at-tx .pp { margin-top: auto; padding-top: 2px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.at-tx .pp del { font-size: 12.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; min-height: 1.3em; }
.at-tx .pp b { font: 800 18px/1.3 var(--f-body); letter-spacing: -.02em; color: var(--sale); white-space: nowrap; }
.addb { margin-top: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: var(--brand-soft); color: var(--brand-ink); font: 700 13px var(--f-body); transition: background .15s, color .15s; }
.addb.done { background: var(--ok); color: #fff; }
/* nhóm hàng: ô tiêu đề + 5 thẻ */
.cs { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 14px; }

/* thu cũ đổi mới */

/* thu cũ đổi mới: vé */
.tA { padding: 56px 0; background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg) 75%); }
.tA-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.tA-l h2 { text-wrap: balance; margin: 0 0 12px; font: 800 var(--h2)/1.15 var(--f-disp); letter-spacing: -.005em; text-transform: uppercase; color: var(--ink); }
.tA-l > p { margin: 0 0 26px; max-width: 46ch; font-size: 15.5px; }
.tl { position: relative; display: grid; gap: 22px; margin: 0 0 30px; padding: 0; list-style: none; counter-reset: s; }
.tl::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--brand) 45%, transparent) 0 6px, transparent 6px 12px); }
.tl li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 56px; counter-increment: s; }
.tl li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font: 800 15px var(--f-disp); box-shadow: 0 0 0 5px var(--brand-soft); }
.tl b { font: 700 16px/1.4 var(--f-body); color: var(--ink); }
.tl span { font-size: 14px; color: var(--text); }
.tA-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tA-cta span { font-size: 13.5px; color: var(--muted); max-width: 30ch; }
.tk-w { filter: drop-shadow(0 0 .6px color-mix(in srgb, var(--ink) 30%, transparent)) drop-shadow(0 16px 26px rgba(13,27,42,.15)); }
.ticket { position: relative; display: flex; flex-direction: column; }
.tk-main { position: relative; background: var(--surface); border-radius: 14px 14px 0 0;
  -webkit-mask: radial-gradient(circle 13px at 0 100%, transparent 12.4px, #000 13px), radial-gradient(circle 13px at 100% 100%, transparent 12.4px, #000 13px); -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 13px at 0 100%, transparent 12.4px, #000 13px), radial-gradient(circle 13px at 100% 100%, transparent 12.4px, #000 13px); mask-composite: intersect; }
.tk-stub { position: relative; background: var(--surface); border-radius: 0 0 14px 14px;
  -webkit-mask: radial-gradient(circle 13px at 0 0, transparent 12.4px, #000 13px), radial-gradient(circle 13px at 100% 0, transparent 12.4px, #000 13px); -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 13px at 0 0, transparent 12.4px, #000 13px), radial-gradient(circle 13px at 100% 0, transparent 12.4px, #000 13px); mask-composite: intersect; }
.tk-stub::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; border-top: 2px dashed color-mix(in srgb, var(--muted) 50%, transparent); }
.tk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 28px 4px; }
.tk-top b { font: 800 15px var(--f-disp); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.tk-top em { padding: 2px 10px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-ink); font: 700 12px/1.6 var(--f-body); font-style: normal; }
.tk-form { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; padding: 12px 28px 26px; }
.tk-form label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 0; }
.tk-form .c3 { grid-column: span 3; } .tk-form .c2 { grid-column: span 2; } .tk-buy { grid-column: 1 / -1; display: grid; gap: 6px; }
.tk-buy .lb { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tk-form select, .tk-form input { width: 100%; height: 42px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--soft); color: var(--ink); font: 500 14px var(--f-body); }
.tk-form select:focus, .tk-form input:focus { border-color: var(--brand); outline: 0; background: var(--surface); }
.srch { position: relative; }
.srch svg { position: absolute; left: 12px; top: 12px; color: var(--muted); pointer-events: none; }
.srch input { padding-left: 38px; }
.pdl { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 232px; overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 36px rgba(13,27,42,.22); }
.pdl li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.pdl li:hover, .pdl li.on { background: var(--brand-soft); }
.pdl img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: #fafafa; }
.pdl span { font-size: 13px; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pdl span em { display: block; font: 700 13px var(--f-body); font-style: normal; color: var(--sale); }
.pdl .empty { display: block; padding: 10px 8px; font-size: 13px; color: var(--muted); cursor: default; }
.pdsel { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--brand-soft); }
.pdsel img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: #fafafa; }
.pdsel span { font-size: 13px; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pdsel b { font: 800 14.5px var(--f-body); color: var(--sale); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-stub { display: grid; gap: 10px; padding: 24px 28px 22px; }
.tk-stub .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tk-stub small { display: block; font-size: 12.5px; color: var(--muted); }
.tk-stub .two b { font: 700 16px var(--f-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-diff { padding: 10px 14px; border-radius: 10px; background: var(--brand-soft); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tk-diff span { font-size: 13.5px; font-weight: 700; color: var(--ok); }
.tk-diff span.pay { color: var(--brand-ink); }
.tk-diff b { font: 800 clamp(24px, 2.6vw, 30px)/1.15 var(--f-disp); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-n { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
/* tin tức */

/* danh mục */
.nchip { display: inline-block; padding: 2px 10px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-ink); font: 700 11.5px/1.6 var(--f-body); letter-spacing: .04em; text-transform: uppercase; }
.ndate { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nA { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; }
.nA-f { position: relative; display: block; min-height: 440px; border-radius: 10px; overflow: hidden; background: #0d1b2a; }
.nA-f img { position: absolute; left: 0; top: 0; width: 100%; height: 58%; object-fit: cover; object-position: center 45%; transform-origin: top center; transition: transform .6s; }
.nA-f:hover img { transform: scale(1.04); }
.nA-f::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64%; background: linear-gradient(180deg, rgba(13,27,42,0) 50%, #0d1b2a 90%); }   /* ảnh bìa nằm nửa trên rồi tan vào nền tối chứa chữ: không đè chữ lên chữ trong ảnh */
.nA-f .tx { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 28px; color: #fff; display: grid; gap: 10px; }
.nA-f .nchip { justify-self: start; background: var(--brand); color: #fff; }
.nA-f .ndate { color: rgba(255,255,255,.8); }
.nA-f h3 { margin: 0; font: 800 clamp(18px, 1.6vw, 22px)/1.3 var(--f-disp); letter-spacing: -.01em; text-wrap: balance; }
.nA-f h3, .nA-f .nexc, .nA-f .ndate, .nA-f .rd { text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.nexc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nA-f .nexc { color: rgba(255,255,255,.86); font-size: 15px; max-width: 62ch; }
.nA-i .nexc { margin-top: 4px; }
.nA-f .rd { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-weight: 700; font-size: 14px; border-bottom: 2px solid rgba(255,255,255,.6); padding-bottom: 1px; }
.nA-l { display: flex; flex-direction: column; background: var(--surface); border-radius: 10px; box-shadow: 0 0 0 1px var(--line); padding: 4px 20px; }
.nA-i { flex: 1; display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; }
.nA-i + .nA-i { border-top: 1px solid var(--line); }
.nA-i img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--tile); }
.nA-i .mt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.nA-i h3 { margin: 0; font: 600 15.5px/1.4 var(--f-body); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nA-i:hover h3 { color: var(--brand); }
.tieremp { padding: 30px; text-align: center; color: var(--muted); background: var(--surface); border-radius: 10px; box-shadow: 0 0 0 1px var(--line); grid-column: 1 / -1; }
.ntabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ntabs button { padding: 8px 16px; border: 0; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font: 600 13.5px var(--f-body); color: var(--ink); transition: background .15s, color .15s, box-shadow .15s; }
.ntabs button:hover { box-shadow: 0 0 0 1px var(--brand); color: var(--brand); }
.ntabs button[aria-selected="true"] { background: var(--brand); color: #fff; box-shadow: none; }
/* đối tác: 2 dòng logo chạy ngang */
#showroom { padding-bottom: 56px; }
.band.pt { padding: 56px 0 52px; }
.band.pt + * { }
.mqs-gap { height: 22px; }
.mq { overflow: hidden; border-top: 1px solid color-mix(in srgb, var(--line) 42%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.mq:last-child { border-bottom: 1px solid color-mix(in srgb, var(--line) 42%, transparent); }
.mq-t { display: flex; width: max-content; animation: mqs 46s linear infinite; }
.mq-t.rev { animation-direction: reverse; animation-duration: 54s; }
.mq:hover .mq-t { animation-play-state: paused; }
.mq.is-off .mq-t, .hotA .hl.is-off s { animation-play-state: paused; }
.mq-t { will-change: transform; }
@keyframes mqs { to { transform: translateX(-33.3333%); } }
.lg { flex: none; display: flex; align-items: center; justify-content: center; width: 176px; height: 80px; position: relative; transition: background .25s; }
.lg::after { content: ""; position: absolute; right: 0; top: 26%; bottom: 26%; width: 1px; background: color-mix(in srgb, var(--line) 55%, transparent); }
.lg img { display: block; object-fit: contain; transition: transform .25s; }
.lg:hover { background: color-mix(in srgb, var(--brand-soft) 55%, transparent); }
.lg:hover img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .mq { overflow-x: auto; -webkit-mask: none; mask: none; } .mq-t { animation: none; } }
@media (max-width: 700px) { .lg { width: 132px; height: 64px; } .lg img { transform: scale(.82); } .band.pt .sh a { display: none; } }
/* showroom: lấy nội dung, ảnh, bản đồ từ site gốc */
.srtabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.srtabs button { display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border: 0; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font: 700 14.5px var(--f-body); color: var(--ink); transition: background .15s, color .15s, box-shadow .15s; }
.srtabs button .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); font: 800 13px var(--f-disp); }
.srtabs button:hover { box-shadow: 0 0 0 1px var(--brand); }
.srtabs button[aria-selected="true"] { background: var(--brand); color: #fff; box-shadow: none; }
.srtabs button[aria-selected="true"] .n { background: #fff; color: var(--brand-deep); }
.srA { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; animation: bgin .3s ease; }
.srmap { position: relative; min-height: 440px; border-radius: 10px; overflow: hidden; background: #e8ecef; box-shadow: 0 0 0 1px var(--line); }
.srmap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.srmap .go { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 10px; background: var(--brand); color: #fff; font: 700 14px var(--f-body); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.srmap .go:hover { background: var(--brand-ink); }
.srmap .cr { position: absolute; right: 8px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.8); font-size: 10.5px; color: #333; }
.srinfo { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line); min-width: 0; }
.srbody { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 24px; }
.srinfo h3 { margin: 0; font: 800 19px/1.3 var(--f-disp); letter-spacing: -.01em; color: var(--ink); text-transform: uppercase; }
.srinfo ul { display: grid; gap: 11px; }
.srinfo li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.srinfo li svg { color: var(--brand); margin-top: 3px; }
.srinfo li b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.srinfo li small { display: block; font-size: 12.5px; color: var(--muted); }
.srfb { position: relative; display: block; overflow: hidden; background: #f0f2f5; }
.srfb img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; transition: transform .5s; }
.srfb:hover img { transform: scale(1.04); }
.srfb span { display: inline-flex; align-items: center; gap: 6px; position: absolute; left: 10px; bottom: 10px; padding: 5px 12px; border-radius: 8px; background: rgba(8,20,32,.8); color: #fff; font: 700 12.5px var(--f-body); }
/* danh mục sản phẩm: ảnh thật, 2 phương án */
.cpB { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cq { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 156px; padding: 18px 18px 16px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, var(--brand-soft), var(--surface) 85%); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.cq:nth-child(4n+2), .cq:nth-child(4n+3) { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 55%, var(--surface)), var(--surface) 85%); }
.cq:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--brand), 0 14px 30px rgba(13,27,42,.14); }
.cq b { position: relative; z-index: 1; display: block; max-width: 60%; font: 800 16px/1.3 var(--f-disp); color: var(--ink); letter-spacing: -.01em; }
.cq .cp-n { position: relative; z-index: 1; display: block; margin-top: 4px; }
.cq img { position: absolute; right: 14px; bottom: 12px; width: 42%; height: 62%; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 6px 8px rgba(13,27,42,.16)); transition: transform .35s; }
.cq:hover img { transform: scale(1.08) rotate(-2deg); }
.cq .go { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--brand); box-shadow: 0 0 0 1px var(--line); transition: background .15s, color .15s; }
.cq:hover .go { background: var(--brand); color: #fff; }
.cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 10px 18px; text-align: center; background: var(--surface); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.cat:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--brand), var(--shadow); }
.cat img { width: 48px; height: 48px; object-fit: contain; }
.cat b { font: 600 14.5px/1.3 var(--f-body); color: var(--ink); text-wrap: balance; }
.cat span { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.room { padding: 26px 28px; background: var(--surface); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); display: grid; gap: 14px; align-content: start; }
.room h3 { margin: 0; font: 800 19px/1.25 var(--f-disp); text-transform: uppercase; letter-spacing: .005em; color: var(--ink); }
.room dl { display: grid; grid-template-columns: 116px 1fr; gap: 8px 14px; margin: 0; font-size: 14.5px; }
.room dt { color: var(--muted); } .room dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

/* chân trang: 2 phương án (chữ là chính, ít khối) */
.f1 { font-size: 14.5px; line-height: 1.6; }
.f1 ul { display: grid; gap: 8px; }
.f1 p { margin: 0; }
.fx-cols { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr 1.1fr; gap: 36px; }
.fx-cols h4 { margin: 0 0 16px; font: 700 13px var(--f-disp); letter-spacing: .1em; text-transform: uppercase; }
.fx-cols dl { margin: 0; display: grid; grid-template-columns: 64px 1fr; gap: 6px 12px; }
.fx-cols dt { opacity: .7; } .fx-cols dd { margin: 0; }
.fx-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fx-brand img { width: 52px; height: 52px; object-fit: contain; }
.fx-brand b { font: 800 15px/1.3 var(--f-disp); text-transform: uppercase; letter-spacing: .01em; }
.fx-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.fx-badges a { display: flex; align-items: center; justify-content: center; width: 126px; height: 50px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.1); transition: box-shadow .2s, transform .2s; }
.fx-badges a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--brand), 0 8px 16px rgba(13,27,42,.1); }
.fx-badges img { display: block; width: 94px; height: auto; max-height: 36px; object-fit: contain; }
.fx-badges a:first-child img { width: 116px; max-height: 44px; }
.fx-line { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
.fx-line a { font-weight: 600; }
.fx-line .sp { flex: 1; }
.fx-bot { font-size: 13px; }
.fx-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(13,27,42,.08); }
.fx-img { position: relative; min-height: 420px; }
.fx-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.fx-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,51,90,0) 55%, rgba(6,51,90,.78) 100%); }
.fx-img figcaption { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 20px; color: #fff; }
.fx-img figcaption b { display: block; font: 800 18px/1.3 var(--f-disp); letter-spacing: -.005em; text-transform: uppercase; }
.fx-img figcaption > span { font-size: 13.5px; opacity: .9; }
.fx-txt { padding: 34px 38px 36px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.fx-txt h2 { margin: 0; font: 800 var(--h2)/1.15 var(--f-disp); letter-spacing: -.005em; text-transform: uppercase; color: var(--ink); }
.pol2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pol2.rows { grid-template-columns: 1fr; gap: 14px; }
.more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 55%, var(--line)); font: 700 13.5px var(--f-body); color: var(--brand); transition: background .2s, color .2s, box-shadow .2s; }
.more svg { transition: transform .2s; }
.more:hover { background: var(--brand); color: #fff; box-shadow: 0 0 0 1px var(--brand); }
.more:hover svg { transform: translateX(3px); }
.pb { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 26px; padding: 20px 26px 20px 22px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .25s, transform .25s; }
.pb:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 45%, var(--line)), 0 14px 28px rgba(13,27,42,.09); }
.pb-n { position: relative; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; background: conic-gradient(from 210deg, var(--brand), color-mix(in srgb, var(--brand) 10%, transparent) 55%, var(--brand)); }
.pb-n::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 30% 22%, var(--surface), var(--brand-soft)); }
.pb-n > * { position: relative; }
.pb-n b { font: 800 38px/1 var(--f-disp); letter-spacing: -.03em; color: var(--brand); }
.pb-n span { font: 700 10.5px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); }
.pb-n svg { color: var(--brand); }
.pb .k { display: block; font: 700 11.5px/1.4 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pb h4 { margin: 2px 0 6px; font: 800 19px/1.3 var(--f-disp); color: var(--ink); }
.pb p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); max-width: 62ch; }
.pb .more { align-self: center; }
.utl { display: flex; align-items: center; gap: 14px; }
.utl h3 { margin: 0; font: 800 14px var(--f-disp); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.utl::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ut { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ut a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font: 600 13.5px/1.35 var(--f-body); color: var(--ink); transition: box-shadow .2s, transform .2s, color .2s; }
.ut a i { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); transition: background .2s, color .2s; }
.ut a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--brand), 0 10px 22px rgba(13,27,42,.1); color: var(--brand); }
.ut a:hover i { background: var(--brand); color: #fff; }
.f1 { padding-top: 40px; }
.f1 .fx-cols { margin-top: 34px; }
/* A: sáng, cổ điển */
.f1 { background: var(--surface); color: var(--text); box-shadow: inset 0 1px 0 var(--line-soft); }
.f1 .fx-cols { padding: 36px 0; border-top: 1px solid var(--line-soft); }
.f1 .fx-cols h4 { color: var(--ink); }
.f1 .fx-brand b, .f1 .fx-cols dd { color: var(--ink); }
.f1 .fx-cols li a { display: inline-flex; align-items: baseline; gap: 6px; }
.f1 .fx-cols li a .lu { align-self: flex-start; margin-top: 5px; color: var(--brand); opacity: .55; transition: transform .2s, opacity .2s; }
.f1 .fx-cols li a:hover .lu { transform: translateX(3px); opacity: 1; }
.f1 .fx-cols a:hover { color: var(--brand); }
.f1 .fx-line { padding: 18px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.f1 .fx-line a { color: var(--ink); } .f1 .fx-line a:hover { color: var(--brand); }
.f1 .fx-bot { background: var(--brand); color: rgba(255,255,255,.88); margin-top: 32px; }
.f1 .fx-bot .wrap { padding-block: 14px; } .f1 .fx-bot b { color: #fff; }
.f1 .fx-bot a { color: #fff; font-weight: 700; }
.f1 .fx-bot a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* B: xanh thương hiệu, chữ lớn */

@media (max-width: 1280px) {
  .hero-grid { grid-template-columns: 240px minmax(0, 1fr); } .tiles { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .vmenu > li { flex: none; } .vmenu > li > a { padding-block: 8px; } .hero-main .slider { flex: none; min-height: 0; aspect-ratio: 1000 / 833; }
  .cat-btn { width: 240px; } .hot { display: none; } .hdr-main { grid-template-columns: auto minmax(220px, 1fr) auto; } .quick { display: none; }
  .rail { grid-auto-columns: calc((100% - 48px) / 4); }
  .cs { grid-template-columns: 1fr; }
  .cats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hdr-main { grid-template-columns: auto 1fr auto; gap: 12px 16px; } .logo span { font-size: 15px; white-space: normal; line-height: 1.1; } form.search { grid-column: 1 / -1; order: 5; max-width: none; } .burger { display: grid; }
  .logo span small { display: none; } .logo img { width: 52px; height: 52px; } .nav { display: none; } .util ul { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 12px; } .vmenu { flex-direction: row; overflow-x: auto; gap: 6px; padding: 0; background: none; box-shadow: none; scrollbar-width: none; }
  .vmenu > li { flex: none; } .vmenu > li > a { grid-template-columns: 24px auto; padding: 8px 14px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); white-space: nowrap; } .vmenu .vm-ch { display: none; } .vmenu img { width: 22px; height: 22px; }
  .slider { aspect-ratio: 1000 / 833; } .sl-btn { display: none; } .thumbs { grid-template-columns: repeat(5, 38%); overflow-x: auto; scrollbar-width: none; } .tiles { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr 1fr; } .trust div + div { border-left: 0; } .trust div:nth-child(even) { border-left: 1px solid var(--line); } .trust div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .rail { grid-auto-columns: calc((100% - 12px) / 2.2); gap: 12px; } .arrow { display: none; }
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .trade { grid-template-columns: 1fr; } .trade .l, .trade .r { padding: 24px; }
  .f1 .cols { grid-template-columns: 1fr 1fr; } .sec { padding-top: 34px; }
  .sh h2 { white-space: normal; }
}
@media (max-width: 520px) {
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .f1 .cols { grid-template-columns: 1fr; } .trust { grid-template-columns: 1fr; } .trust div:nth-child(even) { border-left: 0; } .trust div + div { border-top: 1px solid var(--line); }
   .room dl { grid-template-columns: 94px 1fr; } .sh a { display: none; }
}
@media (max-width: 900px) { .hotA { padding: 20px 14px; }  }
@media (max-width: 1100px) { .bgA { grid-template-columns: 1fr; } .bgA-r { border-left: 0; border-top: 1px solid var(--line); } .pcrail { grid-auto-columns: calc((100% - 14px) / 2); } }
@media (max-width: 700px) { .bgA-l { padding: 24px 20px; } .bgA-r { padding: 20px 14px; } .pcrail { grid-template-rows: auto; grid-auto-columns: 86%; } .ar-s2 { display: none; } }
@media (max-width: 1100px) { .a5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .a5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; } .ah .more { padding: 7px 14px; font-size: 13px; } .band { padding: 40px 0; } }
@media (max-width: 1100px) { .tA-g { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 700px) { .tA { padding: 40px 0; } .tk-top, .tk-form, .tk-stub { padding-left: 16px; padding-right: 16px; } .tk-form .c3, .tk-form .c2 { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .nA { grid-template-columns: 1fr; } .nA-f { min-height: 340px; } }
@media (max-width: 700px) { .nA-i { grid-template-columns: 104px minmax(0, 1fr); } .nA-f { min-height: 300px; } .nA-f .tx { padding: 20px; } .ntabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .ntabs button { flex: none; } }
@media (max-width: 1100px) { .cpB { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cpB { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cq { min-height: 140px; } .cq b { max-width: 64%; font-size: 14.5px; } }
@media (max-width: 1100px) { .srA { grid-template-columns: 1fr; } .srmap { min-height: 320px; } }
@media (max-width: 700px) { .srtabs button { flex: 1; } }
@media (max-width: 1100px) { .fx-cols { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px) { .fx-cols { grid-template-columns: 1fr 1fr; gap: 26px 20px; } .fx-cols > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 460px) { .fx-cols { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .ut { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .fx-top { grid-template-columns: 1fr; } .fx-img { min-height: 280px; } .fx-txt { padding: 24px 20px 26px; } .pol2 { grid-template-columns: 1fr; } .pb { grid-template-columns: 84px minmax(0, 1fr); gap: 16px 18px; padding: 18px; } .pb-n { width: 84px; height: 84px; } .pb-n b { font-size: 30px; } .pb .more { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ut { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 700px) { .logo span { display: none; } .logo img { width: 62px; height: 62px; } .hdr-main { align-items: center; } .hdr-act { gap: 7px; grid-column: 3; justify-self: end; } .hdr-act .ib { width: 48px; height: 48px; } }
.hero-grid { position: relative; }
.mega { position: absolute; z-index: 30; top: 0; bottom: 0; left: 264px; right: 0; padding-left: 16px; opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
.has-mega:hover > .mega, .has-mega:has(> a:focus-visible) > .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.vmenu > .has-mega:hover > a, .vmenu > .has-mega:has(> a:focus-visible) > a { background: var(--brand-soft); color: var(--brand-ink); }
.has-mega:hover .vm-ic { background: var(--brand); color: #fff; }
.mega-in { position: relative; height: 100%; box-sizing: border-box; overflow: hidden; padding: 22px 26px 24px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 24px 48px rgba(13,27,42,.16); }
.mega-hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.mega-hd b { font: 800 var(--h2)/1.15 var(--f-disp); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.mega-hd a { display: inline-flex; align-items: center; gap: 6px; font: 700 13.5px var(--f-body); color: var(--brand); }
.mega-hd a:hover { text-decoration: underline; }
.mega-in { display: flex; flex-direction: column; }
.mega-cols { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega.dense .mg li a { padding-top: 3px; padding-bottom: 3px; font-size: 13.5px; }
.mega.dense .mg h4 { font-size: 13px; }
.mc { display: flex; flex-direction: column; padding: 0 22px; border-left: 1px solid var(--line); }
.mc:first-child { padding-left: 0; border-left: 0; }
.mc:last-child { padding-right: 0; }
.mc .mg + .mg { margin-top: 6px; padding-top: 22px; border-top: 1px dashed var(--line); }
.mega-pic { margin-top: auto; align-self: flex-end; display: block; width: 130px; padding-top: 10px; }
.mega-pic img { display: block; width: 100%; max-height: 120px; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 12px 14px rgba(13,27,42,.22)); transition: transform .35s; }
.mega-pic:hover img { transform: translateY(-4px) scale(1.04); }
.mg { margin: 0; }
.mg h4 { margin: 0 0 12px; display: flex; align-items: center; gap: 9px; font: 800 13.5px/1.3 var(--f-body); letter-spacing: .02em; text-transform: uppercase; color: var(--brand-ink); }
.mg h4::before { content: ""; flex: none; width: 4px; height: 16px; border-radius: 2px; background: var(--brand); }
.mg h4 a:hover { text-decoration: underline; }
.mg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mg li a { position: relative; display: block; padding: 5px 0 5px 14px; font-size: 14px; line-height: 1.4; color: var(--text); transition: color .15s, padding .15s; }
.mg li a::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 35%, var(--line)); transition: background .15s, transform .15s; }
.mg li a:hover { color: var(--brand); padding-left: 18px; }
.mg li a:hover::before { background: var(--brand); transform: scale(1.3); }
.mg.chips ul { display: flex; flex-wrap: wrap; gap: 8px; }
.mg.chips li a { padding: 6px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; font-size: 13px; }
.mg.chips li a::before { display: none; }
.mg.chips li a:hover { padding-left: 12px; background: var(--brand); color: #fff; }
@media (max-width: 1100px) { .mega-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; } .mc:nth-child(odd) { padding-left: 0; border-left: 0; } .mega-pic { display: none; } }
@media (max-width: 900px) { .mega { display: none; } }
/* ---- Section video ---- */
.vid { position: relative; overflow: hidden; padding: 56px 0; background: radial-gradient(circle at 88% 6%, rgba(255,255,255,.95) 0, rgba(255,255,255,0) 40%), radial-gradient(color-mix(in srgb, var(--brand) 24%, transparent) 1.6px, transparent 1.8px) 0 0 / 22px 22px, linear-gradient(125deg, var(--brand-soft) 0%, color-mix(in srgb, var(--brand-soft) 45%, var(--surface)) 55%, var(--surface) 100%); box-shadow: inset 0 1px 0 var(--line-soft), inset 0 -1px 0 var(--line-soft); }
.vid::before, .vid::after { content: ""; position: absolute; border-radius: 50%; border: 36px solid color-mix(in srgb, var(--brand) 7%, transparent); pointer-events: none; }
.vid::before { width: 360px; height: 360px; right: -110px; top: -170px; }
.vid::after { width: 260px; height: 260px; left: -90px; bottom: -150px; border-width: 28px; }
.vid > .wrap { position: relative; z-index: 1; }
.vb { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; color: #fff; font: 700 13.5px var(--f-body); white-space: nowrap; transition: transform .2s, background .2s; }
.vb:hover { transform: translateY(-2px); }
.vb-yt { background: #ff2d2d; } .vb-yt:hover { background: #e01616; }
.vb-tt { background: var(--ink); } .vb-tt:hover { background: var(--brand); }
.vpb { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ff2d2d; color: #fff; transition: transform .25s, box-shadow .25s; }
.vpb svg { fill: currentColor; flex: none; margin: 0 0 0 4px; }
/* Option A: màn hình + điện thoại */
.vA { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.vA-l h2 { text-wrap: balance; margin: 0 0 12px; font: 800 var(--h2)/1.15 var(--f-disp); letter-spacing: -.005em; text-transform: uppercase; color: var(--ink); }
.vA-l .hl { margin-bottom: 28px; }
.vA-n { display: flex; align-items: center; gap: 16px; }
.vA-n b { font: 800 clamp(56px, 6vw, 84px)/1 var(--f-disp); letter-spacing: -.04em; color: var(--brand); }
.vA-n span { font: 700 16px/1.45 var(--f-body); color: var(--ink); }
.vA-l p { margin: 18px 0 24px; font-size: 15px; line-height: 1.7; color: var(--text); max-width: 46ch; }
.vA-b { display: flex; flex-wrap: wrap; gap: 12px; }
.vA-r { position: relative; padding: 0 70px 34px 0; }
.scr { border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 30px 60px rgba(13,27,42,.14); overflow: hidden; }
.scr-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--soft); box-shadow: inset 0 -1px 0 var(--line); }
.scr-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d7dde4; }
.scr-bar i:first-child { background: #ff6159; } .scr-bar i:nth-child(2) { background: #ffbd2e; } .scr-bar i:nth-child(3) { background: #28c940; }
.scr-bar span { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 11.5px; color: var(--muted); }
.scr-st { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--soft); }
.scr-st .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.scr-st::after { content: ""; position: absolute; inset: 0; background: rgba(13,27,42,.18); transition: background .25s; }
.scr-st:hover::after { background: rgba(13,27,42,.06); }
.scr-st .vpb { z-index: 3; position: absolute; left: 50%; top: 50%; z-index: 2; width: 76px; height: 76px; margin: -38px 0 0 -38px; box-shadow: 0 0 0 9px rgba(255,45,45,.18), 0 14px 28px rgba(255,45,45,.35); }
.scr-st:hover .vpb { transform: scale(1.08); }
.scr-ft { display: flex; align-items: center; gap: 12px; padding: 12px 22% 12px 16px; }
.scr-ft .pg { flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; order: 2; } .scr-ft .pg i { display: block; width: 36%; height: 100%; background: #ff2d2d; }
.scr-ft b { order: 1; font: 700 13.5px var(--f-body); color: var(--ink); white-space: nowrap; } .scr-ft em { order: 3; font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ph { position: absolute; right: 0; bottom: 0; width: 25%; min-width: 150px; aspect-ratio: 9 / 18.5; padding: 7px; border-radius: 30px; background: var(--ink); box-shadow: 0 24px 46px rgba(13,27,42,.3); transition: transform .25s; }
.ph:hover { transform: translateY(-6px) rotate(-1.5deg); }
.ph-in { position: relative; display: block; height: 100%; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #1d6fb3 0, rgba(29,111,179,0) 62%), linear-gradient(180deg, #0c3558 0%, #071d33 100%); }
.ph-in::before { content: ""; position: absolute; left: 50%; top: 7px; width: 34%; height: 14px; margin-left: -17%; border-radius: 8px; background: #000; z-index: 2; }
.ph-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ph-in .pl { z-index: 3; position: absolute; left: 50%; bottom: 20%; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: 0 0 0 6px rgba(255,255,255,.18); }
.ph-in .pl svg { fill: currentColor; margin-left: 2px; }
.ph-in em { z-index: 3; position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font: 700 12px var(--f-body); font-style: normal; color: #fff; }
@media (max-width: 900px) { .vid { padding: 40px 0; } .vA { grid-template-columns: 1fr; gap: 28px; } .vA-r { padding-right: 40px; } }
/* ---- Mobile fixes ---- */
.fx-cols dd { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .sh { flex-wrap: wrap; row-gap: 12px; }
  .sh i { order: 3; flex: 0 0 100%; }
  .sh h2 { white-space: normal; }
  .ah { flex-wrap: wrap; row-gap: 12px; }
  .ah-line { order: 3; flex: 0 0 100%; }
  .ah .more { margin-left: auto; }
  .pr b { font-size: 15px; }
  .pb { grid-template-columns: 1fr; justify-items: start; }
  .pb .more { grid-column: auto; }
  .tA-g, .vA { gap: 28px; }
}
@media (max-width: 700px) {
  .cq { min-height: 168px; padding: 16px 14px 14px; }
  .cq b { max-width: 100%; font-size: 14px; }
  .cq .cp-n { max-width: 62%; font-size: 12.5px; line-height: 1.35; }
  .cq img { width: 34%; height: 40%; right: 10px; bottom: 10px; }
  .vA > * { min-width: 0; }
  .vA-n { flex-wrap: wrap; gap: 6px 14px; }
  .vA-n span br { display: none; }
  .vA-n b { font-size: 60px; }
  .vA-r { padding: 0 34px 26px 0; }
  .ph { min-width: 112px; width: 30%; padding: 5px; border-radius: 22px; }
  .ph-in { border-radius: 18px; }
}

/* ---- Nút liên hệ nổi + thanh liên hệ điện thoại (dùng chung với phần còn lại của theme) ---- */
.cfloat { position: fixed; right: 20px; bottom: 60px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.cfloat__item { display: flex; align-items: center; padding: 10px 15px; border-radius: 8px; background: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, .1); text-decoration: none; transition: transform .3s ease; }
.cfloat__item:hover { transform: scale(1.05); }
.cfloat__ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 10px; }
.cfloat__ico svg { width: 100%; height: 100%; }
.cfloat__ico--call { width: 40px; height: 40px; border: 1px solid #e6332e; border-radius: 50%; color: #e6332e; }
.cfloat__txt b { display: block; font-size: 14px; color: #333; } .cfloat__txt span { font-size: 12px; color: #666; }
.quickbar { display: none; }
/* Laptop: chỉ hiện icon, rê chuột vào mới mở rộng đầy đủ. Màn hình lớn (PC) giữ nguyên dạng đầy đủ. */
@media (min-width: 850px) and (max-width: 1600px) {
  .cfloat { align-items: flex-end; }
  .cfloat__item { padding: 8px; overflow: hidden; transition: transform .3s ease, padding .3s ease; }
  .cfloat__ico { margin-right: 0; transition: margin .3s ease; }
  .cfloat__txt { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease, opacity .2s ease; }
  .cfloat__item:hover, .cfloat__item:focus-visible { padding-right: 15px; }
  .cfloat__item:hover .cfloat__ico, .cfloat__item:focus-visible .cfloat__ico { margin-right: 10px; }
  .cfloat__item:hover .cfloat__txt, .cfloat__item:focus-visible .cfloat__txt { max-width: 220px; opacity: 1; }
}
@media (max-width: 849px) {
  .cfloat { display: none; }
  body.nvt-site { padding-bottom: 60px; }
}
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Danh mục sản phẩm dạng thả xuống (các trang ngoài trang chủ) ---- */
.cat-wrap { position: relative; flex: none; width: 264px; display: flex; }
.cat-wrap .cat-btn { width: 100%; }
.catdrop { display: none; position: absolute; z-index: 60; top: 100%; left: 0; width: 264px; padding-top: 10px; }   /* khoảng trong suốt: thẻ menu nổi cách thanh điều hướng như ở trang chủ, rê chuột không bị đứt */
.cat-wrap:hover .catdrop, .cat-wrap:focus-within .catdrop, .cat-wrap.open .catdrop { display: block; }
.catdrop .vmenu { border-radius: var(--r); box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(13,27,42,.18); }
.catdrop .vmenu > li > a { padding-block: 8px; }
.catdrop .vmenu > li { flex: none; }
.catdrop .mega { top: 10px; left: 264px; right: auto; width: calc(min(var(--wrap), 100vw) - 32px - 264px); }
/* nội dung các trang khác nằm trên nền trắng, chiều rộng thống nhất với header */
body.nvt-site:not(.nvt-home) .site-main { background: #fff; }

/* ================= Giao diện điện thoại (28/10/2026) ================= */
/* 3 banner bên phải hero: xếp chồng như xấp giấy, lật từng tờ */
@media (max-width: 900px) {
  .tiles { display: block; position: relative; padding-bottom: 26px; max-width: 620px; touch-action: pan-down; overscroll-behavior: contain; margin-inline: auto; width: 100%; }
  .tiles::before { content: ""; display: block; padding-top: 56.304%; }
  .tiles .tile { position: absolute; top: 0; left: 0; right: 0; height: auto; aspect-ratio: 460 / 259; transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.5, .05, .3, 1), opacity .45s ease .3s; will-change: transform, opacity; box-shadow: 0 6px 16px rgba(13,27,42,.2); }
  .tiles .tile img { height: 100%; aspect-ratio: auto; }
  .tiles .tile:hover { transform: none; }
  .tiles .tile[data-p="0"] { z-index: 3; transform: none;  }
  .tiles .tile[data-p="1"] { z-index: 2; transform: translateY(8px) rotate(1.4deg) scale(.95);  }
  .tiles .tile[data-p="2"] { z-index: 1; transform: translateY(14px) rotate(2.8deg) scale(.9);  }
  .tiles .tile[data-p="1"]::before, .tiles .tile[data-p="2"]::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(255,255,255,.28); pointer-events: none; }
  .tiles .tile.flip { transform-origin: 18% 100%; z-index: 4; transform: translate(-78%, 4%) rotate(-26deg); opacity: 0;  }
    .tiles .tile.nt { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .tiles .tile { transition: none; } }

@media (max-width: 700px) {
  /* 1. Top bán chạy: 1 sản phẩm + nửa sản phẩm kế tiếp */
  .rail { grid-auto-columns: calc((100% - 12px) / 1.5); }
  /* 3. Bộ PC trong tầm giá: danh sách gọn 3 mục */
  .pcrail { display: flex; flex-direction: column; gap: 10px; overflow: visible; scroll-snap-type: none; padding: 0; margin: 0; }
  .pcrail .pch { height: auto; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .pcrail .pch:nth-child(n+4) { display: none; }
  .pcrail .pch .im { width: 76px; height: 76px; }
  .pcrail .pch h3 { font-size: 13.5px; -webkit-line-clamp: 2; }
  .pcrail .pch .sp { -webkit-line-clamp: 1; font-size: 12px; }
  .pcrail .pch .flag { font-size: 10.5px; line-height: 1.6; }
  .pcrail .pch .pz { margin-top: 2px; }
  .pcrail .pch .pz b { font-size: 15.5px; }
  .bgA-rh b { font-size: 17px; }
  /* 4. Sản phẩm trong các nhóm hàng: trượt ngang, 1 + nửa thẻ, tràn tới mép màn hình */
  .a5 { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px) / 1.5); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 4px 16px 6px 4px; margin: -4px -16px -6px -4px; scroll-padding: 0 4px; }
  .a5::-webkit-scrollbar { display: none; }
  .a5 .at { scroll-snap-align: start; min-width: 0; }
}

/* ---- Tối ưu hiệu năng điện thoại ---- */
@media (max-width: 900px) {
  .tk-w { filter: drop-shadow(0 0 .6px color-mix(in srgb, var(--ink) 30%, transparent)); }
  .quick a.glow::before { animation: none; display: none; }
  .tile::after { display: none; }
}
@media (hover: none) {
  .tile:hover, .card:hover, .at:hover, .cq:hover, .pch:hover { transform: none; }
  .tile:hover img, .at:hover .at-im img, .cq:hover img { transform: none; }
}
.slides { backface-visibility: hidden; }

/* ---- Điện thoại: ô nhập 16px để iPhone không tự phóng to khi chạm vào (trang đứng yên) ---- */
@media (max-width: 900px) {
  form.search input, .tk-form input, .tk-form select, .srch input, input[type="search"], input[type="number"] { font-size: 16px; }
  form.search input { height: 46px; }
}

/* ---- Điện thoại: tiêu đề section gọn, thoáng hơn ---- */
@media (max-width: 700px) {
  .sh { row-gap: 18px; margin-bottom: 22px; }
  /* Tiêu đề nhóm hàng: dòng 1 tên nhóm; dòng 2 số sản phẩm (trái) + "Xem tất cả" (phải); dòng 3 đường kẻ */
  .ah { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 12px; margin-bottom: 22px; }
  .ah-t { display: contents; }
  .ah h2 { grid-column: 1 / -1; grid-row: 1; font-size: 20px; line-height: 1.2; }
  .ah .cnt { grid-column: 1; grid-row: 2; justify-self: start; padding: 2px 10px; font-size: 12px; }
  .ah .more { grid-column: 2; grid-row: 2; margin: 0; padding: 4px 0; border-radius: 0; box-shadow: none; background: none; font-size: 13.5px; gap: 5px; }
  .ah .more:hover { background: none; color: var(--brand-ink); }
  .ah-line { grid-column: 1 / -1; grid-row: 3; flex: none; margin-top: 8px; }
  .hl.dk { margin-top: 4px; }
}

/* ================= Menu điện thoại (ngăn kéo) ================= */
.drawer { position: fixed; inset: 0; z-index: 9990; }
.dr-ov { position: absolute; inset: 0; background: rgba(8, 20, 32, .55); animation: drfade .25s ease; }
.dr-panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(88vw, 360px); display: flex; flex-direction: column; background: var(--bg); box-shadow: 10px 0 40px rgba(0,0,0,.25); animation: drin .3s cubic-bezier(.2,.8,.2,1); }
@keyframes drin { from { transform: translate3d(-100%, 0, 0); } to { transform: none; } }
@keyframes drfade { from { opacity: 0; } to { opacity: 1; } }
.dr-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 12px 16px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.dr-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dr-brand img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.dr-brand span { display: block; font: 800 14px/1.2 var(--f-disp); text-transform: uppercase; color: var(--ink); letter-spacing: .01em; }
.dr-brand small { display: block; margin-top: 3px; font: 500 11.5px/1.2 var(--f-body); text-transform: none; color: var(--muted); letter-spacing: 0; }
.dr-x { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.dr-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 28px; -webkit-overflow-scrolling: touch; }
.dr-cta { display: grid; gap: 10px; margin-bottom: 14px; }
.dr-call { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(135deg, #0a68ad, #1a86d0); color: #fff !important; box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 30%, transparent); }
.dr-call svg { flex: none; }
.dr-call small { display: block; font: 500 12px/1.2 var(--f-body); opacity: .9; }
.dr-call b { display: block; font: 800 20px/1.2 var(--f-disp); letter-spacing: -.01em; }
.dr-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dr-quick a { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font: 700 13px/1.25 var(--f-body); color: var(--ink); }
.dr-quick svg { color: var(--brand); flex: none; }
.dr-list { display: grid; gap: 2px; padding: 4px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.dr-list a { color: var(--ink); }
.dr-list > li > a, .dr-row > a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 10px; border-radius: 8px; font: 600 14.5px/1.3 var(--f-body); }
.dr-list > li > a.cur { background: var(--brand-soft); color: var(--brand-ink); }
.dr-i { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.dr-list a.cur .dr-i { background: var(--brand); color: #fff; }
.dr-h { display: block; margin: 20px 4px 10px; font: 800 12px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dr-row { display: flex; align-items: center; }
.dr-row > a { flex: 1; min-width: 0; }
.dr-t { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 8px; }
.dr-t svg { transition: transform .2s; }
.has-sub.open .dr-t { color: var(--brand); }
.has-sub.open .dr-t svg { transform: rotate(180deg); }
.has-sub.open { background: color-mix(in srgb, var(--brand-soft) 55%, transparent); border-radius: 10px; }

/* ================= Thanh liên hệ cố định (điện thoại) ================= */
@media (max-width: 849px) {
  .quickbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; display: flex; align-items: stretch; height: calc(62px + env(safe-area-inset-bottom, 0px)); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.97); box-shadow: 0 -1px 0 var(--line), 0 -8px 24px rgba(13,27,42,.1); }
  .quickbar a { flex: 1 1 20%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 10px; color: var(--muted); font: 600 11px/1.1 var(--f-body); text-align: center; -webkit-tap-highlight-color: transparent; }
  .quickbar a:active { background: var(--brand-soft); color: var(--brand); }
  .quickbar a svg { color: var(--brand); }
  .quickbar__t { white-space: nowrap; }
  .quickbar .quickbar__call { color: #fff; }
  .quickbar .quickbar__call .quickbar__t { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -26px; border: 4px solid #fff; border-radius: 50%; background: linear-gradient(135deg, #1faa59, #12873f); box-shadow: 0 6px 16px rgba(18,135,63,.45); }
  .quickbar .quickbar__call svg { color: #fff; fill: currentColor; stroke: none; }
  .quickbar .quickbar__call:active { background: none; }
  body.nvt-site { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}
/* khi đăng nhập quản trị, ngăn kéo nằm dưới thanh admin của WordPress */
body.admin-bar .drawer { top: 46px; }
@media (min-width: 783px) { body.admin-bar .drawer { top: 32px; } }


/* ---- Menu mobile: danh mục con gọn, thẳng hàng ---- */
.dr-t:focus { outline: 0; }
.dr-t:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 60%, transparent); outline-offset: -2px; }
.dr-sub { display: none; margin: 0 8px 8px; padding: 10px 10px 4px; border-top: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line)); }
.has-sub.open .dr-sub { display: block; }
.dr-g { padding-bottom: 12px; }
.dr-g + .dr-g { padding-top: 12px; border-top: 1px dashed var(--line); }
.dr-g > span { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font: 800 11px/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); }
.dr-g > span::before { content: ""; flex: none; width: 3px; height: 11px; border-radius: 2px; background: var(--brand); }
.dr-g p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dr-g p a { padding: 4px 10px; border-radius: 8px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font: 500 12.5px/1.45 var(--f-body); color: var(--text); }
.dr-g p a:active { background: var(--brand); color: #fff; box-shadow: none; }

/* ---- Tin tức trên điện thoại: thẻ nổi bật ảnh trên chữ dưới (không đè chữ lên ảnh), danh sách gọn ---- */
@media (max-width: 700px) {
  .ntabs { gap: 8px; margin: 0 -16px 14px -3px; padding: 3px 16px 4px 3px; }
  .ntabs button { padding: 7px 14px; font-size: 13px; }
  .nA { gap: 14px; }
  .nA-f { min-height: 0; display: flex; flex-direction: column; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
  .nA-f::after { display: none; }
  .nA-f img { position: static; width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .nA-f .tx { position: static; padding: 14px 16px 16px; color: var(--ink); gap: 8px; }
  .nA-f .nchip { background: var(--brand-soft); color: var(--brand-ink); }
  .nA-f h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.005em; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .nA-f .nexc { color: var(--text); font-size: 13.5px; }
  .nA-f .ndate { color: var(--muted); }
  .nA-f .rd { display: none; }
  .nA-l { padding: 2px 14px; }
  .nA-i { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; }
  .nA-i img { aspect-ratio: 1 / 1; }
  .nA-i .nexc { display: none; }
  .nA-i .mt { gap: 8px; margin-bottom: 5px; }
  .nA-i h3 { font-size: 14.5px; line-height: 1.38; -webkit-line-clamp: 3; }
}

/* Nút "Xem tất cả kết quả" trong gợi ý tìm kiếm: không dùng lưới 2 cột của thẻ sản phẩm */
.ls a.all { display: block; grid-template-columns: none; margin-top: 4px; padding: 11px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; text-align: center; }
.ls a.all:hover, .ls a.all.on { background: var(--brand); color: #fff; }

/* Điện thoại: tên nhóm hàng luôn 1 dòng (cỡ chữ co theo bề ngang màn hình), giãn dòng hơn */
@media (max-width: 700px) {
  .ah h2 { white-space: nowrap; }
}

/* Giãn dòng tiêu đề Thu cũ đổi mới / Hành trình giao máy / Showroom và các tiêu đề section khác */
.tA-l h2, .vA-l h2, .sh h2 { line-height: 1.32; }
@media (max-width: 700px) { .tA-l h2, .vA-l h2, .sh h2 { line-height: 1.38; } }

/* Hành trình giao máy (điện thoại): 2 nút YouTube + TikTok nằm dưới cụm ảnh, ngang hàng nhau */
@media (max-width: 900px) {
  .vA { display: flex; flex-direction: column; gap: 0; }
  .vA-l { display: contents; }
  .vA-l p { margin: 16px 0 22px; max-width: none; }
  .vA-r { order: 1; }
  .vA-b { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
  .vA-b .vb { justify-content: center; gap: 6px; padding: 12px 8px; font-size: 13px; min-width: 0; }
}

/* Tab cửa hàng: "Cửa hàng" cùng cỡ chữ với tên khu vực, căn trái */
.srtabs button .stl { text-align: left; }
.srtabs button .stl small { font: inherit; opacity: 1; }
@media (max-width: 700px) {
  .srtabs { flex-wrap: nowrap; gap: 8px; margin-bottom: 14px; }
  .srtabs button { flex: 1 1 0; min-width: 0; gap: 8px; padding: 9px 10px 9px 9px; justify-content: flex-start; font-size: 13.5px; line-height: 1.25; }
  .srtabs button .n { flex: none; width: 26px; height: 26px; font-size: 12px; }
  .srtabs button .stl { display: block; min-width: 0; }
  .srtabs button .stl small { display: inline; margin: 0; }
}

/* ---- "Tự tin mua sắm" trên điện thoại: ảnh thấp, 2 cam kết dạng hàng gọn, 4 tiện ích lưới 2x2 ---- */
@media (max-width: 700px) {
  .fx-top { border-radius: 14px; }
  .fx-img { min-height: 0; height: 400px; }
  .fx-img img { object-position: 50% 20%; }
  .fx-img figcaption { left: 16px; right: 16px; bottom: 14px; }
  .fx-img figcaption b { font-size: 14.5px; }
  .fx-img figcaption > span { font-size: 12.5px; }
  .fx-txt { padding: 18px 14px 18px; gap: 16px; }
  .fx-txt h2 { font-size: 18px; line-height: 1.35; text-wrap: balance; }
  .pol2.rows { gap: 12px; }
  .pb { grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 4px 14px; padding: 14px; }
  .pb-n { width: 76px; height: 76px; gap: 1px; }
  .pb-n::before { inset: 3px; }
  .pb-n b { font-size: 26px; }
  .pb-n span { font-size: 8.5px; letter-spacing: .06em; line-height: 1.15; }
  .pb-n svg { width: 22px; height: 22px; }
  .pb .k { font-size: 10.5px; letter-spacing: .1em; }
  .pb h4 { margin: 1px 0 5px; font-size: 15.5px; line-height: 1.3; }
  .pb p { font-size: 13px; line-height: 1.55; }
  .pb .more { grid-column: 2; justify-self: start; margin-top: 6px; padding: 6px 12px; font-size: 12.5px; }
  .utl h3 { font-size: 12.5px; letter-spacing: .08em; }
}


/* Chữ "CHÍNH HÃNG" / "NGÀY DÙNG THỬ" uốn cong theo vòng tròn huy hiệu; biểu tượng/số nằm giữa, hơi cao hơn */
.pb-n { padding-bottom: 16%; }
.pb-n .arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pb-n .arc text { font: 800 10.5px var(--f-body); letter-spacing: .09em; fill: var(--brand-ink); }
.pb-n b { line-height: .95; }
@media (max-width: 700px) { .pb-n { padding-bottom: 14%; } .pb-n .arc text { font-size: 10.8px; } }

/* ===== Tiêu đề section đồng bộ: cùng thẻ h2, cùng cỡ chữ (--h2), cùng giãn dòng, cùng kiểu chữ ===== */
.sh h2, .ah h2, .hotA h2, .tA-l h2, .vA-l h2, .fx-txt h2 { font-family: var(--f-disp); font-weight: 800; font-size: var(--h2); line-height: 1.32; letter-spacing: -.005em; text-transform: uppercase; }
@media (max-width: 700px) {
  :root { --h2: clamp(15px, 4.7vw, 19px); }
  .sh h2, .ah h2, .hotA h2, .tA-l h2, .vA-l h2, .fx-txt h2 { line-height: 1.38; }
}
/* cụm tên thương hiệu trong tiêu đề luôn đi nguyên cụm: nếu không đủ chỗ thì cả cụm xuống dòng */
.brn { display: inline-block; white-space: nowrap; }
.fx-img figcaption b .brn { font: inherit; opacity: 1; }

/* Nút gọi nổi (máy tính): vòng tròn đỏ đặc, biểu tượng điện thoại trắng nằm gọn giữa vòng */
.cfloat__ico--call { border: 0; background: linear-gradient(135deg, #ee4a3f, #d7291f); color: #fff; box-shadow: none; }
.cfloat__ico--call .lu { width: 20px; height: 20px; fill: currentColor; stroke: none; }

/* Trang trong: mở menu danh mục thì làm mờ phần nội dung phía dưới */
.catov { position: fixed; inset: 0; z-index: 39; background: rgba(8, 20, 32, .5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility .2s; }
body:has(.cat-wrap:hover, .cat-wrap:focus-within, .cat-wrap.open) .catov { opacity: 1; visibility: visible; }

/* ---------- Giỏ hàng nhỏ (rê chuột vào nút giỏ hàng) ---------- */
.hdr-cart { position: relative; }
.hdr-cart::after { content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 16px; }
.mcart { position: absolute; z-index: 80; top: calc(100% + 12px); right: 0; width: 404px; max-width: calc(100vw - 24px); border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 28px 60px rgba(13,27,42,.24); opacity: 0; visibility: hidden; transform: translateY(8px) scale(.985); transform-origin: 90% 0; transition: opacity .18s, transform .18s, visibility .18s; }
.mcart::before { content: ""; position: absolute; top: -6px; right: 17px; width: 12px; height: 12px; background: var(--surface); transform: rotate(45deg); border-radius: 3px 0 0 0; box-shadow: -1px -1px 0 var(--line); }
.hdr-cart.open .mcart { opacity: 1; visibility: visible; transform: none; }
.mcart ul { margin: 0; padding: 0; list-style: none; }
.mcart a { text-decoration: none; }
.mc-hd { display: flex; align-items: center; gap: 12px; padding: 18px 20px 16px; }
.mc-hd > i { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font-style: normal; }
.mc-hd b { flex: 1; font: 800 15px/1.2 var(--f-disp); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.mc-hd span { padding: 3px 11px; border-radius: 999px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); font: 600 12.5px/1.5 var(--f-body); color: var(--text); white-space: nowrap; }
.mc-list { max-height: 330px; overflow-y: auto; overscroll-behavior: contain; margin: 0 20px !important; scrollbar-width: thin; border-top: 1px solid var(--line-soft); }
.mc-it { position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 30px 14px 0; }
.mc-it + .mc-it { border-top: 1px solid var(--line-soft); }
.mc-im { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 10px; background: var(--tile); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.mc-im img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 5px; }
.mc-tx { min-width: 0; display: grid; gap: 6px; }
.mc-nm { font: 600 13.5px/1.4 var(--f-body); color: var(--ink) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc-nm:hover { color: var(--brand) !important; }
.mc-pr { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-pr i { font: 700 12px/1.6 var(--f-body); font-style: normal; padding: 0 8px; border-radius: 6px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.mc-pr b { color: var(--sale); font-weight: 800; font-size: 14px; }
.mc-rm { position: absolute; top: 12px; right: -6px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #9aa7b4 !important; transition: background .15s, color .15s; }
.mc-rm:hover { background: #fdecea; color: var(--sale) !important; }
.mc-it.busy { opacity: .4; pointer-events: none; }
.mc-ft { padding: 16px 20px 18px; border-top: 1px solid var(--line-soft); background: var(--soft); border-radius: 0 0 16px 16px; }
.mc-sum { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; font: 600 14px var(--f-body); color: var(--text); }
.mc-sum b { font: 800 22px/1.2 var(--f-body); letter-spacing: -.015em; color: var(--sale); font-variant-numeric: tabular-nums; }
.mc-act { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mc-btn { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 12px; border-radius: 12px; background: var(--brand); color: #fff !important; font: 800 14.5px var(--f-body); text-align: center; white-space: nowrap; transition: background .15s, transform .15s; }
.mc-btn:hover { background: var(--brand-ink); transform: translateY(-1px); }
.mc-btn.ghost { background: var(--surface); color: var(--brand-ink) !important; box-shadow: inset 0 0 0 1.5px var(--brand); }
.mc-btn.ghost:hover { background: var(--brand-soft); }
.mc-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font: 500 12.5px var(--f-body); color: var(--muted); }
.mc-note svg { color: var(--ok); }
.mc-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 28px 28px; text-align: center; color: var(--muted); }
.mc-empty > i { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-style: normal; }
.mc-empty b { font: 800 16px var(--f-body); color: var(--ink); }
.mc-empty span { font-size: 13.5px; margin-bottom: 12px; }
.mc-empty .mc-btn { width: 100%; }
.mcart ins, .mcart .amount, .mcart bdi { text-decoration: none; background: none; }
@media (max-width: 849px), (hover: none) { .mcart { display: none; } }

body:has(.hdr-cart.open) .cfloat { opacity: 0; pointer-events: none; transition: opacity .15s; }

/* Nút "Thêm vào giỏ hàng" trên thẻ sản phẩm: một kiểu duy nhất ở mọi trang (trang trong có CSS nút cũ chen vào) */
.at-tx .addb { display: block; width: 100%; margin-top: 10px; padding: 10px 12px !important; border: 0 !important; border-radius: 8px !important; background: var(--brand-soft) !important; color: var(--brand-ink) !important; font: 700 13px/1.4 var(--f-body) !important; letter-spacing: 0 !important; text-transform: none !important; text-align: center; text-decoration: none; box-shadow: none !important; transition: background .15s, color .15s; }
.at-tx .addb:hover { background: var(--brand) !important; color: #fff !important; }
.at-tx .addb.done { background: var(--ok) !important; color: #fff !important; }
.at-tx .addb.busy { opacity: .6; }

/* Nền chữ cho mọi trang dùng giao diện mới (trang danh mục/sản phẩm không còn nạp CSS giao diện cũ) */
body.nvt-site { margin: 0; font-family: var(--f-body); -webkit-font-smoothing: antialiased; }

/* ---------- Menu chính có menu con (thanh xanh ngang) ---------- */
@media (min-width: 850px) { .nav .wrap > ul { overflow: visible; } }
.nav .wrap > ul > li.has-dd { position: relative; display: flex; }
.nav-b { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: none; font: 600 15.5px var(--f-body); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); cursor: pointer; transition: color .15s, border-color .15s; }
.nav-b svg { transition: transform .2s; opacity: .7; }
.nav-b:hover, .nav-b.cur, .has-dd:hover > .nav-b, .has-dd:focus-within > .nav-b { color: var(--brand); border-bottom-color: var(--brand); }
.has-dd:hover > .nav-b svg, .has-dd:focus-within > .nav-b svg { transform: rotate(180deg); }
.nav .dd { position: absolute; z-index: 70; top: 100%; left: 0; min-width: 270px; padding-top: 6px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s, transform .16s, visibility .16s; }
.nav .dd > ul { display: grid; gap: 2px; padding: 8px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 22px 48px rgba(13,27,42,.2); }
.nav .has-dd:hover > .dd, .nav .has-dd:focus-within > .dd, .nav .has-dd.open > .dd { opacity: 1; visibility: visible; transform: none; }
.nav .dd a { display: block; padding: 10px 14px; border-radius: 9px; font: 600 14px/1.4 var(--f-body); color: var(--ink); white-space: nowrap; transition: background .15s, color .15s; }
.nav .dd a:hover { background: var(--brand-soft); color: var(--brand-ink); }
.nav .dd a[aria-current], .nav .dd a.cur { color: var(--brand); }
body:has(.has-dd:hover) .catov { opacity: 0; }
/* menu điện thoại: nhãn mục có menu con */
.dr-lbl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; font: 600 14.5px/1.3 var(--f-body); color: var(--ink); text-align: left; }
.dr-links { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-links a { padding: 7px 12px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font: 500 13px/1.4 var(--f-body); color: var(--text); }

/* Cột 3 ảnh bên phải banner: dàn đều theo chiều cao banner (máy tính) */
@media (min-width: 1101px) {
  .hero-grid > .tiles { grid-template-rows: repeat(3, minmax(0, 1fr)); align-content: stretch; }
  .hero-grid > .tiles .tile { min-height: 0; }
  .hero-grid > .tiles .tile img { height: 100%; aspect-ratio: auto; }
}

/* Mục menu nổi bật (Khuyến mãi): chữ đỏ ánh sáng chạy + ngôi sao lấp lánh */
.nav .wrap > ul > li > a.fx, .dr-list a.fx { position: relative; color: var(--sale); }
.fx .fx-t { background: linear-gradient(100deg, var(--sale) 0%, var(--sale) 40%, #ff8a2a 50%, var(--sale) 60%, var(--sale) 100%) 0 0 / 200% 100% repeat-x; -webkit-background-clip: text; background-clip: text; color: var(--sale); -webkit-text-fill-color: transparent; animation: fxshine 3s linear infinite; }
@keyframes fxshine { to { background-position: -200% 0; } }
.fx-s { position: absolute; display: block; width: 15px; height: 15px; color: #ffb400; pointer-events: none; opacity: 0; transform: scale(.2) rotate(0); animation: fxtw 1.7s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(255, 180, 0, .95)); }
.fx-s svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.fx-s.s1 { top: 5px; right: 1px; }
.fx-s.s2 { width: 11px; height: 11px; bottom: 7px; left: 2px; animation-delay: .5s; color: #ff6a2a; }
.fx-s.s3 { width: 10px; height: 10px; top: 8px; left: 44%; animation-delay: 1s; }
.fx-s.s4 { width: 9px; height: 9px; bottom: 8px; right: 28%; animation-delay: 1.3s; color: #ffd34d; }
.dr-list a.fx .fx-s.s1 { top: 6px; right: auto; left: 152px; }
.dr-list a.fx .fx-s.s2 { bottom: 6px; left: 116px; }
.dr-list a.fx .fx-s.s3 { top: 8px; left: 92px; }
.dr-list a.fx .fx-s.s4 { bottom: 8px; left: 138px; }
@keyframes fxtw { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 45% { opacity: 1; transform: scale(1) rotate(90deg); } 70% { opacity: .9; transform: scale(.75) rotate(130deg); } }
@media (prefers-reduced-motion: reduce) { .fx .fx-t { animation: none; background: none; color: var(--sale); -webkit-text-fill-color: currentColor; } .fx-s { animation: none; opacity: .9; transform: none; } }

/* Menu dọc: chỉ mục đang rê chuột mới mở menu con. Trước đây mục vừa bấm/tab còn giữ focus nên menu con "dính" khi rê sang mục khác. */
.vmenu:hover > .has-mega:not(:hover) > .mega { opacity: 0; visibility: hidden; transform: translateX(-6px); transition-delay: 0s; }
.vmenu:hover > .has-mega:not(:hover) > a { background: transparent; color: var(--ink); }
.vmenu:hover > .has-mega:not(:hover) .vm-ic { background: var(--brand-soft); color: var(--brand); }

/* Nền section nhóm hàng so le: các section không phải nền trắng có nền xanh nhạt chuyển sắc từ dưới lên (đáy đậm hơn) + hoa văn chấm mờ. */
.band:not(.alt):not(.pt) { position: relative; isolation: isolate;
  background:
    radial-gradient(760px 260px at 6% 0%, rgba(0, 110, 181, .06), transparent 70%),
    radial-gradient(760px 320px at 100% 100%, rgba(58, 167, 238, .28), transparent 72%),
    linear-gradient(0deg, #bddcf3 0%, #d4e8f8 30%, #eaf4fc 68%, #f6fafe 100%);
  box-shadow: inset 0 1px 0 rgba(0, 110, 181, .10), inset 0 -1px 0 rgba(0, 110, 181, .10); }
.band:not(.alt):not(.pt)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(rgba(0, 110, 181, .11) 1.3px, transparent 1.6px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 18%, rgba(0, 0, 0, .55) 82%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 18%, rgba(0, 0, 0, .55) 82%, #000 100%); }
.band:not(.alt):not(.pt) .ah .more { background: #fff; }
.band:not(.alt):not(.pt) .ah .cnt { background: #fff; box-shadow: 0 0 0 1px rgba(0, 110, 181, .14); }