/* T2 geo-accessibility 30/10/2026: link bỏ qua tới nội dung + lớp ẩn thị giác */
.bo-qua{position:absolute; left:-9999px; top:8px; z-index:2000; background:#fff; color:#1f2a37; padding:10px 14px; border-radius:8px; font-weight:700; text-decoration:none; box-shadow:0 2px 12px rgba(0,0,0,.25)}
.bo-qua:focus{left:8px; outline:3px solid #e8551f; outline-offset:2px}
.an-ma{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
/* ============================================================
   Kiểu dùng chung cho trang danh sách bài viết và từng bài —
   dựng 23/10/2026 theo mẫu alophuquoc.com/en/blog/, cùng hệ màu,
   font với trang chủ trang-ban-hang-viet.html (Be Vietnam Pro toàn trang từ 26/10 +
   Be Vietnam Pro, nhấn cam). Bản tiếng Việt đứng tên Thanh Trúc.
   ============================================================ */
:root{
  --nen:#ffffff; --nen-mem:#f7f5f2; --toi:#1f2a37; --toi-2:#0f1822;
  --chu:#1f2a37; --chu-mem:#5b6470; --chu-mo:#5f6b7a;
  --cam:#ff6b35; --cam-chu:#c43f0e; --cam-dam:#e8551f; --cam-nhat:#fff1ea;
  --ke:#e8e4de; --xanh:#16a34a;
  --serif:'Be Vietnam Pro','BVP Du Phong','BVP Du Phong R',-apple-system,'Segoe UI',system-ui,sans-serif; /* 26/10/2026: anh Liêm chốt cả trang một phông Be Vietnam Pro, bỏ Playfair */
  --sans:'Be Vietnam Pro','BVP Du Phong','BVP Du Phong R',-apple-system,'Segoe UI',system-ui,sans-serif;
  --bong:0 10px 30px rgba(31,42,55,.08); --bo:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important; transition:none!important} }
body{margin:0; background:var(--nen); color:var(--chu); font-family:var(--sans); font-size:16px;
  line-height:1.7; -webkit-font-smoothing:antialiased; padding-top:72px}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; line-height:1.2; letter-spacing:-.02em; font-family:var(--serif); font-weight:800}
h2 em,h1 em{font-style:italic; color:var(--cam-chu)}
p{margin:0 0 14px}
.bao{max-width:1160px; margin:0 auto; padding:0 24px}
.hep{max-width:860px; margin:0 auto; padding:0 24px}
.mat{font-size:12px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--cam-chu); margin-bottom:14px}
.nut{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 24px;
  border-radius:50px; font-weight:700; font-size:15px; border:2px solid transparent; cursor:pointer;
  transition:background .15s ease, border-color .15s ease}
.nut-cam{background:var(--cam-dam); color:#fff}
.nut-cam:hover{background:var(--cam-dam)}
.nut-vien{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.nut-vien:hover{border-color:#fff}
.nut:focus-visible{outline:3px solid var(--cam); outline-offset:3px}

/* ---------- thanh trên ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:60; background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--ke)}
.nav-trong{display:flex; align-items:center; justify-content:space-between; height:72px; max-width:1160px;
  margin:0 auto; padding:0 24px; gap:20px}
.nav-ten{font-family:var(--serif); font-size:20px; font-weight:700; white-space:nowrap}
.nav-ten em{font-style:italic; color:var(--cam-chu)}
.nav-lk{display:flex; align-items:center; gap:26px; font-size:14px; font-weight:500; color:var(--chu-mem)}
.nav-lk a:hover{color:var(--cam-chu)}
.nav-lk a.hien{color:var(--cam-chu)}
.nav-lk .nut{min-height:40px; padding:9px 20px; font-size:14px; color:#fff; white-space:nowrap}
.nav-lk .nut .ngan{display:none}

/* ===== Menu đổi ngôn ngữ bằng cờ (26/10/2026) — bản dịch GÁC LẠI 27/10, tạm ẩn; có bản dịch thì xóa dòng display:none ===== */
/* 31/10/2026: hiện lại menu ngôn ngữ, bản ngoại ngữ ghi 'sắp có' (anh Liêm) */
.ngon-ngu{position:relative}
.ngon-ngu summary{list-style:none; display:block; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent}
.ngon-ngu summary::-webkit-details-marker{display:none}
.ngon-ngu summary::marker{content:""}
.ngon-ngu .nut-co{display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--ke); border-radius:50px;
  background:#fff; font-size:13px; font-weight:600; color:var(--chu); line-height:1}
.ngon-ngu summary:hover .nut-co{border-color:var(--cam)}
.ngon-ngu .nut-co::after{content:""; width:6px; height:6px; border-right:1.5px solid var(--chu-mo); border-bottom:1.5px solid var(--chu-mo); transform:rotate(45deg); margin:-3px 2px 0}
.ngon-ngu img{width:22px; height:15px; object-fit:cover; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.08); display:block}
.ngon-ngu ul{position:absolute; right:0; top:calc(100% + 8px); margin:0; padding:6px; list-style:none; background:#fff; border:1px solid var(--ke);
  border-radius:14px; box-shadow:0 14px 40px rgba(31,42,55,.14); min-width:230px; z-index:70}
.ngon-ngu li a,.ngon-ngu li .sap-co{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; font-size:14px; color:var(--chu); text-decoration:none; white-space:nowrap}
.ngon-ngu li a:hover{background:var(--cam-nhat); color:var(--chu)}
.ngon-ngu li a small,.ngon-ngu li .sap-co small{margin-left:auto; color:var(--chu-mo); font-size:11.5px; font-weight:500}
.ngon-ngu li a[aria-current="true"]{background:var(--nen-mem); font-weight:700}
.ngon-ngu li .sap-co{color:var(--chu-mo); cursor:default}
.ngon-ngu li .sap-co img{opacity:.55}
@media (max-width:820px){ .ngon-ngu .ma{display:none} .ngon-ngu .nut-co{padding:6px 7px} }

@media (max-width:820px){ .nav-lk > a:not(.nut){display:none} .nav-trong{height:62px} body{padding-top:62px} .nav-ten{font-size:17px}
  .nav-lk .nut{padding:8px 14px; font-size:13px} .nav-lk .nut .dai{display:none} .nav-lk .nut .ngan{display:inline} }

/* ---------- thanh lọc chủ đề (trang danh sách) ---------- */
.loc{position:sticky; top:72px; z-index:55; background:#fff; border-bottom:1px solid var(--ke)}
.loc-trong{max-width:1160px; margin:0 auto; padding:0 24px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none}
.loc-trong::-webkit-scrollbar{display:none}
.loc button{padding:14px 16px; font-size:14px; font-weight:600; color:var(--chu-mem); border:0; background:none;
  cursor:pointer; white-space:nowrap; border-bottom:3px solid transparent; font-family:inherit}
.loc button:hover{color:var(--cam-chu)}
.loc button.dang{color:var(--cam-chu); border-bottom-color:var(--cam)}
@media (max-width:820px){ .loc{top:62px} }

/* ---------- đầu trang danh sách ---------- */
.dau-trang{padding:44px 0 10px}
.dau-trang h1{font-size:clamp(30px,4.5vw,46px)}
.dau-trang p{color:var(--chu-mem); margin-top:10px; font-size:16.5px; max-width:60ch}
.the{display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--cam-chu); background:var(--cam-nhat); border-radius:6px; padding:4px 9px}
.meta{font-size:12.5px; color:var(--chu-mo); text-transform:uppercase; letter-spacing:.8px; font-weight:600}
.meta b{color:var(--cam-chu); font-weight:700}

/* ---------- bài nổi bật ---------- */
.noi{display:grid; grid-template-columns:1.55fr 1fr; gap:30px; padding:24px 0 10px; border-bottom:1px solid var(--ke)}
.noi-chinh img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--bo)}
.noi-chinh .hang{margin:14px 0 8px; display:flex; gap:10px; align-items:center}
.noi-chinh h2{font-size:clamp(22px,2.8vw,32px)}
.noi-chinh h2 a:hover{color:var(--cam-chu)}
.noi-chinh p{color:var(--chu-mem); margin-top:8px; font-size:15.5px}
.noi-phu{display:grid; gap:20px; align-content:start}
.phu-bai{display:grid; grid-template-columns:150px 1fr; gap:14px; align-items:start; padding-bottom:18px;
  border-bottom:1px dashed var(--ke)}
.phu-bai:last-child{border-bottom:0}
.phu-bai img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px}
.phu-bai h3{font-size:16.5px; line-height:1.35}
.phu-bai h3 a:hover{color:var(--cam-chu)}
.phu-bai .meta{margin-top:6px; display:block}
@media (max-width:860px){ .noi{grid-template-columns:1fr} .phu-bai{grid-template-columns:120px 1fr} }

/* ---------- lưới bài ---------- */
.muc-dau{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:44px 0 20px;
  padding-left:14px; border-left:4px solid var(--cam)}
.muc-dau h2{font-size:24px}
.muc-dau a{font-size:14px; font-weight:600; color:var(--cam-chu)}
.luoi{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.bai{background:#fff; border:1px solid var(--ke); border-radius:var(--bo); overflow:hidden; display:flex;
  flex-direction:column; transition:transform .2s, box-shadow .2s}
.bai:hover{transform:translateY(-4px); box-shadow:var(--bong)}
.bai img{width:100%; aspect-ratio:16/10; object-fit:cover}
.bai .than{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.bai h3{font-size:16.5px; line-height:1.35; flex:1}
.bai h3 a:hover{color:var(--cam-chu)}
.bai.an{display:none}
@media (max-width:1000px){ .luoi{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .luoi{grid-template-columns:1fr} }

/* ---------- kêu gọi + video (danh sách) ---------- */
.goi{background:var(--toi); color:#fff; border-radius:var(--bo); padding:40px 36px; margin-top:46px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px}
.goi h2{color:#fff; font-size:clamp(22px,3vw,30px)}
.goi p{color:rgba(255,255,255,.78); margin:6px 0 0; max-width:52ch}
.video-muc{background:var(--toi-2); margin-top:46px; padding:44px 0 50px; color:#fff}
.video-muc .muc-dau{margin-top:0}
.video-muc .muc-dau h2{color:#fff}
.video-luoi{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.vid{position:relative; border-radius:var(--bo); overflow:hidden; background:#000; cursor:pointer; border:0;
  padding:0; width:100%; text-align:left; color:#fff; font:inherit; aspect-ratio:9/16; max-height:420px}
.vid img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; transition:transform .4s}
.vid:hover img{transform:scale(1.03)}
.vid .choi{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px;
  border-radius:50%; background:var(--cam); display:grid; place-items:center; box-shadow:0 10px 30px rgba(255,107,53,.45)}
.vid .choi svg{width:24px; height:24px; margin-left:3px}
.vid .nhan{position:absolute; left:0; right:0; bottom:0; padding:40px 14px 14px; font-size:13.5px; font-weight:600;
  line-height:1.4; background:linear-gradient(180deg,transparent,rgba(0,0,0,.8))}
.vid iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
@media (max-width:760px){ .video-luoi{grid-template-columns:1fr; max-width:360px; margin:0 auto} }

/* ---------- bài viết: đầu bài ---------- */
.dau-bai{position:relative; min-height:62vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden;
  background:var(--toi-2); isolation:isolate}
.dau-bai img.nen{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.85}
.dau-bai::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(15,24,34,.9) 0%, rgba(15,24,34,.4) 55%, rgba(15,24,34,.2) 100%)}
.dau-bai .nd{position:relative; z-index:2; max-width:860px; margin:0 auto; padding:90px 24px 56px; width:100%}
.vet{font-size:13px; color:rgba(255,255,255,.75); margin-bottom:14px}
.vet a:hover{color:#fff}
.dau-bai h1{font-size:clamp(30px,5vw,52px); color:#fff; letter-spacing:-.5px; text-wrap:balance}
.dau-bai p{font-size:17px; color:rgba(255,255,255,.92); max-width:60ch; margin:14px 0 0}
.dau-bai .meta{margin-top:18px; color:rgba(255,255,255,.7)}
.dau-bai .meta b{color:#fff}
.dau-bai .nguoi-viet{margin-top:10px; font-size:14px; color:rgba(255,255,255,.85)}
.dau-bai .nguoi-viet a{color:#fff; text-decoration:underline; text-underline-offset:3px}

/* ---------- bài viết: thân ---------- */
.bai-viet{padding:64px 0}
.bai-viet section{margin-bottom:54px}
.bai-viet h2{font-size:clamp(24px,3.4vw,34px); margin-bottom:16px; scroll-margin-top:90px}
.bai-viet h3{font-size:20px; margin:26px 0 10px; font-family:var(--sans); font-weight:700}
.bai-viet p{color:var(--chu-mem); margin-bottom:14px}
.bai-viet p b,.bai-viet li b{color:var(--chu)}
.bai-viet ul,.bai-viet ol{margin:0 0 14px 20px; color:var(--chu-mem)}
.bai-viet li{margin-bottom:8px}
.bai-viet .mo-dau{font-size:18px; color:var(--chu); line-height:1.7}
.bai-viet .tac-gia{font-size:14.5px; color:var(--chu-mo); font-style:italic; margin-bottom:34px}
.muc-luc{background:var(--nen-mem); border:1px solid var(--ke); border-radius:var(--bo); padding:22px 26px; margin-bottom:48px}
.muc-luc b{font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--cam-chu)}
.muc-luc ol{margin:10px 0 0 20px; color:var(--chu-mem); font-size:15px}
.muc-luc li{margin-bottom:5px}
.muc-luc a:hover{color:var(--cam-chu)}
.hai{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:18px 0}
.hai .o{background:#fff; border:1px solid var(--ke); border-radius:var(--bo); padding:22px 24px}
.hai h3{margin-top:0; color:var(--cam-chu); font-size:18px}
.hai p{font-size:15px; margin-bottom:0}
@media (max-width:640px){ .hai{grid-template-columns:1fr} }
figure{margin:24px 0}
.anh-hang{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.anh-hang img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px}
figcaption{font-size:13px; color:var(--chu-mo); margin-top:10px; text-align:center}
@media (max-width:560px){ .anh-hang{grid-template-columns:1fr} }
.meo{background:var(--cam-nhat); border-left:4px solid var(--cam); border-radius:0 10px 10px 0; padding:16px 20px;
  margin:20px 0; font-size:15.5px; color:var(--chu)}
.meo b{color:var(--cam-chu)}
.bang{width:100%; border-collapse:collapse; font-size:15px; margin:14px 0 20px}
.bang th,.bang td{padding:11px 10px; border-bottom:1px solid var(--ke); text-align:left; vertical-align:top}
.bang th{font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--chu-mo); background:var(--nen-mem)}
.bang td:last-child,.bang th:last-child{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.bang .tong td{font-weight:700; color:var(--chu); border-top:2px solid var(--toi)}
.bang .tong td:last-child{color:var(--cam-chu); font-family:var(--serif); font-size:18px}
.goi-bai{background:var(--toi); color:#fff; border-radius:var(--bo); padding:38px 34px; margin:30px 0; text-align:center}
.goi-bai h3{color:#fff; font-family:var(--serif); font-size:26px; margin:0 0 10px; font-weight:700}
.goi-bai p{color:rgba(255,255,255,.85); max-width:54ch; margin:0 auto 22px}
.goi-bai .hang{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.goi-bai .gia{font-family:var(--serif); font-size:15px; color:rgba(255,255,255,.75); margin-top:16px}
.hoi .o{border:1px solid var(--ke); border-radius:var(--bo); padding:20px 24px; margin-bottom:12px; background:#fff}
.hoi .q{font-weight:700; margin-bottom:8px; color:var(--chu)}
.hoi h3.q{font-size:inherit; line-height:inherit; margin:0 0 8px; font-family:inherit} /* 30/10/2026 GEO B3: câu hỏi là thẻ h3, nhìn như cũ */
.hoi .a{color:var(--chu-mem); font-size:15px; margin:0}
.lien-quan{border-top:1px solid var(--ke); padding-top:34px}
.lien-quan h2{font-size:22px; margin-bottom:18px}
.lien-quan .luoi{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){ .lien-quan .luoi{grid-template-columns:1fr} }

/* ---------- chân trang ---------- */
.chan{background:var(--toi); color:rgba(255,255,255,.7); padding:48px 0 36px; font-size:13.5px; line-height:1.8; margin-top:60px}
.chan .ten{font-family:var(--serif); font-size:20px; color:#fff; margin-bottom:4px}
.chan .ten em{font-style:italic; color:var(--cam)}
.chan b{color:#fff}
.chan a{color:rgba(255,255,255,.85); text-decoration:underline; text-underline-offset:3px}
.chan .luoi-chan{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
@media (max-width:760px){ .chan .luoi-chan{grid-template-columns:1fr; gap:20px} }
@media (max-width:480px){ .nav-trong{padding:0 14px; gap:8px} .nav-ten{font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis} .nav-lk{gap:8px; flex:none} .nav-lk .nut{padding:8px 12px; font-size:13px} }
/* 30/10/2026 — GEO B1: câu trả lời thẳng 40–60 chữ ở đầu bài, AI (Google AI Overview) hay cắt đúng đoạn này */
.bai-viet .tra-loi{font-size:17px; line-height:1.65; color:var(--chu); background:var(--nen-mem); border-left:3px solid var(--cam); padding:12px 16px; border-radius:0 10px 10px 0; margin:0 0 18px}
.bai-viet .tra-loi b{font-weight:700}
/* 30/10/2026 — GEO B4: ngày cập nhật hiện cho người đọc (AI ưu tiên bài có ngày) */
.bai-viet .meta .cap-nhat{color:var(--cam-chu); font-weight:600}