/* chung.css — phần khung trang dùng chung cho mọi trang: nền cơ sở, đầu
   trang, điều hướng, nút, chân trang. Nội dung riêng của từng trang (khối
   giữa đầu trang và chân trang) không đặt ở đây. Tải sau token.css. */

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  /* Ngăn xếp phông có sẵn trong hệ điều hành người truy cập, không nạp
     tệp phông nào từ ngoài */
  font-family:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,
              "Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Chữ số bề rộng bằng nhau để các mốc và con số thẳng cột */
  font-variant-numeric:tabular-nums;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-weight:500;margin:0;line-height:1.25;letter-spacing:-.01em}

.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-size:12px;color:var(--ink-3);letter-spacing:.04em;margin:0 0 12px}

main{padding:40px 0 64px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ============================================================
   ĐẦU TRANG — nền paper, không dùng nền navy
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--navy-line);
}
.head-in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--h-head);
}
.brand{display:flex;align-items:center;gap:2px}
.brand img{height:24px;width:auto}

/* ============================================================
   ĐIỀU HƯỚNG — bố cục màn rộng
   ============================================================ */
.nav{display:flex;align-items:center;gap:4px;margin:0;padding:0}
.nav > li{position:relative;list-style:none}

.nav-top{
  font:inherit;font-size:15px;font-weight:400;color:var(--ink);
  background:transparent;border:0;cursor:pointer;
  padding:0 10px;height:38px;line-height:38px;
  border-bottom:2px solid transparent;display:inline-block;
}
.nav-top:hover{color:var(--navy)}
/* Gạch nhấn dưới mục điều hướng đang mở */
.nav-top.on{border-bottom-color:var(--red);color:var(--navy)}
.nav-top:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* Bảng thả xuống dính liền mục cha. Nếu đặt bảng bằng toạ độ tuyệt đối thì
   sinh ra một khoảng trống giữa đáy mục cha và mép trên của bảng; con trỏ
   đi qua khoảng trống đó là rời khỏi mục cha và bảng đóng ngay. Bảng neo
   vào đáy mục cha, phần đệm thị giác do cầu nối trong suốt đảm nhiệm nên
   trạng thái trỏ chuột không bị ngắt.
   Bảng tự đo theo mục dài nhất thay vì đặt một con số cứng, nên không mục
   nào bị ngắt dòng khi nội dung đổi; max-width là chốt an toàn để bảng
   không tràn mép phải màn hình. */
.sub{
  position:absolute;top:100%;left:0;margin:8px 0 0;
  min-width:210px;width:max-content;
  max-width:min(340px, calc(100vw - 32px));
  padding:6px;list-style:none;
  background:var(--paper);border:1px solid var(--navy-line);border-radius:var(--r);
  display:none;
}
.sub::before{content:"";position:absolute;top:-9px;left:0;right:0;height:9px}
/* Mở bằng rê chuột CHỈ trên thiết bị có trỏ chuột thật. Trên màn cảm ứng,
   quy tắc :hover bị trình duyệt mô phỏng và gây kẹt trạng thái, nên bảng
   con ở đó được mở bằng lớp .open do cú chạm đặt vào. */
@media (hover: hover){
  .nav > li:hover .sub{display:block}
}
.nav > li.open .sub,
.nav > li:focus-within .sub{display:block}
.sub a,.sub span{
  display:block;padding:8px 12px;font-size:14px;border-radius:6px;color:var(--ink-2);
  white-space:nowrap;
}
.sub a:hover{background:var(--navy-wash);color:var(--navy)}
.sub span.soon{color:var(--ink-3);cursor:default}
.sub span.soon::after{content:" · sắp ra mắt";font-size:12px;color:var(--ink-3)}

.head-cta{display:flex;align-items:center;gap:10px}
.burger{display:none}

/* ============================================================
   NÚT — dùng chung cho mọi trang
   ============================================================ */
.btn{
  font:inherit;font-size:15px;height:44px;padding:0 22px;
  border-radius:var(--r);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-primary{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.btn-primary:hover{background:#00113F}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.btn-ghost:hover{background:var(--navy-wash)}
.btn-sm{height:44px;font-size:13px;padding:0 16px;white-space:nowrap}
.btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ============================================================
   CHÂN TRANG — nền paper-2, không dùng nền navy
   ============================================================ */
.site-foot{background:var(--paper-2);border-top:1px solid var(--line);padding:44px 0 28px}
/* Ba cot noi dung do theo chuoi dai nhat cua chinh no (max-content) nen
   khong bao gio ngat dong giua chung; cot thuong hieu nhan phan con lai.
   Dat con so fr co dinh thi phai do lai moi khi doi mot nhan lien ket. */
.foot-cols{display:grid;
  grid-template-columns:minmax(0,1fr) max-content max-content max-content;
  gap:32px}
.foot-col h4{font-size:13px;color:var(--ink-3);font-weight:400;margin:0 0 12px}
/* Chan trang: vach do tren tieu de cot. Inline-block de vach dai dung bang chu. */
.foot-col h4{border-top:2px solid var(--red);padding-top:10px;display:inline-block}
.foot-col ul{margin:0;padding:0;list-style:none}
.foot-col li{margin-bottom:9px}
/* text-wrap:pretty cam dong cuoi chi con mot tu; trinh duyet tu keo
   them mot tu xuong. Trinh duyet chua ho tro thi bo qua, khong hong. */
.foot-col a{font-size:14px;color:var(--ink-2);text-wrap:pretty}
.foot-col a:hover{color:var(--navy)}
.foot-brand img{height:44px;width:auto;margin-bottom:12px}
.foot-tagline{font-size:12px;color:var(--ink-3);margin:0;max-width:230px;line-height:1.7}
.foot-bottom{
  border-top:1px solid var(--line);margin-top:32px;padding-top:18px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-3);
}
.foot-bottom p{margin:0}

@media (max-width:860px){
  .foot-cols{grid-template-columns:1fr 1fr;gap:28px}
}

/* ============================================================
   MÀN HẸP — điểm ngắt 640px, dùng chung cho khung, điều hướng, chân trang
   ============================================================ */
@media (max-width:640px){
  main{padding:24px 0 48px}
  .foot-cols{grid-template-columns:1fr;gap:22px}

  .burger{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;background:transparent;border:1px solid var(--line);
    border-radius:var(--r);cursor:pointer;color:var(--ink);
  }
  /* Vùng chạm tối thiểu 44px. Đo được 38x38 nên ngón tay trượt nút.
     Đặt bằng mã định danh để chắc chắn thắng quy tắc lớp ở trên, và
     dùng min- để bề ngang vẫn nới ra được nếu biểu tượng đổi cỡ. */
  #burger{min-width:44px;min-height:44px}
  .nav{
    display:none;position:absolute;top:var(--h-head);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px var(--pad) 16px;
  }
  /* Giới hạn chiều cao theo vùng nhìn thật rồi cho bảng tự cuộn bên trong.
     Khai vh trước làm bản lui, dvh sau vì thanh địa chỉ trình duyệt điện
     thoại co giãn khiến vh đo lớn hơn vùng nhìn thấy thật. */
  .nav.open{
    display:flex;
    max-height:calc(100vh - var(--h-head));
    max-height:calc(100dvh - var(--h-head));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .nav-top{height:auto;line-height:1.6;padding:10px 0;border-bottom:0;font-size:16px}
  /* Bảng con hiện sẵn theo dòng, không cần cầu nối và không chặn xuống dòng */
  .sub{position:static;display:block;border:0;padding:0 0 6px 12px;min-width:0;
    margin:0;width:auto;max-width:none}
  .sub::before{display:none}
  .sub a,.sub span{padding:6px 0;white-space:normal}
  .head-cta .btn{display:none}
  .head-in{position:relative}
}

/* ============================================================
   THÀNH PHẦN DÙNG CHUNG GIỮA CÁC TRANG NỘI DUNG
   Trước đây lặp lại giống nhau trong CSS riêng của bốn trang.
   Sửa một nơi này thì đổi ở mọi trang dùng chung.
   ============================================================ */
.row{display:flex;gap:10px;flex-wrap:wrap}
.card h3{font-size:19px;margin:12px 0 8px}
.a{padding:12px 16px 2px;font-size:15px;color:var(--ink-2)}
.lbl{font-size:12px;color:var(--ink-3);margin:0 0 14px}
.bridge{font-size:13px;color:var(--ink-3);text-align:center;margin:0 0 14px}
.faq{background:var(--paper-2);border-radius:var(--r);padding:24px 28px;margin-bottom:28px}
.qa{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.qa:first-of-type{margin-top:0;border-top:0;padding-top:0}
.q:hover{border-color:var(--navy-line)}
.q:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.close{text-align:center;padding:16px 0 8px}
.close p{font-size:17px;margin:0 0 16px}