/* Bảng màu + nhịp theo NomiTech Brand Guideline v1.0 */
:root {
  --orange: #E8611A;
  --orange-light: #FF7A2F;
  --orange-dark: #C5511A;
  --black: #1A1A1A;
  --charcoal: #2B3040;
  --white: #FFFFFF;
  --off: #F2F2F2;
  --soft: #F7F7F7;
  --line: #E4E4E4;
  --text2: #555555;
  --text3: #8A8A8A;
  --radius: 6px;
  --wrap: 1240px;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', system-ui, sans-serif; background: var(--white); color: var(--black); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[id] { scroll-margin-top: 90px; }
svg.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
/* Nhãn chữ HOA nhỏ: dùng Be Vietnam Pro vì DM Sans dính dấu chồng (Ế Ể Ỗ) khi viết hoa */
.eyebrow { font-family: 'Be Vietnam Pro', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 4px; font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; cursor: pointer; font-family: inherit; }
.btn svg.ic { width: 16px; height: 16px; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-dark); }
.btn-light { background: #fff; color: var(--black); }
.btn-light:hover { background: var(--orange); color: #fff; }
.btn-dark { background: var(--black); color: #fff; }
.btn-dark:hover { background: var(--orange); }

/* 1. Thanh thông báo */
.topbar { background: var(--black); color: #cfcfcf; font-size: 12.5px; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 36px; gap: 16px; }
.topbar .msgs { display: flex; gap: 14px; align-items: center; white-space: nowrap; overflow: hidden; }
.topbar .msgs i { width: 1px; height: 12px; background: #444; display: inline-block; }
.topbar .right { display: flex; gap: 18px; white-space: nowrap; }
.topbar .right a:hover { color: var(--orange); }
.tick { display: none; }
@keyframes tick { to { transform: translateX(-50%); } }

/* 2. Header */
header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
header .wrap { display: flex; align-items: center; height: 72px; gap: 32px; }
.logo img { height: 26px; width: auto; }
nav.main { display: flex; gap: 28px; position: relative; top: 3px; } /* hạ 3px cho chữ menu thẳng hàng với chữ nomitech trong logo (chữ logo nằm thấp hơn tâm khung vì dấu N cao hết khung) */
nav.main a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; font-weight: 500; color: var(--text2); padding: 6px 0; border-bottom: 1.5px solid transparent; transition: color .2s, border-color .2s; }
nav.main a:hover { color: var(--black); }
nav.main a.active { color: var(--black); border-bottom-color: var(--orange); }
.search { margin-left: auto; display: flex; align-items: center; gap: 10px; width: 300px; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--soft); color: var(--text3); }
.search input { border: 0; background: none; outline: none; font: inherit; font-size: 13.5px; width: 100%; color: var(--black); }
.search:focus-within { border-color: var(--orange); background: #fff; }
.h-cta { padding: 10px 16px; font-size: 13.5px; white-space: nowrap; }
nav.main a[href="/build-pc/"] { display: none; } /* máy tính: Build PC là nút cam bên phải */
nav.main a svg.ic { width: 14px; height: 14px; margin-left: 4px; transform: rotate(90deg); transition: transform .2s; }
nav.main a[aria-expanded="true"] { color: var(--black); }
nav.main a[aria-expanded="true"] svg.ic { transform: rotate(-90deg); color: var(--orange); }

/* Menu Sản phẩm xổ xuống (js/site.js dựng) */
.mega { position: fixed; top: var(--mega-top, 110px); left: 0; right: 0; z-index: 45; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .16s, visibility 0s .16s; }
.mega.open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .16s; } /* hiện ngay để focus bàn phím vào được */
.mega-back { position: absolute; left: 0; right: 0; top: 0; height: 100vh; background: rgba(18,18,18,.3); }
.mega-box { position: relative; width: min(calc(100% - 48px), 1110px); margin: 0 auto; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: 0 0 8px 8px; box-shadow: 0 24px 70px rgba(0,0,0,.2); overflow: hidden; }
.mega-top { display: none; }
.mega-grid { display: grid; grid-template-columns: 300px 1fr; min-height: 512px; } /* 2 menu Sản phẩm + Khuyến mãi cao bằng nhau */
.mega-cats { background: var(--soft); border-right: 1px solid var(--line); padding: 14px; }
.mega-cats a { min-height: 44px; display: grid; grid-template-columns: 24px 1fr 14px; gap: 12px; align-items: center; border-radius: 5px; padding: 6px 12px; color: var(--text2); font-size: 14px; font-weight: 600; }
.mega-cats a svg.ic { width: 22px; height: 22px; }
.mega-cats a svg.ic:last-child { width: 14px; height: 14px; }
.mega-cats a:hover, .mega-cats a.on { color: var(--black); background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.07); }
.mega-cats a.on { color: var(--orange); }
.mega-detail { padding: 30px 34px 24px; display: flex; flex-direction: column; }
.mega-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.mega-kicker { color: var(--text3); font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; }
.mega-head h3 { margin-top: 5px; font-size: 27px; letter-spacing: -.5px; }
.mega-links { display: flex; gap: 48px; padding: 24px 0; }
.mega-links > div { min-width: 0; }
.mega-loai div { display: grid; grid-template-columns: repeat(2, minmax(150px, auto)); gap: 0 28px; }
.mega-loai { flex-shrink: 0; }
.mega-loai a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text2); font-size: 14px; }
.mega-loai a:hover { color: var(--orange); }
.mega-loai .sap { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--text3); font-size: 14px; }
.mega-loai .sap em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 3px; background: var(--soft); border: 1px solid var(--line); white-space: nowrap; }
.chip.nho:disabled { cursor: default; color: var(--text3); background: var(--soft); border-style: dashed; }
.chip.nho:disabled:hover { border-color: var(--line); color: var(--text3); }
.mega-loai h4 { margin-bottom: 6px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.mega-hang { flex: 1; }
.mega-hang h4 { margin-bottom: 6px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.mega-hang div { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.mega-hang a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text2); font-size: 14px; }
.mega-hang a:hover { color: var(--orange); }
.mega-hang .sap { display: inline-flex; align-items: center; min-height: 40px; color: #b5b5b5; font-size: 14px; cursor: default; } /* hãng chưa có hàng */
.bp-brands { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; color: var(--text2); line-height: 1.45; }
.bp-brands .sap { color: #b5b5b5; }
.mega-help { margin-top: auto; padding: 18px 20px; border-radius: var(--radius); background: #fff4ed; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mega-help div { display: flex; flex-direction: column; gap: 3px; }
.mega-help strong { font-size: 14px; }
.mega-help span { color: var(--text2); font-size: 13px; }
.mega-help .btn { padding: 10px 16px; font-size: 13.5px; white-space: nowrap; }
.mega-all { display: none; }

/* 3. Hero: banner ảnh (dựng trên Canva) tự chạy, xếp chồng trong 1 ô lưới để chiều cao không nhảy */
.hero { position: relative; background: #16171c; width: calc(100% - 48px); max-width: calc(var(--wrap) - 48px); margin: 24px auto 0; border-radius: var(--radius); overflow: hidden; } /* cùng bề ngang nội dung bên dưới; điện thoại vẫn tràn hết */
.slides { display: grid; }
.slide { grid-area: 1 / 1; display: block; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.slide.on { opacity: 1; visibility: visible; }
.slide img { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
.slide:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.service-slide { position: relative; isolation: isolate; aspect-ratio: 3 / 1; display: grid; grid-template-columns: 50% 50%; grid-template-rows: 1fr; overflow: hidden; background: #e7ded3; color: #24211f; }
.service-banner-copy { grid-column: 1; grid-row: 1; align-self: center; min-width: 0; padding: clamp(18px, 2.3vw, 32px) clamp(28px, 4.5vw, 80px); }
.service-banner-copy > strong { display: block; margin: 0; font-family: 'DM Sans', sans-serif; font-size: clamp(30px, 3.6vw, 52px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; font-style: normal; }
.service-banner-copy > strong span { display: block; white-space: nowrap; }
.service-banner-copy > strong em { color: #c9551d; font-style: normal; }
.service-category-icons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; max-width: 500px; margin-top: clamp(20px, 3vw, 42px); padding-top: 16px; }
.service-category-icons span { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 5px; }
.service-category-icons svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service-category-icons small { font-size: 10px; line-height: 1.1; white-space: nowrap; }
.service-banner-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: clamp(16px, 2vw, 28px); padding-top: 13px; }
.service-banner-list span { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: clamp(10px, .85vw, 13px); font-weight: 700; line-height: 1.25; }
.service-banner-list b { color: #a64012; font-size: 11px; }
@media (min-width: 1024px) {
  .service-slide { grid-template-columns: 42% 58%; }
  .service-banner-copy { position: relative; z-index: 2; }
  .service-banner-copy > strong { width: max-content; font-size: clamp(48px, 4.9vw, 74px); line-height: 1; }
  .service-banner-copy > strong span { display: block; }
  .service-category-icons { width: clamp(550px, 50vw, 700px); max-width: none; margin-top: clamp(24px, 3vw, 42px); padding-top: 0; border: 0; }
  .service-category-icons span { align-items: flex-start; }
  .service-banner-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: clamp(550px, 50vw, 700px); margin-top: clamp(20px, 2.4vw, 36px); padding-top: 0; border: 0; }
  .service-banner-list span { font-size: clamp(11px, 1.05vw, 15px); white-space: nowrap; }
  .service-brand-art::before { background: linear-gradient(90deg, #e7ded3 0%, rgba(231,222,211,.82) 11%, rgba(231,222,211,.38) 23%, transparent 43%); }
}
.service-brand-art { position: relative; grid-column: 2; grid-row: 1; overflow: hidden; background: #e7ded3; container-type: size; }
.service-brand-art::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #e7ded3 0%, rgba(231,222,211,.9) 12%, rgba(231,222,211,.55) 25%, rgba(231,222,211,.16) 38%, transparent 52%); }
.service-photo-frame { position: absolute; top: 0; left: 100%; width: max(100cqw, 200cqh); aspect-ratio: 2 / 1; transform: translateX(-100%); }
.service-photo-frame .service-editorial-photo { position: absolute; inset: 0; width: 100%; max-width: none; height: 100% !important; aspect-ratio: 2 / 1 !important; object-fit: fill; }
.consult-slide { position: relative; isolation: isolate; aspect-ratio: 3 / 1; overflow: hidden; background: #292724; color: #fff8f1; }
.consult-visual { position: absolute; inset: 0 0 0 auto; width: 55%; overflow: hidden; container-type: size; }
.consult-photo-frame { position: absolute; top: 50%; left: 0; width: max(100cqw, 133.333cqh); aspect-ratio: 4 / 3; transform: translateY(-50%); }
.consult-slide .consult-photo { position: absolute; inset: 0; width: 100%; max-width: none; height: 100% !important; aspect-ratio: 4 / 3 !important; object-fit: fill; }
.consult-slide::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #292724 0%, #292724 45%, rgba(41,39,36,.9) 49%, rgba(41,39,36,.55) 56%, rgba(41,39,36,.22) 62%, transparent 70%); }
.consult-copy { position: absolute; z-index: 2; left: 7.5%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; width: 46%; }
.consult-eyebrow { color: #ffa16b; font-size: clamp(11px, 1.25vw, 17px); font-weight: 800; letter-spacing: .08em; }
.consult-copy > strong { margin-top: clamp(9px, 1.3vw, 18px); font-family: 'DM Sans', sans-serif; font-size: clamp(28px, 3.8vw, 54px); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
.consult-description { max-width: 420px; margin-top: clamp(10px, 1.3vw, 18px); color: #e4dcd3; font-size: clamp(13px, 1.5vw, 21px); line-height: 1.4; }
.consult-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(14px, 1.7vw, 25px); padding: 11px 15px; border-radius: 5px; background: #e8611a; color: #fff; font-size: clamp(12px, 1.1vw, 16px); font-weight: 700; }
.consult-cta svg { width: 16px; height: 16px; }
.hero-ctrl { position: absolute; right: 24px; bottom: 16px; display: flex; align-items: center; gap: 4px; padding: 0 4px 0 12px; border-radius: 999px; background: rgba(22,23,28,.55); backdrop-filter: blur(6px); }
.dots { display: flex; gap: 4px; }
.dots button { width: 32px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.dots button::after { content: ''; position: absolute; left: 4px; right: 4px; top: 21px; height: 2px; background: rgba(255,255,255,.4); transition: background .3s; }
.dots button.on::after { background: var(--orange); }
.hero-pause { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.hero-pause svg { width: 18px; height: 18px; fill: currentColor; }
.hero-pause:hover { color: var(--orange); }
.hero-pause:focus-visible, .dots button:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; border-radius: 6px; }
.hero-pause .i-play, .hero.paused .hero-pause .i-pause { display: none; }
.hero.paused .hero-pause .i-play { display: block; }

/* Khung section */
section { padding: 56px 0 0; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; gap: 16px; }
.sec-head h2 { font-size: 26px; font-weight: 700; letter-spacing: -.5px; }
.sec-head h2::after { content: ''; display: block; width: 36px; height: 3px; background: var(--orange); margin-top: 10px; }
.view-all { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--orange); white-space: nowrap; background: none; border: 0; cursor: pointer; }
.view-all svg.ic { width: 16px; height: 16px; transition: transform .2s; }
.view-all:hover svg.ic { transform: translateX(3px); }


/* Menu Khuyến mãi (js/site.js dựng): cùng khung menu Sản phẩm. Trái: 5 chương trình có ảnh KV; phải: quà, sản phẩm, cách nhận quà */
/* 3 bảng xổ trên header (Sản phẩm, Ưu đãi, Dịch vụ) cùng 1 khung: rộng theo .mega-box, cao 512px phần thân.
   Màn hình thấp thì bảng cuộn bên trong, không tràn quá mép dưới. */
@media (min-width: 761px) {
  .mega-box { max-height: calc(100vh - var(--mega-top, 110px) - 16px); overflow-y: auto; }
  .dv-menu { min-height: 512px; }
}
.km-cats { display: flex; flex-direction: column; gap: 4px; }
.km-cats a { grid-template-columns: 64px 1fr 14px; min-height: 60px; padding: 7px 10px; align-items: center; }
.km-cats a img { width: 64px; height: 38px; border-radius: 3px; object-fit: cover; }
.km-cats a span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.km-cats small { color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.km-cats strong { color: var(--black); font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.km-cats em { font-style: normal; color: var(--text3); font-size: 11.5px; font-weight: 500; }
.km-cats a.view-all, .km-cats a.view-all:hover { display: inline-flex; min-height: 40px; margin: auto 10px 0; padding: 0; background: none; box-shadow: none; color: var(--orange); font-size: 13.5px; }
.km-detail .mega-head { align-items: flex-start; }
.km-detail .mega-head h3 { max-width: 520px; line-height: 1.2; }
.km-time { flex-shrink: 0; padding: 6px 10px; border-radius: 4px; background: var(--soft); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.km-info { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 0 16px; } /* 2 ô giãn cho kín chiều cao khung */
.km-info > div { padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.km-qua { background: #fff4ed; border-color: #fbd9c4 !important; }
.km-lb { color: var(--orange); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.km-qua strong { font-size: 16px; line-height: 1.35; }
.km-qua em { font-style: normal; color: var(--text2); font-size: 13px; }
.km-sp ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.km-sp li { position: relative; padding-left: 14px; font-size: 13.5px; line-height: 1.4; color: var(--text2); }
.km-sp li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.km-meta { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; padding: 4px 0 20px; border-bottom: 1px solid var(--line); }
.km-meta div { display: flex; flex-direction: column; gap: 3px; }
.km-meta span { color: var(--text3); font-size: 12px; }
.km-meta strong { font-size: 13.5px; }
.km-actions { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 10px; }
.km-actions .btn { padding: 11px 18px; font-size: 13.5px; }
.km-hoi { border-color: var(--line); color: var(--black); background: #fff; }
.km-hoi:hover { border-color: var(--orange); color: var(--orange); }
.km-actions small { margin-left: auto; color: var(--text3); font-size: 11.5px; }

/* Trang chủ: chương trình nổi bật, video & kiến thức, case/đánh giá, nhận tin (DỮ LIỆU MÔ PHỎNG từ bản UX của Codex) */
.sec-head .eyebrow { margin-bottom: 4px; }
.campaign-slider { position: relative; width: 100%; min-height: 400px; aspect-ratio: 3 / 1; overflow: hidden; border-radius: var(--radius); background: var(--charcoal); color: #fff; }
.campaign-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity 360ms ease, transform 650ms ease; }
.campaign-image.active { opacity: 1; transform: scale(1); }
.campaign-overlay { display: none; }
.campaign-slider .campaign-image { left: auto; right: 0; width: auto; height: 100%; aspect-ratio: 785 / 466; object-fit: cover; } /* KV hãng có chữ sẵn: giữ nguyên ảnh bên phải */
.campaign-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.km-hoi-lk { color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.km-hoi-lk:hover { color: var(--orange-light); }
.campaign-facts strong { max-width: 260px; line-height: 1.35; }
.campaign-content { position: relative; z-index: 2; width: 44%; min-height: 400px; padding: 42px 46px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.demo-pill { margin-bottom: 12px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.45); border-radius: 3px; font-size: 9px; font-weight: 850; letter-spacing: 1.1px; }
.promo-brand { color: #ffc19f; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; }
.campaign-content h3 { margin: 8px 0 16px; font-size: 34px; line-height: 1.08; letter-spacing: -.7px; }
.campaign-facts { margin-bottom: 20px; display: flex; gap: 34px; }
.campaign-facts div { display: flex; flex-direction: column; gap: 3px; }
.campaign-facts span { color: #aaaeb8; font-size: 11px; }
.campaign-facts strong { font-size: 13.5px; }
.campaign-controls { position: absolute; z-index: 3; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 999px; background: rgba(16,17,20,.64); backdrop-filter: blur(5px); }
.campaign-controls > button { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.campaign-controls > button:hover { border-color: var(--orange); background: var(--orange); }
.campaign-controls > button svg.ic { width: 14px; height: 14px; }
.campaign-controls > button.previous svg.ic { transform: rotate(180deg); }
.campaign-controls > div { display: flex; gap: 5px; }
.campaign-controls > div button { width: 18px; height: 3px; padding: 0; border: 0; background: rgba(255,255,255,.38); cursor: pointer; }
.campaign-controls > div button.active { background: var(--orange); }

.content-hub { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
.video-panel, .knowledge-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); overflow: hidden; }
.content-panel-head { min-height: 86px; padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.content-panel-head > div > span { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.content-panel-head h3 { margin: 5px 0 0; font-size: 21px; line-height: 1.2; }
.content-panel-head > small { color: var(--text3); font-size: 10.5px; white-space: nowrap; }
.video-panel { display: flex; flex-direction: column; }
.video-grid { flex: 1; padding: 12px; display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.video-card { position: relative; min-height: 132px; overflow: hidden; border-radius: 5px; background: var(--charcoal); color: #fff; }
.video-card.featured { grid-row: 1 / span 2; min-height: 274px; }
.video-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-card.featured > img { object-position: 64% center; }
.video-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,12,14,.92) 0%, rgba(11,12,14,.22) 74%); }
.video-copy { position: absolute; z-index: 2; inset-inline: 16px; bottom: 15px; padding-right: 38px; }
.video-copy > span { color: #ffc19f; font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.video-copy h4 { margin: 5px 0 4px; font-size: 15px; line-height: 1.28; }
.video-card.featured .video-copy h4 { max-width: 260px; font-size: 21px; }
.video-copy small { color: #c0c3ca; font-size: 10.5px; }
.video-card > button, .knowledge-list .kl-mui { position: absolute; z-index: 3; right: 14px; bottom: 14px; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(20,21,24,.5); color: #fff; display: grid; place-items: center; }
.video-card > button svg.ic, .knowledge-list .kl-mui svg.ic { width: 14px; height: 14px; }
.video-card > button:disabled, .proof-card button:disabled { cursor: not-allowed; opacity: .72; }
.knowledge-panel { background: #fff; }
.knowledge-list { padding: 0 22px; }
.knowledge-list article { position: relative; min-height: 102px; padding: 19px 46px 18px 42px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; }
.knowledge-list article:last-child { border-bottom: 0; }
.article-number { position: absolute; left: 0; top: 19px; color: #c6c6c6; font-size: 12px; font-weight: 750; }
.knowledge-list small { color: var(--orange); font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.knowledge-list h4 { margin: 5px 0 7px; font-size: 14px; line-height: 1.35; }
.knowledge-list h4 a::after { content: ''; position: absolute; inset: 0; } /* bấm cả dòng là mở bài */
.knowledge-list article:hover h4 { color: var(--orange); }
.knowledge-list article:hover .kl-mui { background: var(--orange); border-color: var(--orange); color: #fff; }
.knowledge-list article div > span { color: var(--text3); font-size: 10.5px; }
.knowledge-list .kl-mui { display: grid; place-items: center; right: 0; bottom: auto; top: 50%; transform: translateY(-50%); border-color: var(--line); background: var(--soft); color: var(--black); }

.proof-section { padding-top: 16px; }
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.proof-card { position: relative; min-height: 240px; padding: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg,#fff,var(--soft)); }
.proof-card::after { content: ""; position: absolute; right: -38px; bottom: -55px; width: 210px; height: 210px; border: 1px solid #e4e4e4; border-radius: 50%; }
.proof-dark { border-color: #303030; background: linear-gradient(135deg,#222,#151515); color: #fff; }
.proof-dark::after { border-color: #393939; }
.proof-icon { width: 38px; height: 38px; margin-bottom: 24px; color: var(--orange); }
.proof-state { display: block; color: var(--orange); font-size: 9.5px; font-weight: 800; letter-spacing: 1.3px; }
.proof-card h3 { margin: 8px 0 8px; font-size: 24px; }
.proof-card p { max-width: 470px; margin: 0 0 20px; color: var(--text2); font-size: 13.5px; line-height: 1.55; }
.proof-dark p { color: #b8b8b8; }
.proof-card button { position: relative; z-index: 2; min-height: 38px; padding: 0; border: 0; background: transparent; color: var(--text3); display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; }
.proof-card button svg.ic { width: 16px; height: 16px; }

.newsletter-section { padding-top: 16px; }
.newsletter-card { min-height: 235px; padding: 38px 42px; border-radius: var(--radius); background: linear-gradient(120deg,var(--orange-dark),var(--orange) 50%,var(--orange-light)); color: #fff; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 52px; }
.newsletter-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: 1.3px; }
.newsletter-card h2 { max-width: 520px; margin: 9px 0 8px; font-size: 31px; line-height: 1.12; }
.newsletter-card p { margin: 0; color: rgba(255,255,255,.86); font-size: 14px; }
.newsletter-card form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.newsletter-card label { height: 48px; padding: 0 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 4px; background: rgba(255,255,255,.15); display: flex; align-items: center; gap: 9px; }
.newsletter-card label svg.ic { width: 18px; height: 18px; }
.newsletter-card input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #fff; }
.newsletter-card input::placeholder { color: rgba(255,255,255,.72); }
.newsletter-card form .btn { min-height: 48px; white-space: nowrap; }
.newsletter-card form > span { grid-column: 1 / -1; font-size: 11px; color: #fff; }

/* Thương hiệu nổi bật: 2 bản danh sách nối đuôi, chạy sang trái nửa chiều dài là khớp vòng */
.th-dai { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.th-track { display: flex; width: max-content; animation: th-chay 70s linear infinite; }
.th-dai:hover .th-track, .th-dai:focus-within .th-track { animation-play-state: paused; }
.th-track ul { display: flex; align-items: center; list-style: none; }
.th-track a { display: flex; align-items: center; gap: 10px; height: 92px; padding: 0 32px; color: var(--text2); font-size: 16px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; filter: grayscale(1); opacity: .55; transition: filter .25s, opacity .25s, color .25s; }
.th-track a:hover, .th-track a:focus-visible { filter: none; opacity: 1; color: var(--black); }
.th-track img { height: 28px; width: auto; }
.th-track img.rong { height: 20px; }
.th-chu { font-family: 'Be Vietnam Pro', sans-serif; font-size: 19px; font-weight: 600; letter-spacing: .5px; color: var(--black); }
@keyframes th-chay { to { transform: translateX(-50%); } }

/* Cửa sổ xem nhanh: 5 điểm nổi bật */
.xn-ksp { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 2px 0 18px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.xn-ksp li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--text2); }
.xn-ksp svg.ic { width: 16px; height: 16px; margin-top: 2px; color: var(--orange); stroke-width: 2.2; }

/* "Đang được quan tâm": tab theo ngành */
.nb-tabs { margin-bottom: 18px; }
.nb-tabs .chip { min-height: 38px; }
.nb-panel[hidden] { display: none; }


/* 7. Sản phẩm */
.filter-note { display: none; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--text2); }
.filter-note.show { display: flex; }
.filter-note button { min-height: 32px; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--orange); cursor: pointer; }
.filter-note button:hover { text-decoration: underline; }
.products { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.p-card { min-width: 0; height: 425px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; }
.p-card[hidden] { display: none; }
.p-card:hover { border-color: var(--orange); box-shadow: 0 10px 28px rgba(232,97,26,.10); }
.p-img { position: relative; height: 170px; margin: 8px 8px 0; background: var(--soft); border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.p-img img { max-height: 78%; max-width: 86%; object-fit: contain; transition: transform .3s, opacity .4s; }
.p-card:hover .p-img img { transform: scale(1.06); }
.p-img .tag { position: absolute; top: 8px; left: 8px; font-size: 10.5px; font-weight: 600; padding: 3px 7px; border-radius: 3px; background: #fff; border: 1px solid var(--line); color: var(--text2); }
.p-body { min-width: 0; padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.p-cat { font-size: 11.5px; color: var(--text3); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-name { font-size: 14px; font-weight: 600; line-height: 1.35; height: 38px; min-height: 38px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.swatches { display: flex; gap: 6px; margin: 8px 0 10px; }
.swatches i { width: 12px; height: 12px; border-radius: 2px; border: 1px solid #cfcfcf; }
.p-price { font-size: 14px; font-weight: 700; color: var(--orange); margin-top: auto; margin-bottom: 10px; }
.p-card .btn { justify-content: center; padding: 9px 10px; font-size: 13px; width: 100%; }
.empty { display: none; border: 1px dashed #cfcfcf; border-radius: var(--radius); padding: 28px; text-align: center; font-size: 15px; color: var(--text2); }
.empty.show { display: block; }
.empty a { color: var(--orange); font-weight: 600; }

/* 8. Cam kết */
.usp { margin-top: 56px; background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.usp .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 26px; padding-bottom: 26px; }
.usp-item { padding-left: 14px; border-left: 2px solid var(--orange); }
.usp-item strong { display: block; font-size: 14.5px; font-weight: 700; }
.usp-item span { font-size: 13px; color: var(--text3); }

/* 10. Footer */
footer { background: var(--black); color: #9a9a9a; }
.f-strip { border-bottom: 1px solid #262626; }
.f-strip .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 28px; padding-bottom: 28px; }
.f-box { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid #2c2c2c; border-radius: var(--radius); transition: border-color .2s; }
.f-box:hover { border-color: var(--orange); }
.f-box svg.ic { width: 34px; height: 34px; color: var(--orange); stroke-width: 1.2; }
.f-box span { display: flex; flex-direction: column; gap: 2px; }
.f-box small { font-size: 12px; color: #888; }
.f-box b { font-size: 17px; font-weight: 700; color: #fff; }
.f-box em { font-style: normal; font-size: 12px; color: #888; }
.f-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 32px; padding: 40px 24px 36px; }
.f-brand .f-tag { margin-top: 10px; }
footer li b { color: #fff; font-weight: 600; }
.f-brand img { height: 26px; width: auto; margin-bottom: 16px; }
.f-brand p { font-size: 13.5px; line-height: 1.65; max-width: 260px; }
.f-social { display: flex; gap: 10px; margin-top: 18px; }
.f-social a, .f-social span { height: 36px; min-width: 36px; padding: 0 10px; border: 1px solid #333; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #ddd; font-size: 12.5px; transition: border-color .2s, color .2s; }
.f-social a:hover { border-color: var(--orange); color: var(--orange); }
.f-social svg.ic { width: 17px; height: 17px; }
.f-social .soon { color: var(--text3); cursor: default; }
footer h4 { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
footer ul { list-style: none; }
footer li { margin-bottom: 9px; }
footer li a, footer li button { font-size: 13.5px; transition: color .2s; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; text-align: left; }
footer li a:hover, footer li button:hover { color: var(--orange); }
.f-contact { border-left: 1px solid #2c2c2c; padding-left: 28px; }
.f-contact li span { font-size: 13.5px; }
.f-contact p { font-size: 13.5px; line-height: 1.6; margin-bottom: 14px; }
.f-contact .btn { padding: 10px 16px; font-size: 13px; }
.f-bottom { border-top: 1px solid #262626; }
.f-bottom .wrap { display: flex; justify-content: space-between; align-items: center; height: 54px; font-size: 12.5px; gap: 16px; }
.f-bottom nav { display: flex; gap: 18px; }
.f-bottom a:hover { color: var(--orange); }
.f-tag { color: #bbb; font-weight: 600; }

/* Nút liên hệ nổi: chỉ hiện kênh đã có thật trong CONTACT */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fab-list { display: none; flex-direction: column; gap: 8px; align-items: flex-end; }
.fab-hours { background: #fff; color: var(--text2); border: 1px solid var(--line); font-size: 12px; padding: 5px 10px; border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.fab.open .fab-list { display: flex; }
.fab-list a { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--black); border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.fab-list a:hover { border-color: var(--orange); color: var(--orange); }
.fab-list svg.ic { width: 18px; height: 18px; color: var(--orange); }
.fab-toggle { display: flex; align-items: center; gap: 8px; background: var(--orange); color: #fff; border: 0; border-radius: 4px; padding: 12px 16px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 28px rgba(232,97,26,.35); }
.fab-toggle:hover { background: var(--orange-dark); }
.fab-toggle svg.ic { width: 18px; height: 18px; }

/* Responsive: tablet */
@media (max-width: 1239px) {
  nav.main { gap: 18px; }
  .search { width: 220px; }
  .h-cta { display: none; }
  nav.main a[href="/build-pc/"] { display: inline-flex; }
  .products { grid-template-columns: repeat(3, 1fr); }
  .f-cols { grid-template-columns: 1fr 1fr 1fr; }
  .f-brand, .f-contact { grid-column: span 3; }
  .f-contact { border-left: 0; padding-left: 0; }
}
/* Tablet (761-1239px): thẻ hẹp, xếp chữ ở trên + ảnh sản phẩm ở dưới để không đè chữ; menu không rớt dòng */
@media (min-width: 761px) and (max-width: 1239px) {
  nav.main { gap: 16px; }
  nav.main a { white-space: nowrap; font-size: 14px; }
  .search { width: 180px; }
  /* Chương trình nổi bật: ảnh KV trên, chữ dưới (tỉ lệ 3:1 + cao tối thiểu 400px làm khung giãn tràn ngang) */
  .campaign-slider { min-height: 0; aspect-ratio: auto; }
  .campaign-slider .campaign-image { position: relative; display: none; width: 100%; height: auto; }
  .campaign-slider .campaign-image.active { display: block; }
  .campaign-content { width: 100%; min-height: 0; padding: 26px 28px 80px; }
}
/* Responsive: điện thoại. Menu chính thành dải cuộn ngang ngay dưới header (không giấu vào hamburger) */
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .topbar .msgs, .topbar .right { display: none; }
  .topbar .wrap { padding: 0; }
  .tick { display: block; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .tick-track { display: flex; width: max-content; animation: tick 30s linear infinite; }
  .tick:active .tick-track { animation-play-state: paused; }
  .tick-track > div { display: flex; align-items: center; gap: 14px; padding-right: 14px; white-space: nowrap; }
  .tick i { width: 1px; height: 12px; background: #444; display: inline-block; }
  header .wrap { height: auto; flex-wrap: wrap; gap: 10px 12px; padding-top: 10px; padding-bottom: 0; }
  .logo { flex-shrink: 0; }
  .logo img { height: 20px; }
  .search { flex: 1; min-width: 0; width: auto; height: 44px; margin: 0; padding: 0 10px; gap: 8px; }
  nav.main { order: 4; width: 100%; overflow-x: auto; gap: 22px; padding-bottom: 2px; scrollbar-width: none; top: 0; }
  nav.main a { min-height: 44px; white-space: nowrap; padding: 10px 0; }
  .mega { inset: 0; z-index: 90; }
  .mega-back { inset: 0; height: auto; background: rgba(18,18,18,.55); }
  .mega-box { position: absolute; inset: 6vh 0 0; width: 100%; border: 0; border-top: 3px solid var(--orange); border-radius: 12px 12px 0 0; overflow-y: auto; overscroll-behavior: contain; }
  .mega-top { height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 2; background: #fff; }
  .mega-close { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--orange); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
  .mega-grid { grid-template-columns: 1fr; min-height: 0; }
  .mega-cats { padding: 12px; border-right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .mega-cats a { min-height: 52px; grid-template-columns: 22px 1fr; gap: 8px; padding: 6px 10px; font-size: 13px; background: #fff; border: 1px solid var(--line); }
  .mega-cats a svg.ic:last-child { display: none; }
  .mega-cats a.on { color: var(--text2); box-shadow: none; }
  .mega-detail { padding: 4px 12px 12px; }
  .mega-head, .mega-links { display: none; } /* điện thoại: chạm nhóm là vào thẳng trang nhóm */
  .mega-help { flex-direction: column; align-items: flex-start; }
  .mega-all { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 48px; margin: 0 12px 24px; border: 1px solid var(--line); border-radius: 4px; color: var(--orange); font-size: 14px; font-weight: 600; }
  .mega-all svg.ic { width: 16px; height: 16px; }
  html.mega-mo { overflow: hidden; }
  .th-track a { height: 68px; padding: 0 22px; font-size: 14px; }
  .th-track img { height: 22px; }
  .th-track img.rong { height: 16px; }
  .th-chu { font-size: 16px; }
  .km-cats { display: grid; grid-template-columns: 1fr; }
  .km-cats a { grid-template-columns: 96px 1fr; min-height: 76px; }
  .km-cats a img { width: 96px; height: 57px; }
  .km-detail, .km-cats a.view-all { display: none; } /* điện thoại: chạm chương trình là tới mục Chương trình nổi bật */
  .campaign-slider { min-height: 0; aspect-ratio: auto; }
  .campaign-slider .campaign-image { position: relative; display: none; width: 100%; height: auto; }
  .campaign-slider .campaign-image.active { display: block; }
  .campaign-overlay { background: linear-gradient(0deg,rgba(13,14,17,.97) 0%,rgba(13,14,17,.84) 48%,rgba(13,14,17,.12) 100%); }
  .campaign-content { width: 100%; min-height: 0; padding: 22px 20px 76px; }
  .campaign-content h3 { font-size: 28px; }
  .campaign-facts { gap: 18px; }
  .campaign-controls { right: 14px; bottom: 14px; }
  .content-hub { grid-template-columns: 1fr; }
  .content-panel-head { min-height: 0; padding: 17px 16px; }
  .content-panel-head h3 { font-size: 19px; }
  .content-panel-head > small { display: none; }
  .video-grid { grid-template-columns: 88% 88% 88%; grid-template-rows: 230px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .video-card, .video-card.featured { min-height: 230px; grid-row: auto; scroll-snap-align: start; }
  .video-card .video-copy h4, .video-card.featured .video-copy h4 { max-width: 230px; font-size: 18px; }
  .knowledge-list { padding-inline: 16px; }
  .knowledge-list article { padding-right: 42px; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-card { min-height: 235px; padding: 25px 22px; }
  .newsletter-card { padding: 30px 22px; grid-template-columns: 1fr; gap: 24px; }
  .newsletter-card h2 { font-size: 27px; }
  .newsletter-card form { grid-template-columns: 1fr; }
  .newsletter-card form .btn { width: 100%; }
  .slide img { aspect-ratio: 1 / 1; }
  .service-slide { aspect-ratio: 1 / 1; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .service-banner-copy { grid-column: 1; grid-row: 1; align-self: start; padding: 24px 22px 18px; }
  .service-banner-copy > strong { font-size: clamp(27px, 7.5vw, 40px); }
  .service-category-icons { position: absolute; z-index: 3; top: 54%; left: 20px; width: 144px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 4px; margin: 0; padding: 0; border: 0; }
  .service-category-icons svg { width: 24px; height: 24px; }
  .service-category-icons small { font-size: 9px; }
  .service-banner-list { grid-template-columns: 1fr; gap: 4px; margin-top: 10px; padding-top: 9px; }
  .service-banner-list span { flex-direction: row; align-items: baseline; gap: 8px; font-size: 11px; white-space: nowrap; }
  .service-banner-list b { font-size: 10px; }
  .service-brand-art { grid-column: 1; grid-row: 2; }
  .service-brand-art::before { inset: 0; height: auto; background: linear-gradient(180deg, #e7ded3 0%, rgba(231,222,211,0) 30%, rgba(34,30,27,.1) 60%, rgba(34,30,27,.86) 100%); }
  .service-brand-art::after { display: none; }
  .consult-slide { display: grid; grid-template-rows: auto minmax(0, 1fr); aspect-ratio: 1 / 1; }
  .consult-slide::after { display: none; }
  .consult-visual { position: relative; inset: auto; grid-row: 2; width: 100%; min-height: 0; }
  .consult-visual::before { content: ''; position: absolute; inset: 0 0 auto; height: clamp(48px, 8vw, 90px); z-index: 1; pointer-events: none; background: linear-gradient(180deg, #292724, rgba(41,39,36,0)); }
  .consult-photo-frame { top: 40%; transform: translateY(-40%); }
  .consult-copy { position: relative; grid-row: 1; left: auto; top: auto; transform: none; width: auto; padding: 24px 22px 22px; }
  .consult-eyebrow { font-size: 11px; }
  .consult-copy > strong { margin-top: 9px; font-size: clamp(29px, 7.5vw, 42px); }
  .consult-description { margin-top: 9px; font-size: clamp(13px, 3.4vw, 18px); }
  .consult-cta { margin-top: 15px; padding: 9px 12px; font-size: 12px; }
  .hero { width: 100%; max-width: none; margin: 0; border-radius: 0; }
  .hero-ctrl { position: absolute; z-index: 5; right: 10px; bottom: 8px; justify-content: center; border-radius: 999px; padding: 0 4px 0 8px; background: rgba(22,23,28,.72); }
  section { padding-top: 40px; }
  .sec-head h2 { font-size: 21px; }
  .products { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .p-img { height: 130px; }
  .usp .wrap { grid-template-columns: 1fr 1fr; gap: 18px; }
  .f-strip .wrap { grid-template-columns: 1fr; gap: 8px; padding-top: 16px; padding-bottom: 16px; }
  .f-box { padding: 10px 14px; gap: 14px; }
  .f-box svg.ic { width: 26px; height: 26px; }
  .f-box b { font-size: 15px; }
  .f-cols { grid-template-columns: 1fr 1fr; gap: 24px 16px; padding: 28px 16px 20px; }
  .f-brand, .f-about { grid-column: span 2; }
  .f-brand { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; }
  .f-brand img { margin-bottom: 0; }
  .f-brand p:not(.f-tag) { display: none; }
  .f-brand .f-tag { grid-row: 2; margin-top: 8px; }
  .f-social { grid-row: 1 / 3; grid-column: 2; margin-top: 0; gap: 8px; }
  .f-social a, .f-social span { height: 34px; min-width: 34px; padding: 0 8px; }
  .f-box em { display: none; }
  .f-contact { display: none; }
  footer h4 { margin-bottom: 8px; }
  footer li { margin-bottom: 0; }
  footer li a { display: block; padding: 5px 0; }
  .f-about ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .f-bottom .wrap { flex-direction: column; justify-content: center; gap: 8px; height: auto; padding-top: 14px; padding-bottom: 80px; }
  .fab { right: 14px; bottom: 14px; }
}
@media (min-width: 600px) and (max-width: 760px) {
  .slide img { aspect-ratio: 5 / 2; object-position: left center; }
  .service-slide { aspect-ratio: 5 / 2; grid-template-columns: 52% 48%; grid-template-rows: 1fr; }
  /* Tiêu đề + 3 dịch vụ + icon xếp dọc thành 1 khối, căn giữa theo chiều cao banner */
  .service-banner-copy { grid-column: 1; grid-row: 1; align-self: center; display: flex; flex-direction: column; padding: 0 20px; }
  .service-banner-copy > strong { font-size: clamp(24px, 3.8vw, 31px); }
  .service-banner-list { margin-top: clamp(14px, 3.6vw, 26px); padding-top: 0; }
  .service-category-icons { position: static; order: 2; width: auto; margin-top: clamp(14px, 3.6vw, 26px); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
  .service-category-icons span { gap: 3px; }
  .service-category-icons svg { width: 20px; height: 20px; }
  .service-category-icons small { font-size: 8px; }
  .service-brand-art { grid-column: 2; grid-row: 1; margin: 0; }
  .service-brand-art::before { background: linear-gradient(90deg, #e7ded3 0%, rgba(231,222,211,.8) 12%, rgba(231,222,211,.35) 30%, transparent 50%); }
  .service-photo-frame { left: 95%; transform: translateX(-95%); }
  .consult-slide { display: block; aspect-ratio: 5 / 2; }
  .consult-slide::after { display: block; background: linear-gradient(90deg, #292724 0%, #292724 43%, rgba(41,39,36,.9) 49%, rgba(41,39,36,.45) 59%, transparent 71%); }
  .consult-visual { position: absolute; inset: 0 0 0 auto; width: 57%; }
  .consult-visual::before { display: none; }
  .consult-photo-frame { top: 50%; transform: translateY(-50%); }
  .consult-copy { position: absolute; left: 5%; top: 50%; transform: translateY(-50%); width: 47%; padding: 0; }
  .consult-copy > strong { font-size: clamp(28px, 4.4vw, 36px); }
  .consult-description { margin-top: 8px; font-size: clamp(12px, 1.7vw, 14px); }
  .consult-cta { margin-top: 10px; padding: 8px 10px; font-size: 11px; }
}
@media (max-width: 599px) {
  .service-banner-copy { z-index: 2; padding: 18px 22px 8px; }
  .service-category-icons { top: 49%; left: 16px; width: 150px; }
  .service-brand-art { margin-top: -16px; }
  .service-brand-art::before { background: linear-gradient(180deg, #e7ded3 0%, rgba(231,222,211,0) 25%, rgba(34,30,27,.12) 50%, rgba(34,30,27,.9) 100%); }
  .service-photo-frame { left: 78%; transform: translateX(-78%); }
  .consult-copy { padding: 18px 22px 5px; }
  .consult-visual { margin-top: -14px; }
  .consult-visual::before { height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .th-track { animation: none; }
  .th-dai { overflow-x: auto; scrollbar-width: none; }
  html { scroll-behavior: auto; }
  .slide { transition: none; }
  .tick { overflow-x: auto; scrollbar-width: none; }
  .tick-track { animation: none; }
}

/* Trang danh mục /san-pham/ */
.catalog { padding: 40px 0 16px; }
.cat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 20px; }
.cat-head h1 { font-size: 34px; font-weight: 700; letter-spacing: -1px; margin: 10px 0 8px; }
.cat-head p { color: var(--text2); font-size: 15px; }
.sort { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text2); white-space: nowrap; }
.sort select { height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 13.5px; background: #fff; color: var(--black); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-size: 13.5px; font-weight: 500; cursor: pointer; color: var(--text2); transition: border-color .2s, color .2s; }
.chip span { color: var(--text3); font-size: 12px; margin-left: 2px; }
.chip:hover { border-color: var(--orange); color: var(--black); }
.chip.on { border-color: var(--black); background: var(--black); color: #fff; }
.chip.on span { color: #aaa; }
.catalog-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.catalog-grid .p-card { padding: 0; }
.load-more { display: flex; justify-content: center; min-width: 190px; margin: 24px auto 0; }
.load-more[hidden] { display: none; }
.p-open { all: unset; cursor: pointer; display: flex; flex-direction: column; min-width: 0; }
.p-open:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: var(--radius); }
.catalog-grid .p-img { background: #fff; border: 1px solid var(--line); }
.p-img svg.ph { width: 58px; height: 58px; stroke-width: 1; color: #c9c9c9; }
.p-img .tag.out { background: var(--black); color: #fff; border-color: var(--black); }
.catalog-grid .p-name { font-size: 14px; margin-bottom: 6px; }
.p-var { font-size: 12px; color: var(--text2); margin-bottom: 8px; }
.catalog-grid .p-price { margin-bottom: 0; font-size: 15px; }
.p-dialog { margin: auto; border: 0; border-radius: var(--radius); padding: 0; width: min(880px, calc(100% - 32px)); max-height: calc(100% - 48px); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.p-dialog::backdrop { background: rgba(20,20,24,.55); }
.dlg-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.dlg-close:hover { border-color: var(--orange); color: var(--orange); }
.dlg-grid { display: grid; grid-template-columns: 1fr 1.1fr; }
.dlg-img { background: var(--soft); display: flex; align-items: center; justify-content: center; min-height: 360px; padding: 24px; }
.dlg-img img { max-height: 340px; object-fit: contain; }
.dlg-img svg.ic { width: 110px; height: 110px; stroke-width: .9; color: #c9c9c9; }
.dlg-body { padding: 32px 30px 28px; }
.dlg-body h2 { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.3px; margin: 8px 40px 12px 0; }
.dlg-price { font-size: 24px; font-weight: 700; color: var(--orange); margin-bottom: 16px; }
.dlg-price small { font-size: 13px; color: var(--text3); font-weight: 500; margin-left: 6px; }
.dlg-var { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.dlg-var button { border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: 8px 12px; font-size: 13px; cursor: pointer; text-align: left; line-height: 1.35; }
.dlg-var button b { display: block; font-size: 12.5px; color: var(--orange); }
.dlg-var button.on { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.dlg-var button.het { color: var(--text3); }
.dlg-var button.het b { color: var(--text3); }
.dlg-spec { list-style: none; border-top: 1px solid var(--line); margin-bottom: 14px; }
.dlg-spec li { font-size: 13.5px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--text2); }
.dlg-note { font-size: 12.5px; color: var(--text3); line-height: 1.55; margin-bottom: 18px; }
.dlg-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.dlg-cta .btn { flex: 1; justify-content: center; white-space: nowrap; }
.dlg-mail { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--text2); text-decoration: underline; text-underline-offset: 3px; }
.dlg-mail:hover { color: var(--orange); }
@media (max-width: 1239px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .cat-head { flex-direction: column; align-items: flex-start; }
  .cat-head h1 { font-size: 26px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 16px; padding: 0 16px; scrollbar-width: none; }
  .chip { flex-shrink: 0; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .dlg-grid { grid-template-columns: 1fr; }
  .dlg-img { min-height: 200px; }
  .dlg-img img { max-height: 200px; }
  .dlg-body { padding: 22px 18px 20px; }
  .dlg-body h2 { font-size: 19px; }
}

/* Trang chính sách */
.policy { padding: 44px 0 20px; }
.policy-grid { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
.policy-nav { position: sticky; top: 96px; }
.policy-nav nav { display: flex; flex-direction: column; margin: 14px 0 20px; border-left: 1px solid var(--line); }
.policy-nav nav a { padding: 9px 14px; font-size: 14px; color: var(--text2); border-left: 2px solid transparent; margin-left: -1px; }
.policy-nav nav a:hover { color: var(--black); }
.policy-nav nav a.on { color: var(--black); font-weight: 600; border-left-color: var(--orange); }
.policy-help { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; font-size: 13px; color: var(--text2); display: flex; flex-direction: column; gap: 4px; }
.policy-help a { color: var(--orange); font-weight: 700; font-size: 15px; }
.policy-body { max-width: 760px; }
.policy-body h1 { font-size: 34px; font-weight: 700; letter-spacing: -1px; margin-bottom: 12px; }
.policy-body .lead { font-size: 16px; line-height: 1.65; color: var(--text2); margin-bottom: 28px; padding-left: 16px; border-left: 3px solid var(--orange); }
.policy-body h2 { font-size: 19px; font-weight: 700; margin: 30px 0 12px; }
.policy-body p, .policy-body li { font-size: 15px; line-height: 1.7; color: #333; }
.policy-body ul, .policy-body ol { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.policy-body a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.policy-body table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14.5px; }
.policy-body th, .policy-body td { text-align: left; vertical-align: top; padding: 11px 14px; border: 1px solid var(--line); line-height: 1.55; }
.policy-body th { background: var(--soft); font-weight: 600; }
.policy-date { margin-top: 32px; font-size: 13px !important; color: var(--text3) !important; }
@media (max-width: 760px) {
  .policy { padding-top: 28px; }
  .policy-grid { grid-template-columns: 1fr; gap: 24px; }
  .policy-nav { position: static; order: 2; }
  .policy-body h1 { font-size: 26px; }
  .policy-body table { font-size: 13.5px; }
  .policy-body th, .policy-body td { padding: 9px 10px; }
}

/* 12. Build PC (/build-pc/) + giỏ hàng + đặt hàng (/dat-hang/) */
.bp-grid, .dh-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.bp-box { padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 20px; overflow: hidden; }
.bp-box h2 { font-size: 15px; font-weight: 700; padding: 13px 18px; background: var(--soft); border-bottom: 1px solid var(--line); }
.bp-row { display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.bp-row:last-child { border-bottom: 0; }
.bp-label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.bp-label svg.ic { color: var(--orange); }
.bp-add { padding: 9px 16px; border: 1px dashed var(--orange); background: #fff; color: var(--orange); }
.bp-add:hover { background: var(--orange); color: #fff; }
.bp-soon { display: inline-block; font-size: 12.5px; color: var(--text3); background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 6px 12px; }
.bp-pick, .bp-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; }
.bp-img { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 4px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bp-img img { max-height: 100%; object-fit: contain; }
.bp-img svg.ic { width: 30px; height: 30px; color: #c9c9c9; stroke-width: 1.1; }
.bp-name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.bp-ts { font-size: 12.5px; color: var(--text2); margin-top: 2px; line-height: 1.4; }
.bp-pb { margin-top: 6px; font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.bp-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.bp-price { font-size: 15px; font-weight: 700; color: var(--orange); white-space: nowrap; }
.bp-qty { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; }
.bp-qty button { width: 30px; height: 30px; border: 0; background: #fff; font-size: 16px; cursor: pointer; }
.bp-qty button:hover { color: var(--orange); }
.bp-qty span { min-width: 28px; text-align: center; line-height: 30px; font-size: 14px; font-weight: 600; }
.bp-act { display: flex; gap: 12px; }
.bp-act button { border: 0; background: none; font-size: 12.5px; color: var(--text3); text-decoration: underline; cursor: pointer; }
.bp-act button:hover { color: var(--orange); }
.bp-warn { margin-top: 8px; padding: 7px 10px; border-radius: 4px; font-size: 12.5px; line-height: 1.45; background: #FFF6E5; color: #8A5A00; }
.bp-warn.no { background: #FDECEC; color: #B42318; }
.bp-tag { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 3px; font-size: 11.5px; font-weight: 600; background: #FFF6E5; color: #8A5A00; }
.bp-tag.ok { background: #E8F6EE; color: #1B7A43; }
.bp-tag.no { background: #FDECEC; color: #B42318; }
.bp-sum { position: sticky; top: 92px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 20px; }
.bp-sum h2 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.bp-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.bp-line span { color: var(--text2); }
.bp-hint { font-size: 12.5px; color: var(--text3); line-height: 1.5; margin: 8px 0; }
.bp-hint a { color: var(--orange); }
.bp-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-size: 14px; }
.bp-total b { font-size: 22px; color: var(--orange); }
.bp-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.bp-btns .btn { justify-content: center; width: 100%; }
.bp-btns .btn:disabled { opacity: .6; cursor: wait; }
.bp-mini { display: flex; justify-content: space-between; }
.bp-mini button { border: 0; background: none; padding: 4px 0; font-size: 13px; color: var(--text2); text-decoration: underline; cursor: pointer; }
.bp-mini button:hover { color: var(--orange); }
.bp-dlg { width: min(760px, calc(100% - 32px)); }
.bp-dlg-head { padding: 22px 24px 12px; border-bottom: 1px solid var(--line); }
.bp-dlg-head h2 { font-size: 19px; margin: 0 44px 12px 0; }
#bp-q { width: 100%; height: 42px; padding: 0 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 14px; }
#bp-q:focus { outline: none; border-color: var(--orange); }
.bp-dlg .chips { margin-bottom: 8px; }
.bp-an { display: none; font-size: 13px; color: var(--text2); }
.bp-an.show { display: block; }
.bp-an button { border: 0; background: none; color: var(--orange); font-weight: 600; text-decoration: underline; cursor: pointer; }
.bp-list { padding: 4px 24px 20px; }
.bp-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.bp-item.het { opacity: .55; }
.bp-item .btn { padding: 8px 18px; }
.bp-het { font-size: 12.5px; color: var(--text3); }
.bp-empty { padding: 32px; text-align: center; color: var(--text3); }
.bp-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 6px; background: var(--black); color: #fff; font-size: 14px; line-height: 1.5; opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .25s, transform .25s; }
.bp-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.bp-toast a { color: var(--orange-light); text-decoration: underline; }
.gio-nut { position: fixed; left: 20px; bottom: 20px; z-index: 45; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 30px; background: var(--black); color: #fff; font: inherit; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.2); cursor: pointer; }
.gio-nut span { padding-left: 8px; border-left: 1px solid rgba(255,255,255,.25); font-weight: 700; }
/* Ô giỏ hàng nhanh (js/gio-hang.js) */
.gio-hop { position: fixed; left: 20px; bottom: 76px; z-index: 46; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.gio-hop[hidden] { display: none; }
.gio-dau { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.gio-thao-tac { display: flex; align-items: center; gap: 4px; }
.gio-trong { padding: 20px 0; color: var(--text2); font-size: 13px; }
.gio-xoa-het[hidden], .gio-tong[hidden], .gio-dat[hidden] { display: none; }
.gio-dau button, .gio-xoa { width: 36px; height: 36px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--text3); cursor: pointer; }
.gio-dau .gio-xoa-het { width: auto; height: 44px; padding: 0 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.gio-dau .gio-dong-hop, .gio-xoa { width: 44px; height: 44px; }
.gio-dau button:hover, .gio-xoa:hover { color: var(--orange); }
.gio-dong-hop i { display: block; width: 14px; height: 2px; margin: 8px auto 0; border-radius: 1px; background: currentColor; } /* dấu "_" thu gọn: tránh hiểu nhầm X là xoá giỏ */
.gio-ds { overflow-y: auto; padding: 4px 16px; }
.gio-mon { display: grid; grid-template-columns: 52px 1fr 44px; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.gio-mon:last-child { border-bottom: 0; }
.gio-mon img, .gio-anh { width: 52px; height: 52px; object-fit: contain; border-radius: 4px; background: var(--soft); }
.gio-mon b { display: block; font-size: 13px; line-height: 1.35; }
.gio-mon small { display: block; margin-top: 2px; color: var(--text3); font-size: 12px; }
.gio-dong { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.gio-dong strong { font-size: 13.5px; }
.gio-tong { display: flex; justify-content: space-between; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--soft); font-size: 13px; color: var(--text2); }
.gio-tong div { text-align: right; }
.gio-tong small { display: block; font-size: 12px; }
.gio-tong b { font-size: 20px; color: var(--orange); }
.gio-dat { margin: 12px 16px 16px; justify-content: center; }
/* Ô chọn số lượng dùng chung */
.sl { display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.sl button { width: 32px; height: 100%; border: 0; background: none; font-size: 17px; color: var(--text2); cursor: pointer; }
.sl button:hover { color: var(--orange); }
.sl input, .sl > span { width: 36px; border: 0; text-align: center; font: inherit; font-size: 14px; font-weight: 600; -moz-appearance: textfield; }
.sl input::-webkit-inner-spin-button, .sl input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.gio-dong .sl { height: 30px; }
.gio-dong .sl button { width: 28px; }
.dlg-sl, .ct-sl { height: 48px; }
/* Nút mua trên thẻ sản phẩm */
.p-card { display: flex; flex-direction: column; }
.p-card > .p-open { flex: 1; min-height: 0; }
.p-mua { display: flex; gap: 6px; padding: 0 14px 14px; }
.p-mua .btn { flex: 1; justify-content: center; min-height: 36px; padding: 0 10px; font-size: 13px; }
.p-mua .sl { flex: 1; min-width: 0; justify-content: space-between; }
.p-mua .sl input { flex: 1; min-width: 0; }
.p-mua .p-them { flex: 0 0 44px; min-height: 36px; padding: 0; } /* nút chỉ có icon giỏ hàng */
.p-mua .p-them svg.ic { width: 20px; height: 20px; stroke-width: 1.8; }
.p-mua .p-them.da-them { background: #1f9d55; }
.p-chon { border-color: var(--line); background: #fff; color: var(--black); }
.p-chon:hover { border-color: var(--orange); color: var(--orange); }
/* Ô gợi ý tìm kiếm */
.search { position: relative; }
.goi-y { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 340px; z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.16); overflow: hidden; }
.goi-y[hidden] { display: none; }
.goi-y a { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 8px 12px; color: var(--black); }
.goi-y a:hover, .goi-y a.on { background: var(--soft); }
.goi-y img, .goi-y a > span { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; background: var(--soft); }
.goi-y b { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goi-y small { font-size: 12px; color: var(--text3); }
.goi-y .goi-y-het { display: flex; justify-content: center; gap: 6px; border-top: 1px solid var(--line); color: var(--orange); font-size: 13px; font-weight: 600; }
.goi-y .goi-y-het svg.ic { width: 14px; height: 14px; }
.goi-y p { padding: 14px; font-size: 13px; color: var(--text2); }
.goi-y p a { display: inline; padding: 0; color: var(--orange); font-weight: 600; }
.gio-nut b { margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: var(--orange); }
.gio-nut[hidden] { display: none; }
.dlg-var.nhac button:not(.het) { border-color: var(--orange); }
.dh-grid .bp-box { padding: 0 18px 16px; }
.dh-grid .bp-box h2 { margin: 0 -18px 14px; }
#dh-mon .bp-pick { padding: 12px 0; border-bottom: 1px solid var(--line); }
#dh-mon .bp-pick:last-child { border-bottom: 0; }
.dh-box { max-width: 640px; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.dh-note p { font-size: 15px; line-height: 1.6; color: var(--text2); margin-bottom: 16px; }
.dh-f { display: block; margin-bottom: 14px; }
.dh-f span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.dh-f b, .dh-sao { color: var(--orange); }
.dh-f input, .dh-f textarea, .dh-f select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 14px; }
.dh-f input:focus, .dh-f textarea:focus, .dh-f select:focus { outline: none; border-color: var(--orange); }
.dh-f select { background: #fff; }
.dh-hd { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.dh-hd input { width: 16px; height: 16px; accent-color: var(--orange); }
.dh-hd-o { border-left: 3px solid var(--orange); padding-left: 14px; margin-bottom: 8px; }
.dh-chi-in { display: none; }
.dh-f.sai input, .dh-f.sai textarea, .dh-f.sai select { border-color: #B42318; background: #FFF8F8; }
.dh-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dh-bay { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.dh-cach { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; }
.dh-cach label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.dh-cach label:has(input:checked) { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.dh-cach input { margin-top: 3px; accent-color: var(--orange); }
.dh-cach b { display: block; font-size: 13.5px; }
.dh-cach small { font-size: 12.5px; color: var(--text3); }
.dh-loi { color: #B42318; font-size: 13px; line-height: 1.5; }
.dh-qr { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.dh-qr img { border: 1px solid var(--line); border-radius: 4px; }
.dh-qr p { font-size: 14px; color: var(--text2); }
.dh-tk { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.dh-tk td { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.dh-tk td:first-child { width: 130px; color: var(--text3); }
.dh-cho { font-size: 13px; color: var(--text3); }
.dh-ok { padding: 12px 14px; border-radius: 4px; background: #E8F6EE; color: #1B7A43; font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) {
  .bp-grid, .dh-grid { grid-template-columns: 1fr; }
  .bp-sum { position: static; }
}
@media (max-width: 760px) {
  .bp-row { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
  .bp-pick, .bp-item { grid-template-columns: 52px 1fr; }
  .bp-img { width: 52px; height: 52px; }
  .bp-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .bp-dlg-head { padding: 18px 16px 10px; }
  .bp-list { padding: 4px 16px 16px; }
  .dh-2, .dh-qr { grid-template-columns: 1fr; }
  .dh-qr img { margin: 0 auto; }
  .gio-nut { left: 16px; bottom: 16px; }
  .gio-hop { left: 16px; bottom: 70px; }
  .goi-y { min-width: 0; position: fixed; top: auto; left: 12px; right: 12px; margin-top: 6px; }
  .p-mua { padding: 0 10px 10px; }
  .p-mua .sl button { width: 28px; }
}
/* 13. Khung thông số trên thẻ, bộ lọc theo thông số (/san-pham/), trang chi tiết sản phẩm (/san-pham/<mã>/) */
.p-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 16px); gap: 4px 7px; height: 54px; min-width: 0; overflow: hidden; background: var(--soft); border-radius: 4px; padding: 7px 8px; margin-bottom: 8px; font-size: 11.5px; color: var(--text2); line-height: 16px; }
.p-chips > span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
.p-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-chips svg.ic { flex: 0 0 13px; }
.p-chips svg.ic { width: 13px; height: 13px; color: var(--text3); }
/* Khung lọc: mỗi dòng 1 tiêu chí, nhãn trái cùng cột, nút cùng chiều cao */
.loc { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; padding: 12px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.loc-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.loc-toggle { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--black); cursor: pointer; }
.loc-toggle-title { font-size: 14px; font-weight: 700; }
.loc-toggle-action { color: var(--orange-dark); font-size: 13px; font-weight: 600; }
.loc-chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.loc:not(.is-collapsed) .loc-chevron { transform: translateY(2px) rotate(225deg); }
.loc-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.loc-body { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.loc.is-collapsed .loc-body { display: none; }
.loc .chips { margin: 0; gap: 6px; }
.loc .chip { min-height: 36px; padding: 0 12px; font-size: 13px; }
.facets { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.facets:empty { display: none; }
.facet { display: flex; gap: 12px; align-items: flex-start; }
.facet > span { flex-shrink: 0; width: 96px; padding-top: 9px; font-size: 13px; font-weight: 600; color: var(--text2); }
.facet > div { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chip.nho { min-height: 36px; padding: 0 12px; font-size: 13px; }
.chip.nho.mo:disabled { border-color: transparent; background: none; color: #b5b5b5; padding: 0 8px; } /* hãng chưa có hàng: chỉ mờ */
.chip.nho:disabled span { font-size: 10.5px; margin-left: 4px; padding: 1px 5px; border-radius: 3px; background: #fff; border: 1px solid var(--line); }
.ct { padding-top: 24px; }
.ct-duong { font-size: 13px; color: var(--text3); margin-bottom: 18px; }
.ct-duong a:hover { color: var(--orange); }
.ct-duong span { color: var(--text2); }
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.ct-anh-chinh { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 28px; }
.ct-anh-chinh img { max-height: 100%; object-fit: contain; }
.ct-anh-nho { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ct-anh-nho button { width: 68px; height: 68px; border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 6px; cursor: pointer; }
.ct-anh-nho button.on, .ct-anh-nho button:hover { border-color: var(--orange); }
.ct-anh-nho img { width: 100%; height: 100%; object-fit: contain; }
.ct-body h1 { font-size: 26px; line-height: 1.3; letter-spacing: -.3px; margin: 6px 0 12px; }
.ct-nhan { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ct-nhan span { font-size: 12.5px; padding: 4px 10px; border-radius: 3px; background: var(--soft); border: 1px solid var(--line); color: var(--text2); }
.ct-nhan span.het { background: var(--black); color: #fff; border-color: var(--black); }
.ct-noibat { list-style: none; border-top: 1px solid var(--line); margin-bottom: 18px; }
.ct-noibat li { font-size: 14px; padding: 8px 0 8px 18px; border-bottom: 1px solid var(--line); color: var(--text2); position: relative; }
.ct-noibat li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.ct-build { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--orange); border-bottom: 1px dashed var(--orange); }
.ct-body .dlg-note { margin-top: 14px; }
.ct-camket { list-style: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 16px; }
.ct-camket li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; font-size: 13.5px; color: var(--text2); line-height: 1.45; }
.ct-camket li + li { border-top: 1px dashed var(--line); }
.ct-camket svg.ic { color: var(--orange); width: 20px; height: 20px; margin-top: 1px; }
.ct-camket a { color: var(--orange); white-space: nowrap; }
.ct-ts, .ct-lq { margin-top: 40px; padding-top: 0; }
.ct-ts h2, .ct-lq h2 { font-size: 20px; margin-bottom: 14px; }
.ct-ts table { width: 100%; max-width: 760px; border-collapse: collapse; font-size: 14px; }
.ct-ts th, .ct-ts td { text-align: left; padding: 10px 14px; border: 1px solid var(--line); vertical-align: top; }
.ct-ts th { width: 34%; background: var(--soft); font-weight: 600; color: var(--text2); }
@media (max-width: 900px) {
  .ct-grid { grid-template-columns: 1fr; gap: 20px; }
  .ct-anh-chinh { aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  .loc { padding: 12px; margin: 0 -4px 18px; }
  .loc .chips { margin: 0; padding: 0; }
  .facet > span { padding-top: 0; }
  .facet { flex-direction: column; gap: 6px; }
  .facet > div { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .chip.nho { flex-shrink: 0; }
  .ct-body h1 { font-size: 21px; }
}

@media print {
  .topbar, header, footer, .fab, .gio-nut, .bp-toast, .cat-head p, .bp-add, .bp-act, .bp-qty button, .bp-btns, .bp-row:not(.on) { display: none !important; }
  .bp-grid { display: block; }
  .bp-sum { position: static; border: 0; padding: 0; }
  .bp-box { break-inside: avoid; }
  #dh-kh, .dh-cach, .dh-loi, #dh-tong .bp-hint, .bp-mini, .gio-nut { display: none !important; }
  .dh-grid { display: block; }
  .dh-chi-in { display: block; font-size: 12px; margin-top: 12px; }
}

/* Menu Dịch vụ (js/site.js dựng, cùng khung bảng xổ với Sản phẩm, Ưu đãi): trái 4 ô dịch vụ, phải 1 ưu đãi nổi bật */
.dv-menu { display: grid; grid-template-columns: 1fr 340px; gap: 24px; padding: 26px 28px; }
.dv-menu-trai { display: flex; flex-direction: column; gap: 16px; }
.dv-menu-luoi { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dv-menu-luoi a { display: flex; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s, background .2s; }
.dv-menu-luoi a:hover { border-color: var(--orange); background: var(--soft); }
.dv-menu-luoi svg.ic { width: 28px; height: 28px; color: var(--orange); stroke-width: 1.3; }
.dv-menu-luoi span { display: flex; flex-direction: column; gap: 4px; }
.dv-menu-luoi strong { font-size: 15.5px; }
.dv-menu-luoi small { font-size: 13px; line-height: 1.5; color: var(--text2); }
.dv-menu-ud { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--charcoal); color: #fff; }
.dv-menu-ud img { width: 100%; aspect-ratio: 785 / 466; object-fit: cover; }
.dv-menu-ud span { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.dv-menu-ud small { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #ffc19f; text-transform: uppercase; font-family: 'Be Vietnam Pro', sans-serif; }
.dv-menu-ud strong { font-size: 15px; line-height: 1.35; }
.dv-menu-ud em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--orange-light); display: inline-flex; align-items: center; gap: 6px; }
.dv-menu-ud em svg.ic { width: 14px; height: 14px; }
.dv-bang { width: 100%; border-collapse: collapse; background: #fff; font-size: 14.5px; margin-top: 4px; }
.dv-bang th, .dv-bang td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.dv-bang th { font-size: 12.5px; color: var(--text3); font-weight: 600; }
.dv-bang td:first-child { font-weight: 600; }

/* 4. Ngành hàng: lưới bento desktop 6 cột x 4 hàng, ô to nhỏ đan xen, ô tối ô sáng xen kẽ.
   Ưu đãi là con số to (ng-so) thay cho nhãn cam; dòng nhỏ phía trên (ng-nho) nói số đó là gì. */
.nganh { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 164px); gap: 14px; }
.o-mh { grid-area: 1 / 1 / 3 / 4; }
.o-bp { grid-area: 1 / 4 / 2 / 7; }
.o-chuot { grid-area: 2 / 4 / 4 / 5; }
.o-lk { grid-area: 2 / 5 / 3 / 7; }
.o-tn { grid-area: 3 / 1 / 4 / 4; }
.o-cth { grid-area: 4 / 4 / 5 / 6; }
.o-arm { grid-area: 4 / 1 / 5 / 4; }
.o-pk { grid-area: 3 / 5 / 4 / 6; }
.o-build { grid-area: 3 / 6 / 5 / 7; }
.ng { position: relative; overflow: hidden; border: 1px solid transparent; border-radius: 14px; background: var(--soft); padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-start; color: var(--black); transition: box-shadow .25s, transform .25s; }
.ng[hidden] { display: none; }
.ng:not(.toi):not(.cam) { border-color: #dedede; }
.ng:not(.toi):not(.cam):not(:hover) { box-shadow: 0 2px 10px rgba(26,26,26,.06); }
/* Mục ngành hàng nằm trên dải nền xám ấm, ô sáng đổi sang trắng: mép ô rõ mà không cần viền */
#nganh-hang { background: #F2F0EC; padding: 48px 0 56px; margin-top: 56px; }
#nganh-hang .ng:not(.toi):not(.cam) { background: #fff; border-color: transparent; }
.ng:hover { box-shadow: 0 16px 36px rgba(0,0,0,.12); transform: translateY(-2px); }
.ng:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.ng > :not(img) { position: relative; z-index: 3; }
.ng > .ng-so { z-index: 1; }
.ng > img:not(.mark) { z-index: 2; }
.ng-ten { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.ng-nho { margin-top: 10px; font-size: 12.5px; font-weight: 500; color: var(--text2); }
.ng-so { font-size: 40px; font-weight: 700; letter-spacing: -1.6px; line-height: 1; margin-top: 2px; background: linear-gradient(120deg, var(--orange-light), var(--orange-dark)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ng-phu { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text2); max-width: 46%; }
.ng-gia { margin-top: auto; font-size: 12px; font-weight: 600; color: var(--text3); }
.ng img { position: absolute; right: 14px; bottom: 14px; width: 52%; height: 60%; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 12px 14px rgba(0,0,0,.18)); transition: transform .45s ease, opacity 1.1s ease-in-out; }
.ng:hover img { transform: scale(1.05); }
/* Màu ô */
.ng.toi { background: radial-gradient(circle at 75% 65%, #3a3f52, #15161a 75%); color: #fff; }
.ng.toi .ng-nho, .ng.toi .ng-phu { color: #b5b8c2; }
.ng.toi .ng-gia { color: #8d919c; }
.ng.toi .ng-so { background-image: linear-gradient(170deg, #fff 35%, #ffb489); }
.ng.toi img { filter: drop-shadow(0 20px 26px rgba(0,0,0,.55)); }
.ng.xam { background: linear-gradient(170deg, #fff, #ececec); }
.ng.cam { background: linear-gradient(135deg, var(--orange-light), var(--orange) 45%, var(--orange-dark)); color: #fff; }
.ng.cam .ng-nho, .ng.cam .ng-phu { color: rgba(255,255,255,.88); }
.ng.cam .ng-so { background: none; color: #fff; }
.ng.cam img.mark { width: 150px; height: auto; right: -24px; bottom: -34px; opacity: .18; filter: none; }
/* Cỡ ô */
.o-lon { padding: 34px 36px; }
.o-lon .ng-ten { font-size: 22px; }
.o-lon .ng-nho { margin-top: 18px; font-size: 15px; }
.o-lon .ng-so { font-size: 96px; letter-spacing: -6px; margin-top: 4px; }
.o-lon .ng-phu { font-size: 14.5px; max-width: 30%; margin-top: 16px; }
.o-lon .ng-gia { font-size: 14px; }
.o-lon img { width: 60%; height: 68%; right: 38px; bottom: 66px; }
.o-ngang3 .ng-so { font-size: 64px; letter-spacing: -3px; }
.o-ngang3 .ng-nho { margin-top: 8px; }
.o-ngang3 .ng-phu { display: none; }
.o-ngang3 img { width: 58%; height: 76%; right: 42px; }
.o-ngang2 .ng-so { font-size: 44px; }
.o-ngang2 .ng-phu { max-width: 46%; }
.o-ngang2 img { width: 54%; height: 74%; right: 20px; }
.o-lk img { right: 14px; }
.o-doc .ng-so { font-size: 44px; }
.o-doc .ng-phu { max-width: none; }
.o-doc .ng-gia { margin-top: 8px; }
.o-doc img { width: 82%; height: 50%; right: 9%; bottom: 16px; object-position: center bottom; }
.o-nho .ng-so { font-size: 30px; letter-spacing: -1px; }
.o-nho .ng-gia { display: none; }
.o-nho img { width: 46%; height: 33%; right: 10px; bottom: 10px; }
.nganh .o-tn .ng-so { font-size: 32px; letter-spacing: -.5px; }
/* Vị trí ảnh dưới đây chỉ dùng khi tắt JS: script cuối index.html tự đặt ảnh vào khoảng trống không chạm chữ. */
.o-bp img { right: 112px; bottom: 0; height: 100%; }
.o-chuot img { width: 108%; height: 70%; right: -25%; bottom: 55px; }
.o-lk img { right: 77px; bottom: 43px; }
.o-cth .ng-phu { max-width: none; }
.o-arm .ng-so { font-size: 52px; }
.o-pk img[src*="phu-kien-gia-laptop"] { transform: scale(1.16); }
.o-pk:hover img[src*="phu-kien-gia-laptop"] { transform: scale(1.2); }
.o-tn img[src*="gjallar"] { object-fit: cover; }
@media (min-width: 1240px) {
  .o-tn img { width: 52%; height: 82%; right: 20px; bottom: 10px; }
  .o-cth .ng-phu { max-width: 46%; }
  .o-cth img { width: 54%; height: 74%; right: 20px; bottom: 14px; object-position: right bottom; }
  .o-build .ng-so { font-size: 38px; letter-spacing: -1px; }
  .o-build .ng-phu { max-width: none; }
}

/* Trang dịch vụ, khuyến mãi, tin tức (tools/web-catalog/dung_trang_dich_vu.py) */
.dv { padding-bottom: 64px; }
.dv-hero { padding: 28px 0 0; }
.dv-hero-luoi { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.dv-hero h1, .bai-dau h1 { font-size: 38px; line-height: 1.12; font-weight: 700; letter-spacing: -1px; margin: 10px 0 12px; text-wrap: balance; }
.dv-hero-gon h1 { font-size: 32px; }
.dv .lead { font-size: 16px; line-height: 1.65; color: var(--text2); max-width: 640px; }
.dv-hero-anh { width: 100%; height: auto; max-height: 340px; object-fit: contain; border-radius: var(--radius); }
.dv-nut { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bc { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text3); margin-bottom: 16px; }
.bc a:hover { color: var(--orange); }
.dv-khoi.dv-xam { background: var(--soft); margin-top: 56px; padding-bottom: 56px; }
.dv h2 { font-size: 24px; font-weight: 700; letter-spacing: -.4px; line-height: 1.25; margin: 6px 0 14px; }
.dv .sec-head h2 { margin: 0; }
.dv-uu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dv-uu > div { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.dv-uu span { font-size: 14px; line-height: 1.55; color: var(--text2); }
.dv-uu .dv-so { font-size: 30px; font-weight: 700; color: var(--orange); letter-spacing: -.5px; }
.dv-dich-vu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dv-dich-vu article { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s; }
.dv-dich-vu article:hover { border-color: var(--orange); }
.dv-dich-vu svg.ic { width: 34px; height: 34px; stroke-width: 1.2; color: var(--orange); }
.dv-dich-vu h3 { font-size: 16px; font-weight: 700; }
.dv-dich-vu p { font-size: 13.5px; line-height: 1.55; color: var(--text2); }
.dv-dich-vu span { margin-top: auto; font-weight: 700; font-size: 14.5px; }
.dv-2cot { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.dv-ds { padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.65; color: #333; }
.dv-vd { margin-top: 16px; padding: 14px 16px; background: #fff; border-left: 3px solid var(--orange); font-size: 14.5px; line-height: 1.6; }
.dv-mo { font-size: 14.5px; line-height: 1.6; color: var(--text2); margin-bottom: 18px; }
.dv-buoc { list-style: none; counter-reset: buoc; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dv-buoc li { counter-increment: buoc; display: flex; flex-direction: column; gap: 6px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.dv-buoc li::before { content: counter(buoc, decimal-leading-zero); font-size: 13px; font-weight: 700; color: var(--orange); letter-spacing: 1px; }
.dv-buoc span { font-size: 14px; line-height: 1.55; color: var(--text2); }
.dv-hoi details { border-bottom: 1px solid var(--line); }
.dv-hoi summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.dv-hoi summary::after { content: '+'; color: var(--orange); font-size: 20px; line-height: 1; }
.dv-hoi details[open] summary::after { content: '−'; }
.dv-hoi details p { padding: 0 0 16px; font-size: 14.5px; line-height: 1.65; color: var(--text2); max-width: 820px; }
.dv-cuoi { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 32px; border-radius: var(--radius); color: #fff; background: linear-gradient(135deg, var(--orange-light), var(--orange) 45%, var(--orange-dark)); }
.dv-cuoi div { display: flex; flex-direction: column; gap: 4px; }
.dv-cuoi strong { font-size: 20px; }
.dv-cuoi span { color: rgba(255,255,255,.88); font-size: 14px; }

/* Khuyến mãi */
.kmp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.kmp-dem { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--orange-dark); background: #fff1e8; padding: 7px 12px; border-radius: 3px; }
.kmp-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kmp-the { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: border-color .2s, box-shadow .2s; scroll-margin-top: 110px; }
.kmp-the[hidden] { display: none; }
.kmp-the:hover { border-color: var(--orange); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.kmp-anh { border: 0; padding: 0; background: var(--charcoal); cursor: pointer; display: block; }
.kmp-anh img { width: 100%; height: auto; aspect-ratio: 785 / 466; object-fit: cover; }
.kmp-than { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kmp-nhan { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kmp-hang, .kmp-nganh { font-size: 11.5px; font-weight: 700; letter-spacing: .3px; padding: 3px 8px; border-radius: 3px; background: var(--off); color: var(--text2); }
.kmp-hang.nomi { background: var(--orange); color: #fff; }
.kmp-than h2 { font-size: 16.5px; line-height: 1.35; margin: 0; }
.kmp-qua { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.5; color: #333; }
.kmp-qua svg.ic { width: 17px; height: 17px; color: var(--orange); margin-top: 1px; }
.kmp-chan { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--text3); }
.kmp-tt { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 3px; white-space: nowrap; }
.kmp-tt.con { background: #e8f6ee; color: #1d7a45; }
.kmp-tt.gap { background: #fdecea; color: #c62828; font-variant-numeric: tabular-nums; }
.kmp-tt.sap { background: #eef1f8; color: var(--charcoal); }
.kmp-xem { justify-content: center; padding: 10px 16px; font-size: 13.5px; }
.kmp-trong { padding: 28px; text-align: center; color: var(--text2); border: 1px dashed var(--line); border-radius: var(--radius); }
.kmp-trong a { color: var(--orange); font-weight: 600; }
.kmp-dlg { margin: auto; border: 0; border-radius: var(--radius); padding: 0; width: min(760px, calc(100% - 32px)); max-height: calc(100% - 48px); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.kmp-dlg::backdrop { background: rgba(20,20,24,.55); }
.kmp-dlg .dlg-close { z-index: 3; }
.kmp-dlg-anh { width: 100%; height: auto; aspect-ratio: 785 / 466; object-fit: cover; background: var(--charcoal); }
.kmp-dlg-than { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 14px; }
.kmp-dlg-than h2 { margin: 0; font-size: 22px; }
.kmp-dl { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.kmp-dl > div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.55; }
.kmp-dl dt { color: var(--text3); }
.kmp-dl em { color: var(--text2); font-style: normal; font-size: 13.5px; }
.kmp-dl ul { padding-left: 18px; }
.kmp-dlg-nut { display: flex; flex-wrap: wrap; gap: 10px; }
.kmp-nguon { color: var(--text3); font-size: 12px; }

/* Tra cứu bảo hành */
.bh-luoi { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: start; }
.bh-form, .bh-hang { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.bh-form p, .bh-hang > p { font-size: 14.5px; line-height: 1.6; color: var(--text2); margin-bottom: 16px; }
.bh-form label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.bh-o { display: flex; gap: 8px; }
.bh-o input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; }
.bh-o input:focus { outline: 2px solid var(--orange); outline-offset: -1px; border-color: var(--orange); }
.bh-loi { color: #c62828 !important; margin: 8px 0 0 !important; font-size: 13.5px !important; }
.bh-loi:empty { display: none; }
.bh-kq:not(:empty) { margin-top: 18px; }
.bh-cho { margin: 0 !important; }
.bh-dau { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 10px; }
.bh-bang { width: 100%; border-collapse: collapse; font-size: 14px; }
.bh-bang th, .bh-bang td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bh-bang th { font-size: 12.5px; color: var(--text3); font-weight: 600; }
.bh-bang small { display: block; color: var(--text3); }
.bh-tt { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 3px; white-space: nowrap; }
.bh-tt.con { background: #e8f6ee; color: #1d7a45; }
.bh-tt.het { background: var(--off); color: var(--text3); }
.bh-quen { margin: 18px 0 0 !important; font-size: 13.5px !important; }
.bh-quen a, .dv .view-all { color: var(--orange); font-weight: 600; }
.bh-hang ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bh-hang a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; transition: border-color .2s; }
.bh-hang a:hover { border-color: var(--orange); }
.bh-hang a strong { font-size: 14.5px; }
.bh-hang a span { font-size: 12.5px; color: var(--text3); text-align: right; }

/* Thu cũ đổi mới */
.tc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tc-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; }
.tc-form select, .tc-form input[type="text"] { min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 15px; background: #fff; }
.tc-form .tc-hop { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; grid-column: span 2; }
.tc-hop input { width: 18px; height: 18px; accent-color: var(--orange); }
.tc-kq { position: sticky; top: 100px; padding: 30px; border-radius: var(--radius); background: var(--charcoal); color: #fff; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tc-nhan { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #ffc19f; font-family: 'Be Vietnam Pro', sans-serif; }
.tc-kq strong { font-size: 30px; letter-spacing: -.5px; line-height: 1.2; }
.tc-tro { color: #ffc19f; font-weight: 600; font-size: 15px; }
.tc-kq p { color: #b5b8c2; font-size: 14px; line-height: 1.6; }
.tc-nhom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tc-nhom article { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.tc-nhom h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 14px; }
.tc-nhom h3 svg.ic { width: 28px; height: 28px; color: var(--orange); stroke-width: 1.3; }
.tc-nhom ul { padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; line-height: 1.55; color: #333; margin-bottom: 14px; }
.tc-co, .tc-khong { font-size: 12px; font-weight: 700; letter-spacing: .5px; margin-bottom: 8px; }
.tc-co { color: #1d7a45; }
.tc-khong { color: #c62828; }

/* Tin tức */
.tt-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tt-the { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.tt-the[hidden] { display: none; }
.tt-the:hover { border-color: var(--orange); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.tt-anh { aspect-ratio: 16 / 10; background: radial-gradient(circle at 60% 60%, #3a3f52, #15161a 75%); overflow: hidden; display: grid; place-items: center; }
.tt-anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.tt-anh img[src*="/nganh-hang/"] { width: 78%; height: 78%; object-fit: contain; }
.tt-the:hover .tt-anh img { transform: scale(1.04); }
.tt-than { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tt-muc { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; color: var(--orange); text-transform: uppercase; font-family: 'Be Vietnam Pro', sans-serif; }
.tt-than h2 { font-size: 17px; line-height: 1.35; margin: 0; }
.tt-than p { font-size: 14px; line-height: 1.55; color: var(--text2); }
.tt-than time { margin-top: auto; font-size: 12.5px; color: var(--text3); }
.tt-lon { grid-column: span 3; flex-direction: row; }
.tt-lon .tt-anh { flex: 1.3; aspect-ratio: auto; min-height: 320px; }
.tt-lon .tt-than { flex: 1; padding: 32px; justify-content: center; }
.tt-lon h2 { font-size: 26px; }
.tt-luoi-3 .tt-the { grid-column: auto; }
.bai { max-width: 780px; padding-top: 28px; }
.bai-dau { margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.bai-dau time { display: block; margin-top: 14px; font-size: 13px; color: var(--text3); }
.bai-than { font-size: 16px; line-height: 1.75; color: #2a2a2a; }
.bai-than > * + * { margin-top: 16px; }
.bai-than h2 { margin-top: 34px; font-size: 22px; }
.bai-than ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.bai-than figure img { width: 100%; height: auto; border-radius: var(--radius); }
.bai-than figcaption { font-size: 13px; color: var(--text3); margin-top: 8px; }
.bai-than table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.bai-than th, .bai-than td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bai-than th { background: var(--soft); font-weight: 600; }
.bai-than .btn { margin: 4px 8px 0 0; }
.bai-than .btn:not(.btn-dark) { border-color: var(--line); }
.bai-hoi { margin-top: 36px; padding: 22px 24px; border-radius: var(--radius); background: var(--soft); border-left: 3px solid var(--orange); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bai-hoi span { font-size: 14.5px; color: var(--text2); line-height: 1.6; }

@media (min-width: 761px) and (max-width: 1239px) {
  .nganh { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, 150px); gap: 12px; }
  .o-mh { grid-area: 1 / 1 / 3 / 3; }
  .o-bp { grid-area: 1 / 3 / 2 / 5; }
  .o-chuot { grid-area: 2 / 3 / 4 / 4; }
  .o-lk { grid-area: 2 / 4 / 4 / 5; }
  .o-arm { grid-area: 3 / 1 / 5 / 2; }
  .o-cth { grid-area: 3 / 2 / 5 / 3; }
  .o-tn { grid-area: 4 / 3 / 5 / 4; }
  .o-pk { grid-area: 4 / 4 / 5 / 5; }
  .o-build { grid-area: 5 / 1 / 6 / 5; }
  .o-lon .ng-so { font-size: 88px; }
  .o-lon .ng-phu { display: none; }
  .o-lon img { width: 55%; right: 58px; bottom: 40px; }
  .o-ngang3 .ng-so { font-size: 50px; }
  .o-ngang3 img { width: 54%; right: 14px; }
  .o-bp img { width: 65%; height: 110%; right: 40px; bottom: -7px; }
  .o-ngang2 .ng-so, .o-doc .ng-so { font-size: 36px; }
  .o-chuot img { height: 44%; bottom: 80px; }
  .o-lk .ng-phu { display: none; }
  .o-lk .ng-gia, .o-arm .ng-gia { margin-top: 8px; }
  .o-lk img, .o-arm img { width: 82%; height: 44%; right: 9%; bottom: 16px; object-position: center bottom; }
  .o-nho .ng-so { font-size: 24px; }
  .nganh .o-tn .ng-so { font-size: 24px; }
  .ng { padding: 14px 16px; }
  .ng-ten { font-size: 14px; }
  .dv-dich-vu, .dv-buoc { grid-template-columns: repeat(2, 1fr); }
  .kmp-luoi, .tt-luoi { grid-template-columns: repeat(2, 1fr); }
  .tt-lon { grid-column: span 2; }
  .bh-luoi, .dv-2cot { grid-template-columns: 1fr; }
  .tc-nhom { grid-template-columns: 1fr; }
}
@media (min-width: 761px) and (max-width: 850px) {
  .o-bp img { right: 20px; }
}
@media (max-width: 760px) {
  .dv-menu { grid-template-columns: 1fr; padding: 14px 16px; gap: 14px; }
  .dv-menu-luoi { grid-template-columns: 1fr; gap: 8px; }
  .dv-menu .mega-help { display: none; }
  .dv-menu-luoi a { padding: 12px 14px; }
  .dv-menu-ud { display: none; }
  .nganh { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: 184px; grid-auto-flow: dense; gap: 10px; } /* ô cao hơn để ảnh sản phẩm dưới chữ không bị ép nhỏ */
  .nganh > .ng { grid-area: auto; }
  .nganh > .o-lon { grid-column: span 2; grid-row: span 2; padding: 22px; }
  .nganh > .o-ngang3, .nganh > .o-ngang2 { grid-column: span 2; }
  .ng { padding: 14px 16px; border-radius: 12px; }
  .ng-ten { font-size: 14px; }
  .ng-nho { margin-top: 6px; font-size: 11.5px; }
  .ng-gia, .ng-phu { display: none; }
  .o-lon .ng-ten { font-size: 18px; }
  .o-lon .ng-nho { margin-top: 10px; font-size: 13px; }
  .o-lon .ng-so { font-size: 76px; letter-spacing: -4px; }
  .o-lon .ng-gia { display: block; font-size: 12.5px; }
  .o-lon .ng-gia { max-width: 33%; }
  .o-lon img { width: 55%; height: 42%; right: 14px; bottom: 16px; }
  .o-ngang3 .ng-so { font-size: 46px; }
  .o-ngang2 .ng-so { font-size: 34px; }
  .o-doc .ng-so, .o-nho .ng-so { font-size: 26px; letter-spacing: -1px; }
  .nganh .o-tn .ng-so { font-size: 26px; }
  .o-doc img, .o-nho img { width: 44%; height: 32%; right: 10px; bottom: 10px; object-position: right bottom; }
  .o-bp img { width: 72%; height: 80%; right: 0; bottom: 5px; }
  .o-chuot img { width: 55%; height: 42%; right: 20px; bottom: 28px; }
  .dv-hero h1, .bai-dau h1 { font-size: 27px; }
  .dv-hero-gon h1 { font-size: 25px; }
  .dv-hero-luoi, .dv-2cot, .bh-luoi, .tc-nhom { grid-template-columns: 1fr; gap: 24px; }
  .dv-hero-anh { max-height: 220px; }
  .dv-uu, .dv-dich-vu, .dv-buoc { grid-template-columns: 1fr; gap: 10px; }
  .dv-dich-vu { grid-template-columns: 1fr 1fr; }
  .dv-dich-vu article { padding: 14px; }
  .dv-dich-vu p { display: none; }
  .dv-khoi.dv-xam { margin-top: 40px; padding-bottom: 40px; }
  .dv-cuoi { flex-direction: column; align-items: flex-start; padding: 22px; }
  .kmp-head { flex-direction: column; align-items: flex-start; }
  .kmp-luoi, .tt-luoi { grid-template-columns: 1fr; }
  .kmp-dl > div { grid-template-columns: 1fr; gap: 2px; }
  .kmp-dlg-than { padding: 18px; }
  .bh-form, .bh-hang { padding: 18px; }
  .bh-bang th:nth-child(2), .bh-bang td:nth-child(2) { display: none; }
  .tc-form { grid-template-columns: 1fr; }
  .tc-form .tc-hop { grid-column: auto; }
  .tc-kq { position: static; padding: 22px; }
  .tt-lon { grid-column: auto; flex-direction: column; }
  .tt-lon .tt-anh { min-height: 0; aspect-ratio: 16 / 10; }
  .tt-lon .tt-than { padding: 16px 18px 18px; }
  .tt-lon h2 { font-size: 19px; }
}

/* Rê chuột đổi ảnh (js/site.js): ảnh phụ nằm chồng lên ảnh chính, mờ dần qua lại */
.anh-phu { opacity: 0; }
.p-img .anh-phu { position: absolute; inset: 0; margin: auto; }
.dang-doi > img:not(.mark) { opacity: 0; }
.dang-doi > img.hien { opacity: 1; }
.anh-nhan { position: absolute; left: 8px; bottom: 8px; z-index: 2; max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 3px; background: rgba(26,26,26,.78); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .3s; }
.dang-doi .anh-nhan:not(:empty) { opacity: 1; }
.gio-bay { position: fixed; z-index: 60; object-fit: contain; border-radius: 10px; background: #fff; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.25); pointer-events: none; }
/* Hiện dần khi cuộn tới (js/site.js) */
.cho-hien { opacity: 0; transform: translateY(14px); }
.cho-hien.da-hien { opacity: 1; transform: none; transition: opacity .55s ease var(--tre, 0ms), transform .55s cubic-bezier(.2,.7,.2,1) var(--tre, 0ms); }