/* CSS dùng chung cho các trang phụ: chính sách, điều khoản, liên hệ, về chúng tôi.
   Tách riêng thay vì nhúng vào từng trang — bốn bản sao của cùng một khối CSS là
   thứ chắc chắn sẽ lệch nhau sau vài lần sửa.

   Trang chủ KHÔNG dùng file này: CSS của nó vẫn nhúng trong index.html để trang
   quan trọng nhất không phải chờ thêm một request chặn render. */

:root{
  --ink:#15100C; --ink-soft:#211910; --ink-line:#3A2E22;
  --paper:#FBF7F1; --paper-soft:#F3EAD8; --paper-line:#E7DCC9;
  --orange:#F2600C; --orange-deep:#C4480A; --orange-tint:#FDEAD9;
  --text-dark:#FBF7F1; --text-dark-muted:#B8A992;
  --text-light:#1B140D; --text-light-muted:#6E5F4C;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--text-light);
  font-family:'Be Vietnam Pro',system-ui,sans-serif; font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--orange-deep); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{font-family:'Space Grotesk','Be Vietnam Pro',system-ui,sans-serif; margin:0; line-height:1.15; letter-spacing:-.01em; text-wrap:balance;}
p{margin:0;}
.container{max-width:1180px; margin:0 auto; padding-inline:clamp(20px,5vw,64px);}

/* NAV — rút gọn từ trang chủ, chỉ còn logo và nút tải */
.nav{position:sticky; top:0; z-index:50; background:rgba(21,16,12,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--ink-line);}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px;}
.brand{display:flex; align-items:center; gap:10px; font-size:19px; font-weight:700; color:var(--text-dark);}
.brand:hover{text-decoration:none;}
.brand .pro{color:var(--orange);}
.brand img{width:34px; height:auto; display:block;}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{color:var(--text-dark-muted); font-weight:600; font-size:14.5px; white-space:nowrap;}
.nav-links a:hover{color:var(--text-dark); text-decoration:none;}
.nav-links a.btn-primary, .nav-links a.btn-primary:hover{color:var(--text-dark);}
/* 4 link + nút hết chỗ sớm, thu gap rồi ẩn hẳn link trước khi chữ tự gãy. */
@media (max-width:1040px){ .nav-links{gap:20px;} }
@media (max-width:900px){ .nav-links{gap:16px;} }
@media (max-width:860px){ .nav-links a.nav-link-item{display:none;} }
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:999px;
  font-weight:700; font-size:14px; border:2px solid transparent; white-space:nowrap;
}
.btn-primary{background:var(--orange); color:var(--text-dark);}
.btn-primary:hover{background:var(--orange-deep); color:var(--text-dark); text-decoration:none;}
.btn-outline-light{border-color:var(--paper-line); color:var(--text-light);}
.btn-outline-light:hover{border-color:var(--orange); color:var(--orange-deep); text-decoration:none;}
@media (max-width:420px){ .brand{font-size:16px;} .brand img{width:28px;} .nav .btn{padding:9px 14px; font-size:13px;} }

/* ĐẦU TRANG */
.doc-head{background:var(--ink); color:var(--text-dark); padding-block:clamp(36px,6vw,64px);}
.doc-head .crumb{font-size:13px; color:var(--text-dark-muted); margin-bottom:12px;}
.doc-head .crumb a{color:var(--text-dark-muted);}
.doc-head .crumb a:hover{color:var(--orange);}
.doc-head h1{font-size:clamp(1.9rem,3vw + 1rem,2.8rem); font-weight:700;}
.doc-head .cap-nhat{margin-top:14px; font-size:14px; color:var(--text-dark-muted);}

/* NỘI DUNG */
.doc-body{padding-block:clamp(36px,5vw,60px);}
.doc-body .container{max-width:820px;}
.doc-body section{margin-bottom:clamp(30px,4vw,44px);}
.doc-body h2{font-size:clamp(1.25rem,1.2vw + .9rem,1.5rem); font-weight:700; margin-bottom:14px;}
.doc-body h3{font-size:17px; font-weight:700; margin:22px 0 8px;}
.doc-body p{margin-bottom:14px;}
.doc-body p:last-child{margin-bottom:0;}
.doc-body ul{margin:0 0 14px; padding-inline-start:24px; display:grid; gap:9px;}
.doc-body li::marker{color:var(--orange);}
.doc-body strong{font-weight:700;}
.lede{font-size:17.5px; color:var(--text-light-muted); margin-bottom:28px;}

/* Bảng dữ liệu (dùng ở trang chính sách) */
.tbl{overflow-x:auto; border:1px solid var(--paper-line); border-radius:12px; margin-bottom:16px;}
table{border-collapse:collapse; width:100%; font-size:14.5px; min-width:480px;}
th,td{text-align:start; padding:11px 14px; border-bottom:1px solid var(--paper-line); vertical-align:top;}
thead th{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-light-muted); font-weight:700; background:var(--paper-soft); white-space:nowrap;}
tbody tr:last-child td{border-bottom:0;}

/* Khối nhấn mạnh */
.callout{background:var(--orange-tint); border:1px solid #F4C69A; border-radius:12px; padding:18px 20px; margin-bottom:18px;}
.callout h3{margin-top:0; color:var(--orange-deep);}
.callout p:last-child{margin-bottom:0;}
.note{background:var(--paper-soft); border:1px solid var(--paper-line); border-radius:12px; padding:16px 18px; font-size:14.5px; color:var(--text-light-muted); margin-bottom:18px;}
.note b{color:var(--text-light);}

/* CHỖ CẦN ĐIỀN — cố ý cho nổi bật để không ai nhầm là nội dung thật */
.cho-dien{
  display:inline-block; background:#FFF0B3; border:1px dashed #B38B00; color:#6B5200;
  padding:1px 8px; border-radius:6px; font-size:.92em; font-weight:600;
}

/* Thẻ liên hệ */
.lien-he-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-bottom:22px;}
.lh-card{border:1px solid var(--paper-line); border-radius:14px; padding:20px; background:var(--paper-soft);}
.lh-card h3{margin:0 0 6px; font-size:16px;}
.lh-card p{font-size:14.5px; color:var(--text-light-muted); margin-bottom:10px;}
.lh-card .giatri{font-size:16px; font-weight:700; color:var(--text-light); word-break:break-word;}

/* HƯỚNG DẪN — các bước đánh số và khối theo từng hãng máy */
.buoc{counter-reset:b; display:grid; gap:18px; margin-bottom:20px;}
.buoc > li{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; list-style:none;}
.buoc > li::before{
  counter-increment:b; content:counter(b);
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px;
  background:var(--ink); color:var(--paper); width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; margin-top:2px;
}
.buoc h3{margin:0 0 6px; font-size:16.5px;}
.buoc p{margin-bottom:8px; font-size:15.5px;}
ul.buoc{padding-inline-start:0;}

/* Đường dẫn menu trong máy — cho nổi bật vì người dùng dò theo từng chữ */
.duong-dan{
  display:inline-block; background:var(--ink); color:var(--paper); font-weight:600;
  padding:3px 10px; border-radius:7px; font-size:14px; line-height:1.5;
}
.may{border:1px solid var(--paper-line); border-radius:14px; padding:20px 22px; margin-bottom:14px; background:var(--paper-soft);}
.may h3{margin:0 0 10px; font-size:17px; display:flex; align-items:center; gap:9px;}
.may h3::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--orange); flex-shrink:0;}
.may p{font-size:15px; margin-bottom:10px;}
.may p:last-child{margin-bottom:0;}

/* Mục lục đầu bài */
.muc-luc{border:1px solid var(--paper-line); border-radius:14px; padding:18px 22px; margin-bottom:28px; background:var(--paper-soft);}
.muc-luc h2{font-size:14px!important; letter-spacing:.08em; text-transform:uppercase; color:var(--text-light-muted); margin-bottom:10px;}
.muc-luc ol{margin:0; padding-inline-start:20px; display:grid; gap:7px; font-size:15px;}

/* Thẻ bài viết ở trang hub */
.bai-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px;}
.bai-card{border:1px solid var(--paper-line); border-radius:14px; padding:22px; background:var(--paper-soft); display:grid; gap:8px; align-content:start;}
.bai-card h2{font-size:17.5px!important; margin:0;}
.bai-card h2 a{color:var(--text-light);}
.bai-card h2 a:hover{color:var(--orange-deep); text-decoration:none;}
.bai-card p{font-size:14.5px; color:var(--text-light-muted); margin:0;}

/* CHÂN TRANG */
.footer{background:var(--ink); color:var(--text-dark-muted); border-top:1px solid var(--ink-line); padding-block:36px 22px;}
.footer-links{display:flex; flex-wrap:wrap; gap:10px 26px; margin-bottom:22px;}
.footer-links a{color:var(--text-dark-muted); font-size:14.5px;}
.footer-links a:hover{color:var(--text-dark);}
.footer-bottom{border-top:1px solid var(--ink-line); padding-top:18px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

  /* NÚT LIÊN HỆ NỔI — Zalo, Messenger, gọi điện */
  .lien-he-noi{position:fixed; right:16px; bottom:16px; z-index:90; display:grid; gap:10px;}
  .lhn{
    width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
    box-shadow:0 6px 18px rgba(0,0,0,.3); color:#fff;
  }
  .lhn:hover{transform:translateY(-2px); text-decoration:none; color:#fff;}
  .lhn:focus-visible{outline:3px solid #F2600C; outline-offset:3px;}
  .lhn svg{width:30px; height:30px; display:block;}
  .lhn-tel svg, .lhn-mess svg{width:26px; height:26px;}
  .lhn-zalo{background:#0068FF;}
  .lhn-mess{background:#0084FF;}
  .lhn-tel{background:#F2600C;}
  @media (prefers-reduced-motion:no-preference){ .lhn{transition:transform .15s ease;} }
  @media (max-width:480px){
    .lien-he-noi{right:12px; bottom:12px; gap:8px;}
    .lhn{width:46px; height:46px;}
    .lhn svg{width:26px; height:26px;}
    .lhn-tel svg, .lhn-mess svg{width:23px; height:23px;}
  }
  /* Chừa chỗ để nút nổi không che mất dòng cuối chân trang trên điện thoại */
  @media (max-width:480px){ .footer-bottom{padding-bottom:62px;} }

/* BLOG — dòng thông tin bài và thẻ bài viết có ngày */
.bai-meta{font-size:13px; color:var(--text-light-muted); margin-bottom:10px; display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.bai-meta .chip{
  background:var(--orange-tint); color:var(--orange-deep); font-weight:700; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:999px;
}
.bai-card .bai-meta{margin-bottom:4px;}
.bai-card time{font-variant-numeric:tabular-nums;}

/* Ảnh minh hoạ trong bài */
.doc-body figure{margin:0 0 30px;}
.doc-body figure img{width:100%; height:auto; display:block; border-radius:16px; border:1px solid var(--paper-line);}
.doc-body figcaption{font-size:13.5px; color:var(--text-light-muted); margin-top:10px; line-height:1.5;}

/* Thẻ bài viết có ảnh (trang blog) */
.bai-card.co-anh{padding:0; overflow:hidden;}
.bai-card.co-anh .anh{display:block; aspect-ratio:1200/675; background:var(--ink); overflow:hidden;}
.bai-card.co-anh .anh img{width:100%; height:100%; object-fit:cover; display:block;}
.bai-card.co-anh .than{padding:20px 22px 24px; display:grid; gap:8px;}
.bai-card.co-anh:hover .anh img{opacity:.9;}

/* ───────── TRANG DANH SÁCH BLOG ─────────
   Bài đọc giới hạn 820px cho dễ đọc, nhưng lưới thẻ thì không — nới ra 1180px
   mới đủ chỗ cho 4 cột. Chỉ áp cho trang có .la-danh-sach. */
.doc-body.la-danh-sach .container{max-width:1280px;}
.la-danh-sach .bai-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px;}
@media (max-width:1100px){ .la-danh-sach .bai-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));} }
@media (max-width:560px){ .la-danh-sach .bai-grid{grid-template-columns:1fr;} }
.la-danh-sach .bai-card.co-anh .than{padding:16px 18px 20px;}
.la-danh-sach .bai-card h2{font-size:16px!important; line-height:1.32;}
.la-danh-sach .bai-card p{font-size:13.5px; line-height:1.5;}

/* Thanh công cụ: tìm kiếm + lọc nhóm */
.cong-cu{display:grid; gap:16px; margin-bottom:26px;}
.o-tim{position:relative;}
.o-tim input{
  width:100%; font:inherit; font-size:15.5px; padding:13px 44px 13px 44px;
  border:1px solid var(--paper-line); border-radius:999px; background:var(--paper);
  color:var(--text-light);
}
.o-tim input:focus{outline:2px solid var(--orange); outline-offset:2px; border-color:transparent;}
.o-tim input::placeholder{color:var(--text-light-muted);}
.o-tim .kinh{position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-light-muted); pointer-events:none;}
.o-tim .xoa{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  appearance:none; border:0; background:transparent; cursor:pointer; font-size:19px;
  color:var(--text-light-muted); padding:4px 8px; line-height:1; border-radius:50%;
}
.o-tim .xoa:hover{color:var(--text-light);}
.o-tim .xoa:focus-visible{outline:2px solid var(--orange);}

.loc-nhom{display:flex; flex-wrap:wrap; gap:8px;}
.loc-nhom button{
  appearance:none; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600;
  padding:8px 16px; border-radius:999px; border:1px solid var(--paper-line);
  background:var(--paper); color:var(--text-light-muted);
}
.loc-nhom button:hover{border-color:var(--orange); color:var(--text-light);}
.loc-nhom button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--text-dark);}
.loc-nhom button:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}

.ket-qua{font-size:14px; color:var(--text-light-muted); font-variant-numeric:tabular-nums;}
.khong-thay{padding:40px 0; text-align:center; color:var(--text-light-muted); font-size:16px;}

/* Phân trang */
.phan-trang{display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:wrap; margin-top:32px;}
.phan-trang button{
  appearance:none; cursor:pointer; font:inherit; font-size:14.5px; font-weight:600;
  min-width:40px; padding:9px 13px; border-radius:10px;
  border:1px solid var(--paper-line); background:var(--paper); color:var(--text-light);
}
.phan-trang button:hover:not(:disabled){border-color:var(--orange);}
.phan-trang button[aria-current="page"]{background:var(--ink); border-color:var(--ink); color:var(--text-dark);}
.phan-trang button:disabled{opacity:.4; cursor:default;}
.phan-trang button:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}

/* Không có JS thì ẩn thanh công cụ và phân trang — mọi bài vẫn hiện đầy đủ.
   Lớp .co-js được JS gắn vào <html>, nên đây là mặc định an toàn. */
.cong-cu, .phan-trang, .ket-qua{display:none;}
.co-js .cong-cu{display:grid;}
.co-js .phan-trang{display:flex;}
.co-js .ket-qua{display:block;}

/* ───────── BỀ RỘNG TRANG BÀI ─────────
   MỘT bề rộng duy nhất cho mọi khối: chữ, ảnh, bảng, thẻ đều thẳng mép trái.
   Trước đây chữ giới hạn 760px còn ảnh tràn ra 1060px — đúng kiểu bố cục báo
   chí trên lý thuyết, nhưng với trang có nhiều khối xen kẽ thì hai mép trái
   khác nhau đọc ra thành lệch lạc chứ không ra chủ đích.
   900px với cỡ chữ 17px cho khoảng 78 ký tự mỗi dòng — vẫn trong ngưỡng dễ đọc. */
.doc-body:not(.la-danh-sach) .container{max-width:900px;}
.doc-body:not(.la-danh-sach){font-size:17px;}
.doc-body:not(.la-danh-sach) .lede{font-size:18.5px;}

/* Nhãn chỉ dành cho trình đọc màn hình */
.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;
}

/* Thuộc tính hidden phải thắng mọi quy tắc display của chính stylesheet này.
   [hidden]{display:none} nằm trong stylesheet mặc định của trình duyệt nên thua
   bất kỳ selector lớp nào — ví dụ .bai-card{display:grid}. Hậu quả: JS đặt
   el.hidden = true mà thẻ vẫn hiện nguyên. */
[hidden]{display:none !important;}

/* ───────── KHỐI MẠNG XÃ HỘI ─────────
   Dùng iframe THUẦN của từng nền tảng, không nạp SDK. Nhờ vậy CSP vẫn giữ được
   script-src 'self' — script lạ chèn vào trang vẫn không chạy được. Chỉ phải mở
   frame-src cho ba tên miền. Iframe đều lazy-load nên không làm chậm lúc mở trang.

   Hai khung nhúng (Facebook, TikTok) đặt cạnh nhau, cùng 500×500. 500px là trần
   của plugin Facebook, còn khung TikTok rộng hơn cũng không hiện thêm video —
   chỉ loãng ra. Vì vậy cặp khung canh giữa thay vì kéo full 1280px của trang. */
.mxh{border-top:1px solid var(--paper-line); margin-top:48px; padding-top:40px;}
.mxh-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,500px));
  gap:24px; justify-content:center; align-items:start;
}
/* 1060px: dưới ngưỡng này hai cột 500px cộng khoảng cách không còn đủ chỗ. */
@media (max-width:1060px){ .mxh-grid{grid-template-columns:minmax(0,500px);} }
.mxh-khung{
  border:1px solid var(--paper-line); border-radius:16px; overflow:hidden;
  background:var(--paper);
}
.mxh-khung iframe{width:100%; height:500px; border:0; display:block;}
/* TikTok tự vẽ sẵn một thẻ trắng có viền bên trong iframe, kẻ thêm
   viền ngoài nữa thành hai lớp khung lồng nhau. Nhưng vẫn giữ nền
   trắng: dịch vụ nhúng của TikTok thỉnh thoảng trả 503 bằng một
   trang text trong suốt — không có nền thì dòng chữ lỗi nổi thẳng
   lên nền trang, trông như lỗi của mình. */
.mxh-khung.la-tt{border:0; background:#fff;}

/* Hai đường dẫn dự phòng, trải hết bề ngang dưới hai khung nhúng.
   TikTok: dịch vụ nhúng của họ thỉnh thoảng trả 503 "overload-protect",
   lúc đó khung trên trống nên vẫn phải có lối sang thẳng ứng dụng.
   Instagram: không nhúng được cả hồ sơ, /vistormpro/embed/ trả trang đăng nhập. */
.mxh-ben{grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:4px;}
@media (max-width:700px){ .mxh-ben{grid-template-columns:1fr;} }
.mxh-the{
  display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:16px;
  background:var(--paper-soft); border:1px solid var(--paper-line); color:var(--text-light);
}
.mxh-the:hover{border-color:var(--orange); text-decoration:none; color:var(--text-light);}
.mxh-icon{width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center; color:#fff;}
.mxh-icon svg{width:24px; height:24px;}
.mxh-tt .mxh-icon{background:#15100C;}
.mxh-ig .mxh-icon{background:linear-gradient(45deg,#F09433,#DC2743,#BC1888);}
.mxh-chu b{display:block; font-size:15.5px; font-weight:700;}
.mxh-chu span{display:block; font-size:13.5px; color:var(--text-light-muted); line-height:1.45;}
.mxh-mui{margin-left:auto; flex:none; font-size:14px; font-weight:600; color:var(--text-light-muted);}
@media (max-width:560px){ .mxh-mui{display:none;} }

/* ───────── KHỐI GIÁ (/bang-gia/) ─────────
   Một khối duy nhất được nổi trên trang, vì trang này chỉ có đúng một điều cần
   nói: hiện miễn phí. Không dựng lưới nhiều gói — có nhiều gói đâu mà so. */
.goi{
  border:1px solid var(--paper-line); border-radius:18px; background:var(--paper-soft);
  padding:30px 28px; margin:26px 0 30px; text-align:center;
}
.goi-nhan{
  font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-light-muted); margin:0;
}
.goi-gia{
  font-family:'Space Grotesk','Be Vietnam Pro',system-ui,sans-serif;
  font-weight:700; line-height:1; margin:10px 0 0; color:var(--orange-deep);
  font-size:30px;
}
.goi-gia span{font-size:62px; letter-spacing:-0.02em;}
.goi-phu{margin:14px 0 20px; font-size:14.5px; color:var(--text-light-muted);}
.goi .btn{display:inline-flex;}
@media (max-width:520px){
  .goi{padding:26px 20px;}
  .goi-gia span{font-size:50px;}
}

/* ───────── BÀI GHIM ─────────
   Bài thông báo ra mắt đứng đầu danh sách bất kể ngày đăng, nên cần dấu hiệu
   nhìn thấy được — không thì người đọc tưởng danh sách sắp sai khi thấy bài
   02/10 nằm trên bài 08/10.
   Nhãn dùng lớp riêng chứ KHÔNG dùng .chip: blog.js đọc .chip đầu tiên trong
   thẻ để lấy chuyên mục, thêm một .chip nữa là bộ lọc hiểu sai nhóm. */
.la-ghim .anh{position:relative;}
.nhan-ghim{
  position:absolute; top:10px; inset-inline-start:10px;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:var(--paper); padding:3px 9px; border-radius:999px;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.bai-card.la-ghim{border-color:#E0C49A;}