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

:root {
  --bg: #f6f9fd;
  --surface: #ffffff;
  --ink: #0e1a2b;
  --ink-2: #44536b;
  --ink-3: #8794a9;
  --line: #e2e9f2;
  --brand: #1d6ef5;
  --brand-2: #0ea5e9;
  --brand-deep: #1246a8;
  --brand-soft: #e8f1ff;
  --green: #059669;
  --green-soft: #e7f6f0;
  --amber: #b45309;
  --amber-soft: #fdf3e2;
  --red: #dc2626;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(14, 26, 43, .05), 0 8px 24px -12px rgba(14, 26, 43, .12);
  --shadow-lg: 0 24px 60px -24px rgba(14, 26, 43, .25);
  --font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 15.5px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */
/* Nền ĐẶC, KHÔNG dùng backdrop-filter.
   Header dính ở đỉnh mà có backdrop-filter thì mỗi khung cuộn trình duyệt phải
   đọc lại vùng ảnh nằm sau header rồi làm mờ lại, suốt chiều ngang trang, ở
   MỌI trang. Đây là một trong những nguyên nhân giật khi cuộn phổ biến nhất
   trên macOS. Nền đặc thì header chỉ là một lớp phẳng, compositor dán thẳng. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
/* gap:0 vì "Autoera" và ".vn" là hai flex item riêng, để gap thì .vn bị đẩy xa ra.
   Khoảng cách với logo đặt bằng margin trên chính logo. */
.logo { display: flex; align-items: center; gap: 0; font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.logo .mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 800;
}
.logo .tld { color: var(--ink-3); font-weight: 600; }
.main-nav { display: flex; gap: 4px; margin-right: auto; }
.main-nav a {
  padding: 7px 13px; border-radius: 9px; color: var(--ink-2); font-weight: 500; font-size: 14.5px;
}
.main-nav a:hover { background: var(--brand-soft); color: var(--brand); }
.main-nav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 18px; border-radius: 10px; font-weight: 600; font-size: 14.5px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 6px 18px -8px rgba(29, 110, 245, .55); }
.btn-primary:hover { box-shadow: 0 10px 24px -8px rgba(29, 110, 245, .65); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { background: var(--brand-soft); color: var(--brand); }
.btn-outline { border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-lg { padding: 13px 26px; font-size: 16px; border-radius: 12px; }
.btn-sm { padding: 6px 12px; font-size: 13.5px; border-radius: 8px; }
.btn-green { background: var(--green); color: #fff; }
.btn-block { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(1100px 620px at 50% 42%, #0f2f5e, transparent 72%),
    linear-gradient(180deg, #050f1e, #06142a 55%, #050e1c);
  padding: 84px 0 76px;
  text-align: center;
  color: #eaf3ff;
}
/* viền sáng chuyển từ hero tối sang phần trang sáng */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(86, 168, 255, .55), rgba(125, 211, 252, .75), rgba(86, 168, 255, .55), transparent);
}
#neural-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block;
}
/* mép trên/dưới của lưới mờ dần để không bị cắt cụt */
.hero-mask {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 15, 30, .85), transparent 18%, transparent 80%, rgba(5, 14, 28, .9)),
    radial-gradient(52% 48% at 50% 47%, rgba(5, 13, 26, .72), transparent 78%);
}
.hero h1 {
  font-size: clamp(34px, 5.6vw, 60px); line-height: 1.08; letter-spacing: -.035em;
  font-weight: 800; max-width: 860px; margin: 0 auto 20px; color: #fff;
  text-shadow: 0 2px 40px rgba(5, 14, 28, .8);
}
.hero h1 .grad {
  background: linear-gradient(96deg, #7dd3fc, #56a8ff, #bae6fd, #56a8ff);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 7s ease-in-out infinite;
  /* inline-block để transform có tác dụng (transform không áp dụng cho thẻ inline);
     max-width giữ cho chữ vẫn xuống dòng được trên màn hẹp thay vì tràn ngang */
  display: inline-block; max-width: 100%;
  /* background-clip:text chỉ sơn trong hộp nền. line-height 1.08 bóp hộp lại khiến
     dấu nặng của "ệ" (tràn 15.2px dưới đường chân, hộp chỉ có 10.4px) bị cắt cụt.
     Nới hộp bằng padding rồi bù margin âm -> không xê dịch bố cục. */
  padding: .06em .04em .18em; margin: -.06em -.04em -.18em;
}
@keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* tách chữ để hiện dần từng ký tự */
.split-word { display: inline-block; white-space: nowrap; }
.split-char { display: inline-block; will-change: transform, opacity; }

.hero .wrap { position: relative; }
.hero-blob {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; z-index: -1;
  pointer-events: none; will-change: transform; mix-blend-mode: screen;
}
.hero-blob.b1 {
  width: 640px; height: 640px; left: -180px; top: -180px;
  background: radial-gradient(circle, rgba(29, 110, 245, .5), transparent 65%);
  animation: blobFloat 24s ease-in-out infinite;
}
.hero-blob.b2 {
  width: 700px; height: 700px; right: -220px; top: -140px;
  background: radial-gradient(circle, rgba(14, 165, 233, .42), transparent 65%);
  animation: blobFloat 30s ease-in-out infinite reverse;
}
.hero-blob.b3 {
  width: 620px; height: 620px; left: 50%; margin-left: -310px; bottom: -380px;
  background: radial-gradient(circle, rgba(56, 189, 248, .32), transparent 65%);
  animation: blobFloat 27s ease-in-out 3s infinite;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, 30px) scale(1.08); }
  66% { transform: translate(-30px, 15px) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .grad, .hero-blob { animation: none; }
}
/* Chế độ nhẹ (xem app.js): bỏ HẲN ba khối mờ, không phải chỉ dừng animation.
   Mỗi khối rộng 700px với blur(90px) vẫn tốn một vùng đệm lớn trên card đồ hoạ
   dù đứng yên. Nền hero đã có sẵn dải màu riêng nên bỏ đi vẫn đẹp. */
.nhe .hero-blob { display: none; }
.nhe .hero h1 .grad { animation: none; }
.hero p.lead { font-size: 18px; color: #a9c3e0; max-width: 660px; margin: 0 auto 34px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-cta .btn-lg { will-change: transform; }
.hero .btn-outline {
  background: rgba(255, 255, 255, .06); border-color: rgba(147, 197, 253, .3); color: #eaf3ff;
}
.hero .btn-outline:hover { border-color: #7dd3fc; color: #fff; background: rgba(125, 211, 252, .14); }
.hero .btn-primary { box-shadow: 0 10px 34px -10px rgba(56, 189, 248, .75); }
.hero-stats {
  display: flex; gap: 0; justify-content: center; margin-top: 54px; flex-wrap: wrap;
}
.hero-stats .stat { padding: 0 30px; position: relative; }
.hero-stats .stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(125, 211, 252, .28), transparent);
}
.hero-stats .stat b {
  display: block; font-size: 30px; letter-spacing: -.02em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.hero-stats .stat span { color: #7f9cbd; font-size: 13.5px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(125, 211, 252, .1); border: 1px solid rgba(125, 211, 252, .28); border-radius: 999px;
  padding: 7px 16px; font-size: 13px; font-weight: 600; color: #bae6fd; margin-bottom: 26px;
}
/* .eyebrow và .btn-outline ĐÃ BỎ backdrop-filter. Hai thẻ này nằm đè lên canvas
   3D: nền mờ kính đặt trên canvas buộc trình duyệt đọc ngược pixel từ GPU về
   để làm mờ, và phải làm lại mỗi khi khối 3D vẽ khung mới. Đọc ngược từ GPU là
   thao tác đắt nhất trong cả trang. Nền phẳng nhìn gần như không khác. */
.eyebrow .dot { box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); animation: dotPing 2.4s ease-out infinite; }
@keyframes dotPing {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .65); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
}
@media (prefers-reduced-motion: reduce) { .eyebrow .dot { animation: none; } }

/* Header đổi màu khi còn nằm trên hero tối. Dùng đúng màu đỉnh hero để liền khối. */
.site-header.over-hero {
  background: #050f1e; border-bottom-color: rgba(125, 211, 252, .12);
}
.site-header.over-hero .logo { color: #fff; }
.site-header.over-hero .logo .tld { color: #7f9cbd; }
.site-header.over-hero .main-nav a { color: #b7cbe4; }
.site-header.over-hero .main-nav a:hover,
.site-header.over-hero .main-nav a.active { background: rgba(125, 211, 252, .14); color: #e0f2fe; }
.site-header.over-hero .btn-ghost { color: #cfe0f5; }
.site-header.over-hero .btn-ghost:hover { background: rgba(125, 211, 252, .14); color: #fff; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.section-head h2 { font-size: 26px; letter-spacing: -.02em; font-weight: 700; }
.section-head p { color: var(--ink-2); margin-top: 4px; }
.section-head .more { color: var(--brand); font-weight: 600; font-size: 14.5px; }

/* ---------- Cards grid ---------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.card:hover, .card.hoverable:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.card-body .desc { color: var(--ink-2); font-size: 13.8px; line-height: 1.5; flex: 1; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.price { font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.price small { color: var(--ink-3); font-weight: 500; font-size: 12px; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 700;
  background: linear-gradient(135deg, #0ea5e9, #1d6ef5);
}
.avatar.lg { width: 72px; height: 72px; font-size: 26px; border-radius: 20px; }
.avatar.md { width: 44px; height: 44px; font-size: 17px; border-radius: 13px; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge-cat { background: var(--brand-soft); color: var(--brand); }
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-gray { background: #eef0f4; color: var(--ink-2); }

.stars { color: #f59e0b; font-size: 13px; letter-spacing: 1px; }
.rating-line b { color: var(--ink); }


/* ---------- Feature blocks ---------- */
.feature-card { padding: 26px; }
.feature-card .icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-soft); font-size: 21px; margin-bottom: 14px;
}
.feature-card h3 { font-size: 17px; margin-bottom: 6px; }
.feature-card p { color: var(--ink-2); font-size: 14px; }

/* ---------- Steps ---------- */
/* Số cột bám theo số bước thật. Trước đây cố định 4 cột từ bản sàn cũ,
   nên khi còn 3 bước thì đường nối chạy hụt ra khoảng trống bên phải. */
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 18px; counter-reset: step; }
@media (max-width: 960px) { .steps { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: relative; }
.step::before {
  counter-increment: step; content: counter(step);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-weight: 700; font-size: 14px;
  margin-bottom: 12px;
}
.step h4 { font-size: 15.5px; margin-bottom: 4px; }
.step p { font-size: 13.8px; color: var(--ink-2); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 40px; }
.site-footer .wrap { padding: 40px 20px 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 28px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font-size: 13.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 12px; }
.footer-grid a { display: block; padding: 4px 0; color: var(--ink-2); font-size: 14px; }
.footer-grid a:hover { color: var(--brand); }
.footer-note { border-top: 1px solid var(--line); padding-top: 20px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--ink-3); font-size: 13px; }

.demo-banner {
  background: linear-gradient(90deg, #0a1e40, #123c78); color: #dbeafe;
  text-align: center; font-size: 13px; padding: 7px 16px;
}
.demo-banner b { color: #fff; }

/* ---------- Product detail ---------- */
.breadcrumbs { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ink-3); padding: 18px 0 0; flex-wrap: wrap; }
.breadcrumbs a:hover { color: var(--brand); }
.product-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; padding: 24px 0 56px; }
@media (max-width: 900px) { .product-layout { grid-template-columns: 1fr; } }
.product-hero h1 { font-size: 27px; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 8px; }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-pad { padding: 24px; }
.panel h2 { font-size: 19px; margin-bottom: 12px; letter-spacing: -.01em; }
.panel h3 { font-size: 16px; margin: 18px 0 8px; }
.panel p, .panel li { color: var(--ink-2); font-size: 14.5px; }
.panel ul { padding-left: 20px; display: grid; gap: 6px; }
.buy-box { position: sticky; top: 84px; }
.buy-box .price-big { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.buy-box .price-big small { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.line-item { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); padding: 7px 0; border-bottom: 1px dashed var(--line); }
.line-item:last-of-type { border-bottom: 0; }
.line-item b { color: var(--ink); }
.review { display: flex; gap: 13px; padding: 18px 0; border-top: 1px solid var(--line); }
.review .body { flex: 1; }
.review .who { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.review .who b { font-size: 14.5px; }
.review .who span { color: var(--ink-3); font-size: 12.5px; }
.review p { font-size: 14px; color: var(--ink-2); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 17, 32, .55); z-index: 100;
  display: none; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(3px);
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface); border-radius: 18px; max-width: 520px; width: 100%;
  box-shadow: var(--shadow-lg); animation: pop .18s ease;
  max-height: calc(100vh - 40px); display: flex; flex-direction: column;
}
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-head { padding: 20px 24px 0; display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { font-size: 18px; }
.modal-head .x { font-size: 22px; color: var(--ink-3); line-height: 1; padding: 4px 8px; border-radius: 8px; }
.modal-head .x:hover { background: var(--bg); color: var(--ink); }
.modal-body { padding: 18px 24px 24px; overflow-y: auto; }
.modal-head { flex: none; }
.notice {
  border-radius: 10px; padding: 12px 15px; font-size: 13.5px; margin-top: 14px;
  background: var(--brand-soft); color: #1246a8; border: 1px solid #d3e3fd;
}
.notice.green { background: var(--green-soft); color: #065f46; border-color: #c9ecdf; }

/* ---------- Tables ---------- */
.table-wrap, .table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }

.hidden { display: none !important; }

/* ---------- Logo SVG ---------- */
/* mark là nét vẽ, không phải khối đặc -> bỏ bo góc và đổ bóng của bản cũ */
/* 4px chứ không phải 9px: ô mark 32px đã có sẵn ~9% đệm trong suốt mỗi bên,
   để 9px thì khoảng hở thị giác lên 0.83 lần chiều cao chữ hoa, quá rộng.
   4px cho ra 0.47, khớp với bộ logo trong brand/. */
.logo .mark-svg { flex: none; display: block; width: 32px; height: 32px; margin-right: 4px; }
.logo .tld { margin-left: 1px; }

/* ---------- Mạch điện nối 4 bước ---------- */
.steps-flow { position: relative; }
.steps-rail {
  position: absolute; left: 0; right: 0; top: 36px; height: 24px; z-index: 0;
  pointer-events: none;
}
.steps-rail svg { width: 100%; height: 100%; display: block; overflow: visible; }
.steps-flow .step { position: relative; z-index: 1; }
@media (max-width: 960px) { .steps-rail { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .circuit-pulse, .circuit-node-blink { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .site-header .wrap {
    height: auto; flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; padding-bottom: 10px;
  }
  .logo { font-size: 17px; }
  .header-actions { margin-left: auto; order: 2; }
  .header-actions .btn { padding: 8px 13px; font-size: 13.5px; }
  .main-nav {
    order: 3; width: 100%; margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 2px;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { white-space: nowrap; padding: 7px 12px; }
  .hero { padding: 62px 0 56px; }
  .hero p.lead { font-size: 16px; margin-bottom: 26px; }
  .hero-cta { flex-direction: column; align-items: stretch; padding: 0 4px; }
  .hero-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px 0; margin-top: 38px;
  }
  .hero-stats .stat { padding: 0 8px; }
  .hero-stats .stat + .stat::before { display: none; }
  .hero-stats .stat:nth-child(even)::after {
    content: ""; position: absolute; left: 0; top: 10%; height: 80%; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(125, 211, 252, .22), transparent);
  }
  .hero-stats .stat b { font-size: 24px; }
  .site-header.over-hero { background: #050f1e; }
  .section { padding: 40px 0; }
  /* flex-wrap:wrap trong flex CỘT khiến mọi item bị kéo giãn theo item rộng nhất
     (dải tabs vốn để cuộn ngang, max-content ~452px) -> tràn ngang cả trang.
     nowrap + min-width:0 buộc các item bám đúng bề rộng cột. */
  .market-bar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .market-bar > * { min-width: 0; }
  .tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { white-space: nowrap; }
  .store-head { padding: 20px; }
      .product-hero h1 { font-size: 22px; }
  .buy-box { position: static; }
  .panel-pad, .form-panel { padding: 20px 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  /* iOS tự zoom khi focus input < 16px, giữ 16px để tránh */
  .field input, .field select, .field textarea, .search input { font-size: 16px; }
}
@media (hover: none) {
  a.card:hover, .card.hoverable:hover { transform: none; }
}

.feature-card .icon {
  color: var(--brand);
  background: linear-gradient(140deg, var(--brand-soft), #f0f7ff);
  border: 1px solid rgba(29, 110, 245, .14);
}
.feature-card .icon svg { width: 22px; height: 22px; }

/* ---------- Trust bar ---------- */
.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;
}
.trust-bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.trust-bar .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-block: 20px;
}
.trust-item { display: flex; gap: 11px; align-items: flex-start; }
.trust-item svg { width: 22px; height: 22px; flex: none; color: var(--brand); margin-top: 2px; }
.trust-item b { display: block; font-size: 14.5px; line-height: 1.3; }
.trust-item span { font-size: 12.8px; color: var(--ink-3); }
@media (max-width: 860px) { .trust-bar .wrap { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (max-width: 480px) { .trust-bar .wrap { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 860px; }
.faq {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 10px; overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: 16px 46px 16px 20px; font-weight: 600; font-size: 15.5px;
  position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq[open] summary { color: var(--brand); }
.faq p { padding: 0 20px 18px; font-size: 14.5px; color: var(--ink-2); }

/* ---------- Dải kêu gọi cuối trang ---------- */
.cta-band {
  background:
    radial-gradient(800px 380px at 50% 0%, #123a72, transparent 70%),
    linear-gradient(180deg, #061426, #050e1c);
  padding: 52px 0; color: #eaf3ff; margin-top: 8px;
}
.cta-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.cta-inner h2 { font-size: 25px; letter-spacing: -.02em; color: #fff; }
.cta-inner p { color: #a9c3e0; font-size: 15px; margin-top: 5px; }
.cta-form { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-form input {
  border: 1.5px solid rgba(147, 197, 253, .3); background: rgba(255, 255, 255, .07);
  color: #fff; border-radius: 12px; padding: 13px 18px; font-size: 15.5px; min-width: 260px; outline: none;
}
.cta-form input::placeholder { color: #7f9cbd; }
.cta-form input:focus { border-color: #7dd3fc; box-shadow: 0 0 0 3px rgba(125, 211, 252, .18); }
.cta-form input[aria-invalid="true"] { border-color: #f87171; }
.cta-note { color: #7f9cbd; font-size: 12.8px; margin-top: 14px; }
.cta-note.ok { color: #6ee7b7; }
.cta-note.err { color: #fca5a5; }
@media (max-width: 700px) {
  .cta-inner { flex-direction: column; align-items: stretch; }
  .cta-form { flex-direction: column; }
  .cta-form input { min-width: 0; width: 100%; }
}

/* ================= Trang nội dung dài (chính sách, thanh toán) ================= */
.page-head {
  background: linear-gradient(180deg, #061426, #0a1c33);
  color: #eaf3ff; padding: 46px 0 42px; border-bottom: 1px solid rgba(125, 211, 252, .12);
}
.page-head h1 { font-size: 33px; letter-spacing: -.025em; color: #fff; line-height: 1.18; }
.page-head p { color: #a9c3e0; font-size: 16px; margin-top: 10px; max-width: 640px; }
.page-head .eyebrow { margin-bottom: 14px; }
.page-head .updated { font-size: 13px; color: #7f9cbd; margin-top: 16px; }
@media (max-width: 760px) { .page-head { padding: 32px 0 30px; } .page-head h1 { font-size: 25px; } }

.doc-layout { display: grid; grid-template-columns: 238px 1fr; gap: 40px; align-items: start; padding: 44px 0 60px; }
/* grid item mặc định min-width:auto, bảng dài trong doc-body sẽ nong cả cột
   ra rộng hơn màn hình. min-width:0 buộc cột bám bề rộng khung, bảng tự cuộn. */
.doc-layout > * { min-width: 0; }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; gap: 24px; padding: 28px 0 44px; } }

.doc-toc { position: sticky; top: 84px; }
@media (max-width: 900px) { .doc-toc { position: static; } }
.doc-toc h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin-bottom: 10px;
}
.doc-toc a {
  display: block; padding: 7px 12px; border-radius: 9px; font-size: 14px;
  color: var(--ink-2); border-left: 2px solid transparent; transition: .16s ease;
}
.doc-toc a:hover { background: var(--brand-soft); color: var(--brand-deep); }
.doc-toc a.active { color: var(--brand-deep); font-weight: 600; background: var(--brand-soft); border-left-color: var(--brand); }

.doc-body { max-width: 760px; }
.doc-sec { scroll-margin-top: 84px; padding-bottom: 34px; }
.doc-sec + .doc-sec { border-top: 1px solid var(--line); padding-top: 34px; }
.doc-sec > h2 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 6px; }
.doc-sec > .lede { color: var(--ink-2); font-size: 15px; margin-bottom: 18px; }
.doc-sec h3 { font-size: 16px; margin: 22px 0 8px; }
.doc-sec p { font-size: 15px; color: var(--ink-2); line-height: 1.68; margin-bottom: 12px; }
.doc-sec ul, .doc-sec ol { padding-left: 20px; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); line-height: 1.6; margin-bottom: 14px; }
.doc-sec li b { color: var(--ink); }
.doc-sec .num { counter-reset: item; list-style: none; padding-left: 0; }
.doc-sec .num > li { counter-increment: item; position: relative; padding-left: 34px; }
.doc-sec .num > li::before {
  content: counter(item); position: absolute; left: 0; top: 1px;
  width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-deep); font-size: 12.5px; font-weight: 700;
}

/* ================= Chọn phương thức thanh toán ================= */
.pay-methods { display: grid; gap: 10px; margin: 4px 0 16px; }
.pay-method {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 13px; padding: 13px 15px;
  background: var(--surface); transition: .16s ease;
}
.pay-method:hover { border-color: #b9d3fb; }
.pay-method input { accent-color: var(--brand); width: 17px; height: 17px; flex: none; }
.pay-method .pm-ico {
  width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-deep); font-size: 18px;
}
.pay-method .pm-txt { flex: 1; min-width: 0; }
.pay-method .pm-txt b { display: block; font-size: 14.6px; }
.pay-method .pm-txt span { display: block; font-size: 12.6px; color: var(--ink-3); }
.pay-method:has(input:checked) {
  border-color: var(--brand); background: var(--brand-soft);
  box-shadow: 0 0 0 3px rgba(29, 110, 245, .1);
}
/* Chỉ còn một hình thức thanh toán nên không có radio để chọn nữa. .chon giữ
   nguyên vẻ ngoài "đang được chọn", và bỏ con trỏ bàn tay vì không bấm được. */
.pay-method.chon {
  border-color: var(--brand); background: var(--brand-soft);
  box-shadow: 0 0 0 3px rgba(29, 110, 245, .1); cursor: default;
}
.pay-method.chon:hover { border-color: var(--brand); }
.pay-method .pm-tag {
  font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--green-soft); color: #065f46; flex: none;
}

/* ================= Khung QR SePay ================= */
/* flex-wrap thay vì grid cố định: khung hẹp (trong modal ~450px) thì tự xếp dọc
   theo BỀ RỘNG KHUNG, không phụ thuộc bề rộng màn hình như media query. */
.qr-pane { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; justify-content: center; }
.qr-pane > :first-child { flex: 0 0 172px; }
/* 330px là bề rộng tối thiểu để "0000 1234 5678" và nội dung CK nằm gọn 1 dòng
   cạnh nhãn và nút sao chép. Hẹp hơn thì cả khối tự xuống dòng dưới mã QR. */
.qr-fields { flex: 1 1 330px; }
/* Ảnh VietQR kèm thông tin tài khoản CAO HƠN chiều rộng, không phải hình vuông.
   Ép khung vuông thì ảnh tràn xuống đè lên dòng đếm ngược bên dưới. Khoá bề ngang,
   thả chiều cao cho ảnh tự giữ tỷ lệ. */
.qr-box {
  width: 196px; border-radius: 14px; background: #fff;
  border: 1px solid var(--line); padding: 8px; display: grid; place-items: center;
}
.qr-box img, .qr-box svg { width: 100%; height: auto; display: block; }
/* Khung giữ chỗ lúc chưa có ảnh, để bố cục không nhảy */
.qr-box:empty { height: 196px; }
.qr-banks { font-size: 12.4px; color: var(--ink-3); margin-top: 9px; text-align: center; }
.qr-fields { display: grid; gap: 9px; min-width: 0; }
.qr-field {
  display: flex; align-items: center; gap: 10px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
}
.qr-field { flex-wrap: wrap; }
.qr-field .k { font-size: 12.2px; color: var(--ink-3); width: 88px; flex: none; text-align: left; white-space: nowrap; }
.qr-field .v { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.qr-field .v.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.qr-field button {
  font-size: 12px; font-weight: 600; color: var(--brand); padding: 5px 9px;
  border-radius: 7px; flex: none; background: var(--surface); border: 1px solid var(--line);
}
.qr-field button:hover { background: var(--brand-soft); }
.qr-field button.done { color: #059669; }

.sepay-status {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  background: var(--brand-soft); border: 1px solid #d3e3fd; border-radius: 11px;
  padding: 11px 14px; font-size: 13.5px; color: #1246a8;
}
.sepay-status .pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none;
  box-shadow: 0 0 0 0 rgba(29, 110, 245, .5); animation: sepayPulse 1.6s ease-out infinite;
}
@keyframes sepayPulse {
  70% { box-shadow: 0 0 0 9px rgba(29, 110, 245, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 110, 245, 0); }
}
.sepay-status.ok { background: var(--green-soft); border-color: #c9ecdf; color: #065f46; }
.sepay-status.ok .pulse { background: #059669; animation: none; }
@media (prefers-reduced-motion: reduce) { .sepay-status .pulse { animation: none; } }

.brand-note {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 12.4px; color: var(--ink-3); margin-top: 12px;
}
.brand-note b { color: var(--ink-2); }

/* ================= Dòng tiền / lịch chi trả ================= */
.flow-rail { display: grid; gap: 0; margin: 6px 0 4px; }
.flow-node { position: relative; padding: 0 0 26px 38px; }
.flow-node:last-child { padding-bottom: 0; }
.flow-node::before {
  content: ""; position: absolute; left: 10px; top: 22px; bottom: -4px; width: 2px;
  background: linear-gradient(180deg, var(--brand), rgba(29, 110, 245, .18));
}
.flow-node:last-child::before { display: none; }
.flow-node .dot {
  position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-soft); border: 2px solid var(--brand); color: var(--brand-deep);
  font-size: 11.5px; font-weight: 700; display: grid; place-items: center;
}
.flow-node b { display: block; font-size: 15px; margin-bottom: 3px; }
.flow-node p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.flow-node .when {
  display: inline-block; font-size: 11.8px; font-weight: 700; color: var(--brand-deep);
  background: var(--brand-soft); border-radius: 999px; padding: 2px 9px; margin-left: 7px;
  vertical-align: 2px;
}

.fee-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 6px; }
@media (max-width: 700px) { .fee-strip { grid-template-columns: 1fr; } }
.fee-cell {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
}
.fee-cell b { display: block; font-size: 27px; letter-spacing: -.02em; line-height: 1; color: var(--brand-deep); }
.fee-cell span { display: block; font-size: 13.4px; color: var(--ink-2); margin-top: 7px; }

/* hàng link chính sách ở chân các trang phụ */
.footer-mini {
  display: flex; flex-wrap: wrap; gap: 6px 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.footer-mini a { font-size: 13.6px; color: var(--ink-2); }
.footer-mini a:hover { color: var(--brand); }

/* hai nút cuối bước quét mã: hẹp thì xếp dọc, nút chính lên trên */
.step-actions { display: flex; gap: 10px; margin-top: 14px; }
.step-actions .btn-outline { flex: none; }
@media (max-width: 560px) {
  .step-actions { flex-direction: column-reverse; }
  .step-actions .btn { width: 100%; }
}

/* ── Thẻ sản phẩm của store ─────────────────────────────────────────────── */
.card-shot { aspect-ratio: 16 / 9; background: #0b1220; overflow: hidden; }
.card-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-facts { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 2px 0 4px; }
.card-facts li {
  position: relative; padding-left: 17px; font-size: 13px; color: var(--ink-2); line-height: 1.45;
}
.card-facts li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px;
  border-radius: 50%; background: linear-gradient(135deg, #2b7dff, #0ea5e9);
}
.card-go { font-size: 13px; font-weight: 600; color: var(--brand); white-space: nowrap; }

/* ── Khối mua trọn bộ ───────────────────────────────────────────────────── */
.bundle {
  margin-top: 26px; display: flex; gap: 28px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.bundle > div:first-child { flex: 1 1 340px; }
.bundle h3 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; margin: 9px 0 6px; }
.bundle p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.bundle-buy { flex: 0 1 280px; text-align: right; }
.bundle-buy .price-big { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.bundle-buy .price-big small { font-size: 15px; color: var(--ink-3); font-weight: 500; }
.bundle-save { color: #059669; font-size: 13.5px; font-weight: 600; margin: 2px 0 12px; }
@media (max-width: 620px) {
  .bundle-buy { flex-basis: 100%; text-align: left; }
}

/* ── Trang sản phẩm của store ───────────────────────────────────────────── */
.product-shot {
  display: block; width: 100%; height: auto; border-radius: 14px;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.lead-sm { color: var(--ink-2); font-size: 16px; line-height: 1.65; margin-top: 10px; max-width: 62ch; }

/* ── Lấy lại từ các khối đã cắt: dùng chung cho hộp thanh toán,
   bảng thông số sản phẩm và bảng trong trang tài liệu ── */
.kv { display: grid; gap: 10px; }
.kv .row { display: flex; gap: 10px; font-size: 14px; }
.kv .row .k { color: var(--ink-3); min-width: 92px; flex: none; }
.attach {
  margin: 0 20px 16px; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px;
  display: flex; gap: 14px; align-items: center; background: var(--bg);
  transition: border-color .12s ease;
}
.attach:hover { border-color: var(--brand); }
.attach .emoji { font-size: 30px; }
.attach .t { flex: 1; }
.attach .t b { display: block; font-size: 14.5px; }
.attach .t span { font-size: 13px; color: var(--ink-2); }
.attach .go { color: var(--brand); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.8px; color: var(--ink-2); margin-bottom: 15px; }
.check input { margin-top: 4px; accent-color: var(--brand); }

/* ── Bề rộng cột chữ ─────────────────────────────────────────────────────
   Đo được 89 đến 113 ký tự mỗi dòng, quá dài nên mắt khó bắt đầu dòng kế
   tiếp. Ghìm về 62 đến 72 ký tự. Chỉ ghìm đoạn văn và danh sách, KHÔNG ghìm
   bảng, khối thông báo hay lưới, để chúng vẫn dùng hết bề ngang. */
.doc-body > section > p,
.doc-body > section > ul li,
.doc-body > section > ol li { max-width: 34em; }
.product-layout main .panel > p,
.product-layout main .panel > ul li { max-width: 34em; }
.faq p { max-width: 35em; }
.faq-wrap .section-head p { max-width: 30em; }

/* ── Khối trọn bộ: nền tối cho ăn với ảnh sản phẩm ở ngay trên ─────────── */
.bundle {
  background: linear-gradient(135deg, #0b1220 0%, #14243d 100%);
  border-color: #21375a;
  position: relative;
  overflow: hidden;
}
.bundle::after {
  content: ""; position: absolute; inset: auto -80px -140px auto;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(43,125,255,.28), transparent 68%);
  pointer-events: none;
}
.bundle > * { position: relative; z-index: 1; }
.bundle h3 { color: #fff; }
.bundle p { color: #9fb4d0; }
.bundle .badge-cat { background: rgba(61,139,255,.18); color: #79b4ff; }
.bundle-buy .price-big { color: #fff; }
.bundle-buy .price-big small { color: #8fa5c2; }
.bundle-save { color: #4ade80; }
.bundle-buy .btn { width: auto; min-width: 210px; }
@media (max-width: 620px) { .bundle-buy .btn { width: 100%; } }

/* ── Gợi ý hai sản phẩm còn lại, cuối trang sản phẩm ─────────────────── */
.more-products { margin: 34px 0 46px; }
.more-products h2 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 14px; }
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .more-grid { grid-template-columns: 1fr; } }
.more-card {
  display: flex; gap: 14px; align-items: center; padding: 14px;
  border: 1px solid var(--line); border-radius: 13px; background: #fff;
  transition: transform .18s, box-shadow .18s;
}
.more-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.more-card img { width: 104px; height: 59px; border-radius: 8px; object-fit: cover; flex: none; }
.more-card b { display: block; font-size: 15px; letter-spacing: -.01em; }
.more-card span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
.more-card .price { font-size: 14px; margin-top: 5px; display: block; }

/* ── Bảng trong trang tài liệu ───────────────────────────────────────────
   CSS cũ chỉ bắt `table.data`, mà HTML trang tài liệu là `<table>` trơn nên
   không kẻ ô nào hiện. Bắt theo ngữ cảnh để mọi bảng đều có kiểu. */
.doc-sec .table-wrap,
.doc-sec .table-scroll {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 4px 0 18px;
  background: #fff;
}
.doc-sec .table-wrap > table,
.doc-sec .table-scroll > table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.doc-sec table thead th {
  text-align: left;
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: var(--ink-3);
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.doc-sec table td {
  padding: 12px 15px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  line-height: 1.55;
  vertical-align: top;
}
.doc-sec table tbody tr:first-child td { border-top: 0; }
.doc-sec table tbody tr:hover td { background: #f7f9fc; }
.doc-sec table td:first-child { color: var(--ink); font-weight: 500; }
.doc-sec table td b { color: var(--ink); }

/* cuộn ngang trên máy hẹp, kèm gợi ý bằng đường viền mờ dần */
@media (max-width: 720px) {
  .doc-sec .table-wrap, .doc-sec .table-scroll { overflow-x: auto; }
}

/* khối thông báo trong trang tài liệu cần thở ra khỏi đoạn văn phía trên */
.doc-sec .notice { margin: 16px 0 6px; max-width: 34em; }
.doc-sec > section, .doc-sec ol.num { margin-bottom: 14px; }
.doc-sec .flow-node p { max-width: 34em; }

/* Khối chữ của dải kêu gọi không giới hạn bề ngang nên chiếm hết một hàng,
   đẩy nút xuống dòng dưới và bỏ trống nửa phải. Ghìm lại để nút về bên phải. */
.cta-inner > div:first-child { max-width: 36em; }

/* `.footer-grid a { display:block }` (dành cho link các cột) có độ ưu tiên cao
   hơn `.logo { display:flex }`, làm logo ở chân trang vỡ thành hai dòng. */
.footer-grid a.logo { display: flex; align-items: center; width: fit-content; padding: 0; }

/* Trên điện thoại bảng phải cuộn ngang, nhưng không có dấu hiệu nào báo còn
   nội dung bên phải. Bóng mờ ở mép hiện ra khi còn cuộn được và tự mất khi
   đã cuộn hết, làm hoàn toàn bằng CSS. */
@media (max-width: 720px) {
  .doc-sec .table-wrap {
    background:
      linear-gradient(to right, #fff 32%, rgba(255,255,255,0)) left center / 44px 100% no-repeat local,
      linear-gradient(to left,  #fff 32%, rgba(255,255,255,0)) right center / 44px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,   rgba(14,26,43,.16), rgba(14,26,43,0)) left center / 15px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(14,26,43,.16), rgba(14,26,43,0)) right center / 15px 100% no-repeat scroll;
  }
}

/* ── Giá ưu đãi mở bán ───────────────────────────────────────────────────
   Giá gạch ngang PHẢI là giá thật sẽ áp dụng sau kỳ ưu đãi, không phải số
   bịa để làm mỏ neo. Bịa giá gốc là hành vi bị cấm theo Luật Giá và Luật
   Bảo vệ quyền lợi người tiêu dùng. */
.price-was {
  text-decoration: line-through; text-decoration-thickness: 1.5px;
  color: var(--ink-3); font-weight: 500; font-size: .78em; margin-right: 5px;
}
.badge-sale { background: #fee2e2; color: #b3261e; font-weight: 700; letter-spacing: 0; }
.buy-box .price-was { font-size: 18px; display: block; margin: 0 0 2px; }
.promo-note {
  /* Có lề DƯỚI nữa, không thì nút mua nằm dính luôn vào khối này. */
  margin: 12px 0 14px; padding: 10px 12px; border-radius: 10px;
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
  font-size: 12.8px; line-height: 1.55;
}
.promo-note b { color: #7c2d12; }
.bundle .price-was { color: #8fa5c2; }
.bundle .badge-sale { background: rgba(248,113,113,.16); color: #fca5a5; }

/* Khối giá trên thẻ sản phẩm: ghi chú và giá gạch nằm hàng trên, giá thật và
   nhãn giảm nằm hàng dưới. Trước đây nhồi chung một hàng nên mỗi thẻ vắt
   dòng một kiểu, nhìn rất lộn xộn. */
.card-price { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.card-price-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.card-price-note .price-was { margin: 0; font-size: 1em; }
.card-price-now { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.card-price-now .price { font-size: 20px; }

/* ── Ô nhập email trong hộp thanh toán ──────────────────────────────────── */
.pay-email-label {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 4px 0 6px;
}
.pay-email {
  width: 100%; border: 1.5px solid var(--line); border-radius: 11px;
  padding: 12px 14px; font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; outline: none; transition: border-color .16s, box-shadow .16s;
}
.pay-email:focus { border-color: #7dd3fc; box-shadow: 0 0 0 3px rgba(125, 211, 252, .2); }
.pay-email[aria-invalid="true"] { border-color: #f87171; }
.pay-email-note { font-size: 12.5px; color: var(--ink-3); margin: 6px 0 12px; line-height: 1.5; }
.pay-email[aria-invalid="true"] ~ .pay-email-note { color: #b91c1c; }
.sepay-status.err { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* ── Thẻ sản phẩm không có ảnh, dùng ở lưới sản phẩm con Shopee ──────────────
   Dùng chung khung .card nhưng bỏ phần ảnh, và là <div> chứ không phải <a> nên
   phải tự dựng lại nền, viền, bo góc. */
.card-flat {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.card-flat .card-body { display: flex; flex-direction: column; flex: 1; }
.card-flat .desc { flex: 1; }
/* nút nằm sát đáy để các thẻ trong cùng hàng thẳng nhau dù mô tả dài ngắn khác nhau */
.card-flat .btn-block { margin-top: 14px; }


/* ── Nhịp cách trong hộp mua ────────────────────────────────────────────────
   Trước đây mỗi khối tự đặt lề riêng nên chỗ thì hở, chỗ thì dính. Gom về một
   quy tắc: mọi khối trong hộp mua cách nhau 14px, trừ khối đầu. */
.buy-box .panel-pad > * + * { margin-top: 14px; }
.buy-box .panel-pad > .price-big { margin-top: 2px; }
.buy-box .panel-pad > .badge-sale { margin-top: 8px; }
.buy-box .panel-pad .btn-block + .notice { margin-top: 14px; }

/* Khối giá và bảng thông số trong hộp mua cũng cần thở */
.buy-box .kv { margin-top: 4px; }
.buy-box .panel-pad h3 { margin-bottom: 4px; }

/* ================= Sơ đồ đường đi của dữ liệu ================= */
/* QUY TẮC: mọi giá trị dưới đây là TRẠNG THÁI CUỐI, tức sơ đồ đã vẽ xong và chữ
   đọc được. JS chỉ tua ngược về trạng thái đầu khi chắc chắn animation sẽ chạy.
   Tắt JS, tắt animation, hay lỗi giữa chừng đều rơi về đây, không mất nội dung. */
.blueprint { padding: 76px 0 84px; background: var(--bg); }
.bp-stage {
  /* width:100% là bắt buộc. Khi khối cha chuyển sang flex/grid lúc bị ghim,
     margin:0 auto khiến phần tử co lại vừa nội dung thay vì giãn tới max-width,
     và hiệu ứng bung ra không xảy ra. */
  position: relative; overflow: hidden; width: 100%;
  max-width: 1120px; margin: 0 auto; border-radius: 26px;
  background: radial-gradient(120% 130% at 50% -20%, #14243f 0%, #0b1626 55%, #08101c 100%);
  box-shadow: 0 30px 70px -40px rgba(8, 16, 28, .8);
}
/* lưới kỹ thuật mờ phía sau */
.bp-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 168, 235, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 168, 235, .07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(85% 75% at 50% 42%, #000 55%, transparent 100%);
}
/* Khung vẽ của khối 3D. Rộng bằng cả cửa sổ ngay từ đầu rồi để overflow:hidden
   của .bp-stage cắt bớt, nên khối bung ra tới đâu là lộ thêm ảnh tới đó mà
   không phải dựng lại 49 nghìn điểm mỗi khung hình.
   Không đặt z-index: .bp-inner đứng sau trong DOM và có position:relative nên
   tự nằm trên, chữ và bản vẽ nét luôn phủ lên đám hạt. */
.bp-3d {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  pointer-events: none;
}

.bp-inner { position: relative; padding: 52px 30px 46px; }

.bp-head { text-align: center; max-width: 44em; margin: 0 auto 26px; }
.bp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 5px 13px; border-radius: 999px; font-size: 12.6px; font-weight: 600;
  color: #a9c6f2; background: rgba(56, 189, 248, .1); border: 1px solid rgba(120, 168, 235, .22);
}
.bp-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; }
.bp-head h2 { color: #fff; font-size: clamp(25px, 3.4vw, 35px); letter-spacing: -.025em; margin: 0 0 8px; }
.bp-head p { color: #93a8c4; margin: 0; }

/* Sơ đồ tỉ lệ 1000/380, tức rộng gấp 2,63 lần cao. Chặn bề rộng theo chiều cao
   khung nhìn để lúc bị ghim, cả khối vẫn nằm gọn trong màn hình, không bị cắt đuôi. */
.bp-svg { display: block; width: 100%; height: auto; margin: 6px auto 4px; max-width: min(1000px, 105vh); }
/* Khi được ghim thì khối phải vừa đúng một màn hình, căn giữa theo chiều dọc. */
.blueprint.dang-ghim {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 22px 0;
}
@media (max-height: 760px) {
  .blueprint.dang-ghim .bp-inner { padding-block: 30px 26px; }
  .blueprint.dang-ghim .bp-head { margin-bottom: 14px; }
  .blueprint.dang-ghim .bp-note { margin-top: 14px; }
}
.bp-box { fill: rgba(17, 32, 54, .72); stroke: rgba(125, 173, 235, .38); stroke-width: 1.4; }
.bp-box-lit { fill: rgba(20, 44, 84, .78); stroke: rgba(56, 189, 248, .62); }
.bp-box-off { fill: rgba(24, 20, 30, .6); stroke: rgba(148, 120, 130, .38); stroke-dasharray: 5 5; }
.bp-tick { fill: none; stroke: #38bdf8; stroke-width: 1.8; stroke-linecap: round; }
.bp-t {
  fill: #eaf2ff; font-family: var(--font); font-size: 15px; font-weight: 700;
  text-anchor: middle; dominant-baseline: middle;
}
.bp-s {
  fill: #93a8c4; font-family: var(--font); font-size: 12.4px;
  text-anchor: middle; dominant-baseline: middle;
}
.bp-dim { fill: #64789a; letter-spacing: .06em; }
.bp-t-off { fill: #9b8b93; }
.bp-link { fill: none; stroke: url(#bpLine); stroke-width: 2.2; stroke-linecap: round; }
.bp-pulse { fill: #7dd3fc; opacity: 0; }
.bp-cut { fill: none; stroke: rgba(190, 130, 150, .5); stroke-width: 2; stroke-dasharray: 6 7; }
.bp-x circle { fill: #1a1220; stroke: rgba(233, 140, 160, .75); stroke-width: 1.6; }
.bp-x path { stroke: #f0a3b4; stroke-width: 2; stroke-linecap: round; fill: none; }

/* Ba thẻ chú thích: LUÔN rõ chữ. Animation chỉ đổi viền và nền, không đổi opacity. */
.bp-legend {
  list-style: none; margin: 26px auto 0; padding: 0; max-width: 1000px;
  display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr);
}
.bp-step {
  border: 1.5px solid rgba(125, 173, 235, .2); border-radius: 15px;
  background: rgba(14, 27, 47, .66); padding: 16px 17px;
  transition: border-color .35s ease, background .35s ease, transform .35s ease;
}
.bp-step b { display: block; color: #eaf2ff; font-size: 14.6px; margin-bottom: 5px; }
.bp-step span { display: block; color: #93a8c4; font-size: 13.2px; line-height: 1.55; }
.bp-step.dang-chay {
  border-color: rgba(56, 189, 248, .7); background: rgba(20, 44, 84, .8);
  transform: translateY(-3px); box-shadow: 0 14px 30px -20px rgba(56, 189, 248, .8);
}
.bp-note {
  max-width: 1000px; margin: 22px auto 0; text-align: center;
  color: #7f93b0; font-size: 13.4px;
}

@media (max-width: 900px) {
  .bp-legend { grid-template-columns: 1fr; }
  .bp-inner { padding: 40px 18px 34px; }
  .blueprint { padding: 56px 0 60px; }
  /* Màn hẹp không ghim khối, và sơ đồ ngang thì cho cuộn ngang trong khung riêng
     thay vì ép co lại đến mức không đọc nổi chữ. Chỉ khung sơ đồ cuộn, thân trang
     vẫn không tràn ngang. */
  .bp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bp-scroll .bp-svg { min-width: 660px; }
}

/* ================= Câu tuyên ngôn lớn, căn giữa ================= */
/* Theo đúng cách các trang phần mềm cao cấp làm: cả câu đứng yên ở màu xám,
   CHỈ một cụm được nhấn hiện dần ra bằng màu thương hiệu. Cả câu lẫn cụm nhấn
   đều để sẵn ở trạng thái đọc được; JS chỉ giấu cụm nhấn khi chắc chắn sẽ chạy
   animation, và luôn có chốt ép về trạng thái cuối. */
.say { background: var(--surface); border-block: 1px solid var(--line); padding: 104px 0 108px; }
.say-text {
  max-width: 17em; margin: 0 auto; text-align: center;
  font-size: clamp(26px, 4.4vw, 47px); line-height: 1.28;
  font-weight: 700; letter-spacing: -.028em;
  color: #93a1b5;
}
.say-text em { font-style: normal; color: var(--brand); }
.nhan-char { display: inline-block; }
@media (max-width: 700px) { .say { padding: 64px 0 68px; } }

/* ================= Ngôn ngữ trình bày dùng chung cho mọi trang ================= */
/* Chữ tiêu đề lớn hơn và chặt hơn, theo cách các trang phần mềm cao cấp trình bày.
   Dùng clamp để màn nhỏ tự thu lại, không cần thêm điểm ngắt. */
.page-head h1 { font-size: clamp(30px, 5.2vw, 52px); letter-spacing: -.032em; line-height: 1.1; }
.page-head p { font-size: clamp(15px, 1.5vw, 17.5px); max-width: 46em; }
.product-layout main > h1 { font-size: clamp(27px, 3.6vw, 40px) !important; letter-spacing: -.03em !important; }
.section-head h2, .cta-inner h2 { font-size: clamp(24px, 3.2vw, 36px); letter-spacing: -.028em; }

/* Câu tuyên ngôn nằm ngay trước chân trang thì cần tách khỏi khối nội dung phía trên. */
.say + footer, .say + .modal-backdrop + footer { margin-top: 0; }

/* ===== Hiệu ứng 1.5: khối tối trượt lên đè khối sáng phía trên ===== */
/* Giá trị ở đây là TRẠNG THÁI CUỐI: khối đã nằm đúng chỗ, đang đè lên mục trên
   bằng margin âm và bo hai góc trên. Tắt JS thì đây là thứ người dùng thấy,
   vẫn là một bố cục hoàn chỉnh chứ không phải nửa vời. */
.cta-truot {
  position: relative; z-index: 2;
  margin-top: -54px;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -22px 50px -30px rgba(8, 16, 28, .55);
}
/* Mục ngay phía trên phải nằm dưới về thứ tự xếp lớp, nếu không nó che mất
   phần bo góc và cả cái bóng đổ. */
.cta-truot { isolation: isolate; }
@media (max-width: 700px) { .cta-truot { margin-top: -34px; border-radius: 22px 22px 0 0; } }

/* ===== Nền kỹ thuật cho hero (thay cho "ảnh 1" trong PROMPT-ANIMATION.md) =====
   Vẽ bằng SVG, 2,6KB, sắc ở mọi độ phân giải, màu khớp biến thương hiệu.
   Đặt sau canvas mạng nơ-ron và trước nội dung; opacity thấp để chữ vẫn rõ. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("bg/mach-hero.svg") center / cover no-repeat;
  opacity: .55;
}
/* Nội dung hero phải nằm trên lớp nền này. */
.hero > .wrap { position: relative; z-index: 2; }

/* ---------- Nền 3D của hero ----------
   Khung vẽ phủ kín hero, nằm ở z-index 1: trên nền mạch điện và mạng nơ-ron,
   dưới lớp che và dưới chữ. */
.hero-3d {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}

/* Lớp che giữa hạt và chữ. Đây là hàng phòng thủ THỨ HAI cho việc đọc chữ:
   shader đã tự dìm hạt trong vùng chữ rồi, nhưng shader dìm theo một hình chữ
   nhật, còn khối chữ hero thì thắt ở giữa. Một mảng tối toả từ tâm bịt nốt
   phần chênh, và cũng giữ được độ tương phản khi hạt sáng dạt vào giữa. */
.hero-che {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  /* Nhẹ tay. Bản trước phủ tối 66% ở giữa khung, chữ thì đọc tốt nhưng nuốt luôn
     phần ảnh, khách không đoán ra nền là hình gì. Nền hero phải NÓI ĐƯỢC nó là
     hình gì, nếu không thì chỉ là hoa văn.
     Việc giữ chữ đọc được chuyển sang bóng đổ trên chính chữ, xem .hero.co-3d
     bên dưới: bóng bám sát nét chữ nên không phải bôi tối cả mảng. */
  background:
    radial-gradient(58% 54% at 50% 46%, rgba(5, 15, 30, .34) 0%,
                    rgba(5, 15, 30, .16) 52%, transparent 82%),
    linear-gradient(180deg, rgba(5,15,30,.42) 0%, transparent 22%,
                    transparent 76%, rgba(5,14,28,.66) 100%);
}

/* Chữ lên hẳn trên lớp che. */
.hero > .wrap { z-index: 3; }

/* Khi nền 3D đã chạy thì tắt hai lớp trang trí cũ. Chồng bốn lớp lên nhau thì
   thành bùn, mà mạng nơ-ron với đám mây hạt lại nói cùng một ý.
   Chỉ tắt khi 3D thực sự lên, nên máy không chạy 3D vẫn giữ nguyên hero cũ. */
/* Bóng đổ cho chữ, CHỈ khi nền 3D đang chạy. Nền cũ đủ phẳng để chữ tự đọc
   được, thêm bóng vào là chữ trông bẩn. Ba lớp bóng: một lớp sát nét cho tương
   phản, hai lớp loe rộng tạo quầng tối mềm quanh chữ. */
.hero.co-3d h1,
.hero.co-3d .lead,
.hero.co-3d .eyebrow,
.hero.co-3d .hero-stats { text-shadow:
  0 1px 2px rgba(3, 10, 22, .95),
  0 4px 18px rgba(3, 10, 22, .85),
  0 8px 46px rgba(3, 10, 22, .7); }
/* .grad tô bằng background-clip:text và color:transparent. Với chữ như vậy,
   text-shadow vẽ ĐÈ LÊN lớp gradient chứ không nằm dưới, nên chữ hoá thành một
   vệt đen. Phải tắt bóng riêng cho nó. Đã thử và đã thấy đúng lỗi này. */
.hero.co-3d h1 .grad { text-shadow: none; }

/* KHÔNG dùng filter/drop-shadow lên .grad. Chữ đó tô bằng background-clip:text;
   đặt filter lên nó là tạo ngữ cảnh vẽ mới và lớp tô hỏng, chữ gần như biến mất.
   Đã thử và đã thấy. Chỗ dựa cho .grad là mảng tối phía dưới đây. */

/* Mảng tối mềm nằm SAU khối chữ, bám đúng khối chữ chứ không bôi cả khung.
   Đây là thứ bảo vệ được cả chữ thường lẫn chữ tô gradient. */
.hero.co-3d > .wrap::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1180px, 96%); height: 116%;
  background: radial-gradient(56% 50% at 50% 48%,
    rgba(4, 12, 26, .88) 0%, rgba(4, 12, 26, .58) 50%, transparent 78%);
}

/* Khi nền 3D đã lên thì phải TẮT HẲN mấy lớp cũ, không phải chỉ giấu đi.
   Đây là nguyên nhân trang giật, và cả hai chỗ đều là lỗi giấu-mà-không-tắt:

   1. #neural-canvas: opacity:0 KHÔNG dừng vòng vẽ của nó. Xử lý ở hero.js,
      xem window.autoeraTatHero.
   2. .hero-blob: ba khối tròn 640 đến 700px, mỗi khối blur(90px), chạy animation
      vô hạn, lại còn mix-blend-mode. Trình duyệt phải làm mờ lại cả ba khối MỖI
      KHUNG HÌNH. Hạ opacity xuống .35 không đỡ được gì, vẫn phải tính đủ.
      display:none mới thật sự gỡ chúng khỏi việc vẽ. */
.hero.co-3d .hero-blob { display: none; }
.hero.co-3d::before { opacity: .16; }
@media (max-width: 700px) { .hero::before { opacity: .34; } }
@media (prefers-reduced-motion: reduce) { .hero::before { opacity: .4; } }

/* Lớp ĐẶC của sơ đồ: mặc định TRONG SUỐT, tức trạng thái cuối là đã tan hết.
   Tắt JS thì người dùng thấy ngay bản vẽ nét hoàn chỉnh, không bị khối đặc che. */
.bp-dac rect { fill: #16304f; stroke: rgba(120,170,235,.5); stroke-width: 1.2; }
.bp-dac { opacity: 0; }

/* ---------- Thanh hỏi ý kiến về đo hiệu quả quảng cáo ----------
   Thanh nổi ở đáy màn hình. KHÔNG phủ mờ trang và KHÔNG khoá thao tác: khách
   đọc được trang, cuộn được, bấm được, rồi mới quyết định. Ép chọn mới cho xem
   là không đàng hoàng, mà cũng làm cái "đồng ý" thu về mất giá trị.
   Hai nút cân nhau về thị giác, không làm nút "Từ chối" mờ đi cho khó bấm. */
.dong-y {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  max-width: 660px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 18px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  animation: dongYLen .28s ease-out;
}
@keyframes dongYLen { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .dong-y { animation: none; } }
.dong-y p { flex: 1 1 300px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.dong-y a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.dong-y-nut { display: flex; gap: 10px; flex: 0 0 auto; }
.dong-y-nut .btn { padding: 9px 18px; font-size: 14px; }
.dong-y-nut .btn-ghost { border: 1px solid var(--line); color: var(--ink); }
.dong-y-nut .btn-ghost:hover { background: var(--bg); }
@media (max-width: 560px) {
  .dong-y { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
  .dong-y-nut { width: 100%; }
  .dong-y-nut .btn { flex: 1; justify-content: center; }
}

/* Ô trạng thái trong trang chính sách */
.do-luong-trang-thai {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; margin-top: 12px;
}
.do-luong-trang-thai b { font-variant-numeric: tabular-nums; }

/* ---------- Ô "Xem chi tiết" trong trang chính sách ----------
   Nội dung vẫn nằm nguyên trong mã trang, chỉ thu gọn về mặt hiển thị. Quan
   trọng với một trang chính sách: công cụ tìm kiếm và trình đọc màn hình vẫn
   đọc được, và người dùng vẫn tìm được bằng Ctrl+F. Giấu bằng JS thì mất cả ba. */
.chi-tiet { margin-top: 14px; }
.chi-tiet > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--brand);
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); list-style: none; user-select: none;
}
.chi-tiet > summary::-webkit-details-marker { display: none; }
.chi-tiet > summary::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .18s ease;
}
.chi-tiet[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.chi-tiet > summary:hover { background: var(--brand-soft); border-color: #bcd8ff; }
.chi-tiet > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.chi-tiet .table-wrap { margin-top: 12px; }
.chi-tiet td:first-child { white-space: nowrap; font-weight: 600; color: var(--ink); }

/* ---------- Phiếu yêu cầu báo giá (trang Sản phẩm) ---------- */
.dat-lam {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.dat-lam > summary {
  display: block; cursor: pointer; padding: 24px 24px 22px; list-style: none;
}
.dat-lam > summary::-webkit-details-marker { display: none; }
.dl-ten { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 8px; }
.dl-mo-ta { display: block; color: var(--ink-2); font-size: 14.5px; margin-bottom: 16px; }
.dl-nut {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--brand);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px;
  transition: background .15s ease, border-color .15s ease;
}
.dl-nut::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .18s ease;
}
.dat-lam[open] .dl-nut::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dat-lam > summary:hover .dl-nut { background: var(--brand-soft); border-color: #bcd8ff; }
.dat-lam > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.dl-than { padding: 0 24px 24px; }
.dl-nhan { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.dl-nhan span { font-weight: 400; color: var(--ink-3); }
.dl-o {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); font-size: 15px; transition: border-color .15s ease;
}
.dl-o:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.dl-vung { resize: vertical; min-height: 108px; line-height: 1.55; }
/* Bẫy máy gửi rác: phải ẩn với người thật nhưng KHÔNG dùng display:none, vì một
   số máy nhận ra mẹo đó và bỏ qua ô. Đẩy ra ngoài màn hình thì chúng vẫn điền. */
.dl-bay { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dl-gui { width: 100%; margin-top: 18px; justify-content: center; }
.dl-trang-thai { font-size: 13.5px; color: var(--ink-2); margin: 10px 0 0; min-height: 1em; }
.dl-trang-thai.loi { color: var(--red); font-weight: 600; }
.dl-xong {
  background: var(--green-soft); border: 1px solid #bfe6d5; border-radius: 10px;
  padding: 18px 20px; font-size: 14.5px;
}
.dl-xong p { margin: 6px 0 0; color: var(--ink-2); }
.dl-ghi-chu { margin-top: 20px; font-size: 14px; color: var(--ink-2); }
.dl-ghi-chu a { color: var(--brand); font-weight: 600; }
/* Mỗi thẻ tự cao theo nội dung của mình. Mặc định lưới kéo mọi ô trong cùng
   hàng cao bằng nhau, nên mở một phiếu là thẻ bên cạnh trống một mảng lớn. */
#dat-lam .grid { align-items: start; }