:root{--paper:#fbfaf7;--surface:#fff;--ink:#16181d;--ink2:#3d434e;--ink3:#6b7280;
--rule:#e2ded5;--rule2:#cdc7ba;--accent:#7d2231;--accent2:#5e1925;--wash:#f7eeee;
--serif:'Iowan Old Style',Palatino,Georgia,'Times New Roman',serif;
--sans:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--wrap:1140px}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans)}
.serif{font-family:var(--serif)}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;display:block}

/* ===== THANH DAU TRANG ===== */
.mast{background:var(--surface);border-bottom:1px solid var(--rule2)}
.mastbar{max-width:var(--wrap);margin:0 auto;padding:16px 22px 14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.side{display:flex;gap:18px;align-items:center;font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.side.r{justify-content:flex-end}
.side .hot{color:var(--accent)}
.brand{text-align:center;color:inherit}
.bname{display:block;font-family:var(--serif);font-size:1.72rem;font-weight:700;line-height:1.1}
.bname i{font-style:normal;color:var(--accent)}
.btag{display:block;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-top:4px}
.mbtn{border:1px solid var(--rule2);border-radius:4px;padding:6px 12px;display:inline-flex;gap:7px;align-items:center}

/* ===== DAI BAI MOI ===== */
.tick{background:var(--surface);border-bottom:1px solid var(--rule)}
.tickin{max-width:var(--wrap);margin:0 auto;padding:11px 22px;display:flex;gap:20px;align-items:baseline}
.tlab{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.titem{font-family:var(--serif);font-size:.97rem;flex:1;color:var(--ink)}
.tall{font-size:.78rem;font-weight:600;white-space:nowrap}

/* ===== BO CUC ===== */
.body{display:grid;grid-template-columns:1fr 320px;gap:46px;max-width:var(--wrap);margin:0 auto;padding:34px 22px 56px}
.ph{background:var(--rule);border:1px solid var(--rule2);display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:.72rem;letter-spacing:.04em}
.kick{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.meta{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cat{color:var(--accent);font-weight:700}
.dot{color:var(--rule2)}
.sum{color:var(--ink2);font-size:.95rem;margin-top:8px}
.rule2{border-top:2px solid var(--ink);margin:26px 0}
.ytmark{display:inline-flex;align-items:center;gap:5px;color:var(--ink3)}
.ytmark i{display:inline-flex;align-items:center;justify-content:center;width:17px;height:12px;background:var(--accent);border-radius:2px;color:#fff;font-size:.5rem;font-style:normal}
.item{display:grid;grid-template-columns:170px 1fr;gap:20px;margin-bottom:26px}
.item .ph{height:110px}
.item h2{font-family:var(--serif);font-size:1.28rem;line-height:1.3;margin:6px 0}

/* ===== COT PHU ===== */
.sb h3{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:7px;margin-bottom:14px}
.sbox{margin-bottom:32px}
.srch{display:flex;border:1px solid var(--rule2);border-radius:4px;overflow:hidden;background:var(--surface)}
.srch span{flex:1;padding:10px 12px;color:var(--ink3);font-size:.9rem}
.srch b{background:var(--accent);color:#fff;padding:10px 14px;font-weight:400}
.doss{border:1px solid var(--rule2);border-left:3px solid var(--accent);border-radius:0 4px 4px 0;padding:10px 13px;margin-bottom:8px;background:var(--surface);display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.doss b{font-family:var(--serif);font-size:.95rem;line-height:1.25}
.doss span{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.r1{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule)}
.r1:last-child{border-bottom:0}
.r1 .n{font-family:var(--serif);font-size:1.45rem;color:var(--rule2);width:22px;flex:none;line-height:1.15}
.r1 p{font-family:var(--serif);font-size:.94rem;line-height:1.3}
.r1 s{display:block;text-decoration:none;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);margin-top:4px}
.ico{border-radius:6px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.ico.fb{background:#1877F2}.ico.yt{background:#FF0000}
.bcard{border:1px solid var(--rule2);border-radius:5px;padding:14px;margin-bottom:10px}
.bcard.fb{background:#eef4fd;border-color:#c7ddfa}
.bcard.yt{background:#fdeeee;border-color:#f8cfcf}
.bhead{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.bhead b{font-size:.95rem}.bhead .ico{width:30px;height:30px;font-size:.88rem}
.bcard p{font-size:.83rem;color:var(--ink2);line-height:1.45}
.bcard s{display:block;text-decoration:none;font-size:.72rem;color:var(--ink3);margin-top:6px}
.btn{display:block;text-align:center;margin-top:11px;padding:9px;border-radius:4px;color:#fff;font-size:.83rem;font-weight:700}
.btn.fb{background:#1877F2}.btn.yt{background:#c8102e}

/* ===== BAI VIET ===== */
.art{max-width:var(--wrap);margin:0 auto;padding:32px 22px 20px}
.acol{max-width:700px;margin:0 auto}
.crumb{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.crumb a{font-weight:700}
.art h1{font-family:var(--serif);font-size:2.35rem;line-height:1.14;letter-spacing:-.012em;margin:11px 0 14px}
.dek{font-family:var(--serif);font-size:1.18rem;line-height:1.5;color:var(--ink2);margin-bottom:18px}
.ameta{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);display:flex;gap:16px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--rule2)}
.ameta b{color:var(--ink2)}
.ytbox{border:1px solid var(--rule2);border-left:3px solid var(--accent);background:var(--surface);border-radius:0 5px 5px 0;padding:14px 16px;display:flex;gap:15px;align-items:center;margin:20px 0}
.ytbox .ph{width:132px;height:74px;flex:none;position:relative}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:26px;background:var(--accent);border-radius:5px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem}
.ytbox b{display:block;font-size:.71rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.ytbox p{font-family:var(--serif);font-size:1.05rem;margin-top:3px}
.ytbox s{display:block;text-decoration:none;font-size:.78rem;color:var(--ink3);margin-top:3px}
figure{margin:26px 0}
figure .ph{height:300px}
figcaption{font-size:.82rem;color:var(--ink3);margin-top:8px}
.abody p{margin:0 0 1.2em;font-size:1.06rem;line-height:1.78}
.abody h2{font-family:var(--serif);font-size:1.5rem;margin:1.9em 0 .55em}
.abody ul{margin:0 0 1.3em;padding-left:1.4em}
.abody li{margin-bottom:.5em;font-size:1.04rem}
blockquote{margin:1.7em 0;padding:3px 0 3px 22px;border-left:3px solid var(--accent)}
blockquote p{font-family:var(--serif);font-size:1.14rem;font-style:italic;color:var(--ink2);margin:0}
.srcbox{background:var(--wash);border-left:3px solid var(--accent);border-radius:0 4px 4px 0;padding:17px 19px;margin:36px 0 0}
.srcbox h4{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.srcbox p{font-size:.93rem;color:var(--ink2);margin-bottom:7px}
.srcbox .fine{font-size:.85rem;color:var(--ink3)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.tag{background:var(--surface);border:1px solid var(--rule2);border-radius:999px;padding:5px 13px;font-size:.8rem;color:var(--ink2)}
.share{display:flex;gap:12px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.share .b{border:1px solid var(--rule2);border-radius:4px;padding:6px 12px;color:var(--ink2)}
.endblk{border:1px solid var(--rule2);border-top:3px solid var(--accent);border-radius:5px;background:var(--surface);padding:15px 17px;margin-top:28px}
.endblk h4{font-family:var(--serif);font-size:1.05rem;margin-bottom:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ecard{display:flex;align-items:center;gap:11px;border:1px solid var(--rule2);border-radius:5px;padding:10px 12px}
.ecard.fb{background:#eef4fd;border-color:#c7ddfa}
.ecard.yt{background:#fdeeee;border-color:#f8cfcf}
.ecard .ico{width:30px;height:30px;font-size:.85rem}
.ecard b{display:block;font-size:.9rem;line-height:1.2}
.ecard em{display:block;font-style:normal;font-size:.79rem;color:var(--ink2);margin-top:2px;line-height:1.3}
.ecard s{display:block;text-decoration:none;font-size:.71rem;color:var(--ink3);margin-top:1px}
.ecard .b{margin-left:auto;border-radius:4px;color:#fff;font-weight:700;padding:7px 13px;font-size:.78rem;white-space:nowrap}
.ecard .b.fb{background:#1877F2}.ecard .b.yt{background:#c8102e}
.rel{border-top:2px solid var(--ink);margin-top:36px;padding-top:22px}
.rel h3{font-family:var(--serif);font-size:1.25rem;margin-bottom:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card .ph{height:100px;margin-bottom:8px}
.card .m{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.card .m b{color:var(--accent)}
.card h4{font-family:var(--serif);font-size:.98rem;line-height:1.3;margin-top:4px}

/* ===== CHAN TRANG (5 cot) ===== */
.ft{background:var(--surface);border-top:3px solid var(--ink);margin-top:20px}
.ftin{max-width:var(--wrap);margin:0 auto;padding:34px 22px 22px}
.g5{display:grid;grid-template-columns:1.35fr .95fr .95fr .95fr 1.15fr;gap:26px}
.fbrand{font-family:var(--serif);font-size:1.3rem;font-weight:700}
.fbrand i{font-style:normal;color:var(--accent)}
.fdesc{font-size:.85rem;color:var(--ink3);margin-top:8px;line-height:1.55}
.fh{font-size:.69rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.fl{list-style:none}.fl li{margin-bottom:8px}
.fl a{font-size:.87rem;color:var(--ink2)}
.fl s{text-decoration:none;color:#9aa1ab;font-size:.72rem;margin-left:5px}
.soc{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.srow{display:flex;align-items:center;gap:9px;border:1px solid var(--rule2);border-radius:5px;padding:7px 9px}
.srow.fb{background:#eef4fd;border-color:#c7ddfa}
.srow.yt{background:#fdeeee;border-color:#f8cfcf}
.srow .ico{width:24px;height:24px;font-size:.7rem}
.srow b{font-size:.82rem}
.srow s{display:block;text-decoration:none;font-size:.66rem;color:var(--ink3)}
.srow .b{margin-left:auto;border-radius:4px;color:#fff;font-size:.7rem;font-weight:700;padding:4px 9px;white-space:nowrap}
.srow .b.fb{background:#1877F2}.srow .b.yt{background:#c8102e}
.mail{display:flex;border:1px solid var(--rule2);border-radius:4px;overflow:hidden;margin-top:5px}
.mail span{flex:1;padding:7px 9px;color:var(--ink3);font-size:.79rem}
.mail b{background:var(--accent);color:#fff;padding:7px 11px;font-size:.76rem}
.legal{border-top:1px solid var(--rule);margin-top:26px;padding-top:18px}
.legal p{font-size:.79rem;color:var(--ink3);line-height:1.6;margin-bottom:8px}
.legal b{color:var(--ink2)}
.bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;margin-top:12px;font-size:.78rem;color:var(--ink3)}
.bot .mini{display:flex;gap:15px;flex-wrap:wrap}
.bot .mini a{color:var(--ink3)}
.top{border:1px solid var(--rule2);border-radius:4px;padding:6px 11px;color:var(--ink2);font-size:.75rem}

/* ===== BANG MENU ===== */
.panel{position:fixed;inset:0;background:var(--wash);z-index:60;overflow:auto}
.panelin{max-width:var(--wrap);margin:0 auto;padding:74px 22px 60px}
.mclose{position:fixed;top:16px;right:20px;width:42px;height:42px;border:1px solid var(--rule2);background:var(--surface);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--ink);z-index:70}
.msearch{position:relative;margin-bottom:42px}
.msearch input{width:100%;font:inherit;font-size:1.05rem;padding:15px 18px 15px 50px;background:var(--surface);border:1px solid var(--rule2);border-radius:4px}
.msearch .mi{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink3)}
.pcols{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px}
.pblock{margin-bottom:38px}
.phead{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--accent);margin-bottom:14px}
.mlinks{list-style:none}.mlinks li{margin-bottom:4px}
.mlinks a{display:block;font-family:var(--serif);font-size:1.28rem;color:var(--ink);padding:4px 0}
.mlinks.big a{font-size:1.72rem}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dcard{display:flex;flex-direction:column;justify-content:flex-end;min-height:116px;padding:14px 16px;background:var(--surface);border:1px solid var(--rule2);border-top:3px solid var(--accent);border-radius:4px;color:var(--ink)}
.dcard b{font-family:var(--serif);font-size:1.05rem;line-height:1.28}
.dcard span{margin-top:8px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.tcols{list-style:none;columns:2;column-gap:32px}
.tcols li{break-inside:avoid;margin-bottom:7px}
.tcols a{display:flex;justify-content:space-between;gap:10px;font-size:.94rem;color:var(--ink2)}
.tcols s{text-decoration:none;font-size:.74rem;color:var(--ink3)}

/* ===== DIEN THOAI ===== */
@media(max-width:700px){
 body{font-size:16px}
 .mastbar{grid-template-columns:1fr auto;padding:12px 16px 10px;gap:10px}
 .side:not(.r){display:none}
 .brand{text-align:left}.bname{font-size:1.24rem;white-space:nowrap}.btag{display:none}
 .side.r{gap:10px}.side.r span{font-size:.72rem;white-space:nowrap}
 .mbtn{padding:5px 10px}
 .tickin{padding:9px 16px;gap:12px}.tall{display:none}
 .titem{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .body{grid-template-columns:1fr;gap:0;padding:22px 16px 40px}
 .item{grid-template-columns:110px 1fr;gap:14px;margin-bottom:20px}
 .item .ph{height:74px}
 .item h2{font-size:1.06rem}
 .art{padding:22px 16px 16px}
 .art h1{font-size:1.62rem}.dek{font-size:1.04rem}
 .ytbox{flex-direction:column;align-items:stretch;gap:11px}
 .ytbox .ph{width:100%;height:150px}
 figure .ph{height:190px}
 .abody p{font-size:1.02rem}.abody h2{font-size:1.28rem}
 .two{grid-template-columns:1fr}
 .grid3{grid-template-columns:1fr;gap:18px}
 .card .ph{height:160px}
 .g5{grid-template-columns:1fr 1fr;gap:22px}
 .g5>div:first-child,.g5>div:last-child{grid-column:1/-1}
 .ftin{padding:26px 16px 18px}
 .bot{flex-direction:column;align-items:flex-start;gap:9px}
 .pcols{grid-template-columns:1fr;gap:30px}
 .dgrid{grid-template-columns:1fr}
 .tcols{columns:1}
 .panelin{padding:66px 16px 50px}
 .mlinks.big a{font-size:1.42rem}.mlinks a{font-size:1.14rem}
}

/* --- Dien thoai: dao thu tu khoi trong trang chu ---
   bai noi bat -> tim kiem -> chu de noi bat -> danh sach bai -> doc nhieu -> theo doi */
@media(max-width:700px){
 .body .main,.body .sb{display:contents}
 .body .feat{order:1;margin-bottom:22px}
 .body .sb-search{order:2;margin-bottom:26px}
 .body .sb-doss{order:3;margin-bottom:26px}
 .body .list{order:4;border-top:2px solid var(--ink);padding-top:22px;margin:0 0 22px}
 .body .xemtiep{order:5;margin:0 0 26px;border-top:0;padding-top:0}
 .body .sb-most{order:6;margin-bottom:28px}
 .body .sb-follow{order:7;margin-bottom:8px}
 /* Các phần của trang danh sách cũng cần thứ tự rõ ràng khi display:contents */
 .body .chead{order:0}
 .body .csub{order:3.5}
 .body .cpager{order:8;margin-bottom:8px}
 .body .trong{order:4}
}

/* Hàng liên kết phụ ở đáy bảng menu */
.pfoot{border-top:1px solid var(--rule2);margin-top:14px;padding-top:18px;display:flex;gap:24px;flex-wrap:wrap}
.pfoot a{font-size:.88rem;color:var(--ink2)}
@media(max-width:700px){.pfoot{gap:16px;margin-top:6px}}

/* --- Bảng menu rút gọn riêng cho điện thoại ---
   Bỏ hai danh sách thẻ dài, vì "Chủ đề" và "Khu vực" đã có sẵn ở nhóm lớn phía trên.
   Chủ đề nổi bật thu thành hàng ngang một dòng như ở cột phụ. */
@media(max-width:700px){
 .panel .tcols{display:none}
 .panel .pblock:has(.tcols) .phead{display:none}
 .panel .pblock:has(.tcols){margin-bottom:0}
 .panel .dgrid{gap:8px}
 .panel .dcard{min-height:0;flex-direction:row;justify-content:space-between;align-items:baseline;gap:10px;
   border-top:1px solid var(--rule2);border-left:3px solid var(--accent);border-radius:0 4px 4px 0;padding:10px 13px}
 .panel .dcard b{font-size:.95rem}
 .panel .dcard span{margin-top:0;white-space:nowrap;font-size:.68rem}
 .panel .pblock{margin-bottom:26px}
}

/* Danh sách chủ đề lớn ở cột trái bảng menu */
.topics a{font-size:1rem;padding:3px 0}
@media(max-width:700px){
 /* trên điện thoại vẫn giữ danh sách chủ đề vì đây là lối tìm chính,
    chỉ ẩn danh sách khu vực dài ở cột phải */
 .panel .topics{display:block!important;columns:1}
 .panel .pblock:has(.topics) .phead{display:block!important}
 .panel .pblock:has(.topics){margin-bottom:26px!important}
}

/* ===== Bảng menu trên điện thoại: theo mẫu Foreign Affairs ===== */
.pbar,.putil{display:none}
@media(max-width:700px){
 /* thanh đầu bảng menu: Đăng ký trái — logo giữa — Đóng phải */
 .pbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
   padding-bottom:22px;border-bottom:0}
 .pbar-l{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
 .pbar-c{font-family:var(--serif);font-size:1.12rem;font-weight:700;text-align:center;color:var(--ink);line-height:1.15}
 .pbar-c i{font-style:normal;color:var(--accent)}
 .pbar-r{justify-self:end;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}

 /* lưới liên kết phụ hai cột, chữ nhỏ */
 .putil{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;
   padding:6px 0 26px;text-align:center}
 .putil a{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}

 /* nút X nổi và hàng liên kết đáy không cần nữa */
 .mclose{display:none}
 .pfoot{display:none}

 .panelin{padding:18px 18px 44px}
 .msearch{margin-bottom:34px}
}

/* Lưới ba chuyên đề trên một hàng (phương án 1) */
@media(max-width:700px){
 .putil-3{grid-template-columns:repeat(3,1fr);gap:10px}
 .putil-3 a{font-size:.72rem;letter-spacing:.04em;border:1px solid var(--rule2);
   border-left:3px solid var(--accent);border-radius:0 4px 4px 0;background:var(--surface);
   padding:9px 8px;text-align:center;color:var(--ink)}
 /* bỏ khối thẻ chuyên đề phía dưới để không trùng */
 .panel .pblock:has(.dgrid){display:none}
 .pfoot{display:flex!important;border-top:1px solid var(--rule2);margin-top:20px;padding-top:20px;
   gap:14px 20px;flex-wrap:wrap;justify-content:center}
 .pfoot a{font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
}

/* ===== Khối Chủ đề nổi bật ở đầu bảng menu (điện thoại) ===== */
.topblk{display:none}
@media(max-width:700px){
 .topblk{display:block;margin:2px 0 26px}
 .tlabel{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--accent);margin-bottom:11px}
 .tgrid a{display:block;color:var(--ink);background:var(--surface);
   border:1px solid var(--rule2);border-left:3px solid var(--accent);border-radius:0 4px 4px 0}

 /* A — ba thẻ ngang, tên rút gọn */
 .tgrid.a3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
 .tgrid.a3 a{padding:10px 9px;text-align:center}
 .tgrid.a3 b{display:block;font-family:var(--serif);font-size:.9rem;line-height:1.25}
 .tgrid.a3 s{display:block;text-decoration:none;font-size:.68rem;color:var(--ink3);margin-top:4px}

 /* B — ba hàng dọc, tên đầy đủ */
 .tgrid.brow a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
   padding:10px 13px;margin-bottom:8px}
 .tgrid.brow b{font-family:var(--serif);font-size:.95rem;line-height:1.25}
 .tgrid.brow s{text-decoration:none;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;
   color:var(--ink3);white-space:nowrap}

 /* C — ba thẻ vuông, tên xuống dòng */
 .tgrid.ccard{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
 .tgrid.ccard a{padding:12px 9px;text-align:center}
 .tgrid.ccard b{display:block;font-family:var(--serif);font-size:1rem;line-height:1.2}
 .tgrid.ccard s{display:block;text-decoration:none;font-size:.66rem;letter-spacing:.05em;
   text-transform:uppercase;color:var(--ink3);margin-top:6px}
}

/* ===== Khối giới thiệu ở cuối bảng menu (theo mẫu Foreign Affairs) ===== */
.pabout{display:none}
@media(max-width:700px){
 .pabout{display:block;border-top:1px solid var(--rule2);margin-top:34px;padding-top:26px}
 .pabout-txt{font-family:var(--serif);font-size:1.14rem;line-height:1.55;color:var(--ink);margin-bottom:20px}
 .pabout-more{display:inline-block;font-family:var(--serif);font-size:1.18rem;color:var(--ink);
   border-bottom:1px solid var(--ink);padding-bottom:3px}
 .pabout-lab{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--accent);margin:26px 0 0}
 .pabout-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;
   border-top:1px solid var(--rule2);margin-top:18px;padding-top:20px}
 .pabout-grid a{display:block;font-size:.92rem;color:var(--ink2);margin-bottom:11px}
}

/* ===== TRANG TÌM KIẾM ===== */
.srchpage{max-width:var(--wrap);margin:0 auto;padding:30px 22px 60px}
.slabel{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--accent);margin-bottom:10px}
.sbig{display:flex;align-items:center;gap:14px;border:1px solid var(--ink2);border-radius:3px;
  background:var(--surface);padding:15px 18px;margin-bottom:26px}
.sbig .mi{color:var(--ink3);font-size:1.05rem}
.sbig span.q{font-size:1.15rem;color:var(--ink)}
.sbig span.ph{background:none;border:0;color:var(--ink3);font-size:1.15rem;justify-content:flex-start}
.sgrid{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
.sbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--rule2)}
.scount{font-size:.95rem;color:var(--ink2)}
.ssort{border:1px solid var(--rule2);border-radius:3px;padding:9px 14px;font-size:.86rem;
  display:inline-flex;gap:22px;align-items:center;color:var(--ink)}
.ssort i{font-style:normal;color:var(--accent)}
.sres{display:grid;grid-template-columns:1fr 190px;gap:24px;padding:22px 0;border-bottom:1px solid var(--rule)}
.sres h3{font-family:var(--serif);font-size:1.3rem;line-height:1.25;margin-bottom:5px}
.sres .dek2{font-family:var(--serif);font-size:1rem;color:var(--ink3);line-height:1.35;margin-bottom:12px}
.sres .who{font-size:.88rem;font-weight:700;color:var(--ink);margin-bottom:4px}
.sres .when{font-size:.86rem;color:var(--ink2)}
.sres .ph{height:112px}
.sres .ytm{display:inline-flex;align-items:center;gap:5px;color:var(--ink3);font-size:.76rem;margin-top:8px}
.sres .ytm i{display:inline-flex;align-items:center;justify-content:center;width:17px;height:12px;
  background:var(--accent);border-radius:2px;color:#fff;font-size:.5rem;font-style:normal}
.fbox h4{font-size:.95rem;font-weight:700;margin-bottom:12px}
.fsel{border:1px solid var(--ink2);border-radius:3px;padding:11px 14px;margin-bottom:11px;
  display:flex;justify-content:space-between;align-items:center;font-size:.92rem;background:var(--surface)}
.fsel i{font-style:normal;color:var(--accent)}
.fdate{font-size:.92rem;font-weight:700;margin:18px 0 9px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fbtn{border:1px solid var(--rule2);border-radius:3px;padding:9px 13px;font-size:.86rem;color:var(--ink2);
  display:flex;justify-content:space-between;background:var(--surface)}
.fclear{margin-top:16px;font-size:.86rem}
.spager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;font-size:.9rem}
.spager .pg{border:1px solid var(--rule2);border-radius:3px;padding:8px 14px;color:var(--ink2)}
.fmobile{display:none}
@media(max-width:700px){
 .srchpage{padding:22px 16px 44px}
 .sbig{padding:12px 14px;margin-bottom:18px}
 .sbig span.q,.sbig span.ph{font-size:1rem}
 .sgrid{grid-template-columns:1fr;gap:0}
 .fbox{display:none}
 .fmobile{display:flex;gap:10px;margin-bottom:16px}
 .fmobile span{flex:1;border:1px solid var(--ink2);border-radius:3px;padding:10px 13px;font-size:.88rem;
   display:flex;justify-content:space-between;background:var(--surface)}
 .fmobile i{font-style:normal;color:var(--accent)}
 .sbar{flex-wrap:wrap;gap:10px}
 .ssort{padding:7px 11px;font-size:.8rem;gap:14px}
 .sres{grid-template-columns:1fr 110px;gap:14px;padding:18px 0}
 .sres h3{font-size:1.08rem}
 .sres .dek2{font-size:.92rem;margin-bottom:8px}
 .sres .ph{height:72px}
}

/* ===== Khối thảo luận trên Facebook (cuối bài viết) ===== */
.disc{border:1px solid #c7ddfa;background:#eef4fd;border-radius:5px;padding:16px 18px;margin-top:26px}
.disc-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.disc .ico{width:38px;height:38px;border-radius:8px;flex:none;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:700;font-size:1.05rem;background:#1877F2}
.disc .t{flex:1;min-width:220px}
.disc h4{font-family:var(--serif);font-size:1.12rem;margin-bottom:3px}
.disc p{font-size:.87rem;color:var(--ink2)}
.disc .btn2{background:#1877F2;color:#fff;border-radius:4px;padding:10px 18px;font-size:.85rem;
  font-weight:700;white-space:nowrap}
.disc-q{font-family:var(--serif);font-size:1.16rem;line-height:1.45;color:var(--ink);
  border-left:3px solid #1877F2;padding-left:15px;margin-bottom:15px}
.disc-note{font-size:.8rem;color:var(--ink3);margin-top:11px}
.pabout-sub{font-size:.82rem;color:#6b7280;margin-top:7px;line-height:1.5}

/* ================= TRANG CHUYÊN MỤC / KHU VỰC / CHỦ ĐỀ ================= */
.chead{background:var(--surface);border-bottom:1px solid var(--rule2)}
.cheadin{max-width:var(--wrap);margin:0 auto;padding:26px 22px 0}
.ccrumb{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.ccrumb a{color:var(--ink3)}
.ccrumb b{color:var(--accent)}
.ctitle{font-family:var(--serif);font-size:2.5rem;line-height:1.1;margin:9px 0 0}
.cdesc{font-family:var(--serif);font-size:1.1rem;line-height:1.5;color:var(--ink2);max-width:640px;margin-top:10px}
.ccount{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-top:12px}
.ctabs{display:flex;gap:26px;overflow-x:auto;margin-top:20px;border-top:1px solid var(--rule);padding-top:2px}
.ctabs a{white-space:nowrap;font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--ink2);
  padding:13px 0 12px;border-bottom:2px solid transparent}
.ctabs a.on{color:var(--accent);border-bottom-color:var(--accent)}
.clead{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:center;
  border-bottom:2px solid var(--ink);padding-bottom:26px;margin-bottom:26px}
.clead .ph{height:230px}
.clead h2{font-family:var(--serif);font-size:1.85rem;line-height:1.18;margin:8px 0 9px}
.csub{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:14px}
.cpager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:34px;
  padding-top:22px;border-top:1px solid var(--rule2)}
.cpager span{border:1px solid var(--rule2);border-radius:3px;padding:8px 14px;font-size:.88rem;
  color:var(--ink2);background:var(--surface)}
.cpager span.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.cpager span.gap{border:0;background:none;padding:8px 4px;color:var(--ink3)}
.crelcat{border:1px solid var(--rule2);border-top:3px solid var(--accent);background:var(--surface);
  border-radius:4px;padding:14px 16px}
.crelcat h3{border:0;padding:0;margin-bottom:10px}
.crelcat a{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;color:var(--ink2);
  padding:7px 0;border-bottom:1px solid var(--rule)}
.crelcat a:last-child{border-bottom:0}
.crelcat s{text-decoration:none;font-size:.72rem;color:var(--ink3)}
.crss{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule2);border-radius:3px;
  padding:7px 12px;font-size:.78rem;color:var(--ink2);background:var(--surface);margin-top:14px}
@media(max-width:700px){
 .cheadin{padding:18px 16px 0}
 .ctitle{font-size:1.72rem}
 .cdesc{font-size:.98rem}
 .ctabs{gap:18px;margin-top:14px}
 .ctabs a{font-size:.78rem;padding:11px 0 10px}
 .clead{grid-template-columns:1fr;gap:12px;padding-bottom:20px;margin-bottom:20px}
 .clead .ph{height:180px}
 .clead h2{font-size:1.35rem}
 .cpager span{padding:7px 11px;font-size:.82rem}
 /* thứ tự trên điện thoại: bài đầu -> tìm kiếm -> danh sách -> đọc nhiều -> mục khác -> theo dõi */
 .body .main,.body .sb{display:contents}
 .body .clead{order:1}
 .body .sb-search{order:2;margin-bottom:26px}
 .body .csub{order:3;margin-bottom:12px}
 .body .list{order:4}
 .body .cpager{order:5;margin:4px 0 30px}
 .body .sb-most{order:6}
 .body .sb-rel{order:7}
 .body .sb-follow{order:8}
}

/* Lượt xem: biểu tượng mắt + con số */
.vw{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--ink3);
  letter-spacing:0;text-transform:none}
.vw svg{width:14px;height:14px;flex:none;display:block}
.r1 s .vw{margin:0}

/* ---------- Trang chữ (giới thiệu, liên hệ, bản quyền, riêng tư) ---------- */
.phead{border-bottom:1px solid var(--rule);background:#fff}
.pheadin{max-width:1200px;margin:0 auto;padding:34px 40px 26px}
.pcrumb{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:700}
.ptitle{font-family:var(--serif);font-size:2.5rem;line-height:1.12;margin:10px 0 0;letter-spacing:-.01em}
.plead{font-size:1.06rem;line-height:1.6;color:var(--ink2);margin:12px 0 0;max-width:640px}
.pwrap{max-width:1200px;margin:0 auto;padding:34px 40px 56px;display:grid;
  grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:start}
.prose{max-width:660px}
.prose h2{font-family:var(--serif);font-size:1.42rem;line-height:1.25;margin:34px 0 10px;letter-spacing:-.005em}
.prose h2:first-child{margin-top:0}
.prose p{font-size:1.005rem;line-height:1.72;color:var(--ink2);margin:0 0 14px}
.prose ul{margin:0 0 16px;padding-left:20px}
.prose li{font-size:1.005rem;line-height:1.66;color:var(--ink2);margin-bottom:7px}
.prose b{color:var(--ink)}
.prose a.lnk{color:var(--accent);border-bottom:1px solid rgba(125,34,49,.35)}
.note{border-left:3px solid var(--accent);background:#fbf7f7;padding:14px 18px;margin:20px 0}
.note p{margin:0;font-size:.95rem;color:var(--ink2)}
.kv{border-top:1px solid var(--rule);padding:13px 0;display:grid;
  grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:baseline}
.kv:last-child{border-bottom:1px solid var(--rule)}
.kv b{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.kv span{font-size:.98rem;color:var(--ink2)}
.kv a{color:var(--accent)}
.psb .sbox{margin-bottom:26px}
.pcard{border:1px solid var(--rule);padding:16px 18px;background:#fff}
.pcard h4{font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);margin:0 0 9px;font-weight:700}
.pcard p{font-size:.9rem;line-height:1.6;color:var(--ink2);margin:0 0 10px}
.pcard .go{font-size:.88rem;color:var(--accent);font-weight:600}

/* ---------- Trang 404 ---------- */
.e404{max-width:640px;margin:0 auto;padding:88px 40px 96px;text-align:center}
.enum{font-family:var(--serif);font-size:5.4rem;line-height:1;color:var(--accent);letter-spacing:-.02em}
.e404 h1{font-family:var(--serif);font-size:2rem;margin:14px 0 10px;letter-spacing:-.01em}
.e404 p{font-size:1.02rem;line-height:1.65;color:var(--ink2);margin:0 0 22px}
.esearch{display:flex;border:1px solid var(--ink);margin:0 0 26px}
.esearch span{flex:1;text-align:left;padding:12px 14px;color:var(--ink3);font-size:.95rem}
.esearch b{background:var(--accent);color:#fff;padding:12px 20px;font-size:.95rem}
.elinks{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.elinks a{border:1px solid var(--rule);padding:9px 15px;font-size:.9rem;color:var(--ink2);background:#fff}

/* ---------- Trang đọc nhiều ---------- */
.mtabs{display:flex;gap:26px;margin-top:18px;border-top:1px solid var(--rule);padding-top:14px}
.mtabs a{font-size:.9rem;color:var(--ink3);padding-bottom:10px}
.mtabs a.on{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--accent)}
.mrow{display:grid;grid-template-columns:64px 190px minmax(0,1fr);gap:22px;
  padding:20px 0;border-bottom:1px solid var(--rule);align-items:start}
.mrank{font-family:var(--serif);font-size:2.3rem;line-height:1;color:#c9c3ba}
.mrow:nth-child(-n+3) .mrank{color:var(--accent)}
.mrow .ph{height:110px;margin:0}
.mrow h3{font-family:var(--serif);font-size:1.24rem;line-height:1.3;margin:6px 0 6px}
.mrow p{font-size:.93rem;line-height:1.6;color:var(--ink2);margin:0}

@media(max-width:860px){
  .pheadin,.pwrap{padding-left:18px;padding-right:18px}
  .pwrap{grid-template-columns:1fr;gap:34px}
  .ptitle{font-size:1.85rem}
  .kv{grid-template-columns:1fr;gap:4px}
  .e404{padding:56px 18px 64px}
  .enum{font-size:4rem}
  .mrow{grid-template-columns:40px minmax(0,1fr);gap:14px}
  .mrow .ph{display:none}
  .mrank{font-size:1.7rem}
}

/* ---------- Trang tổng "Về chúng tôi" (phương án B) ---------- */
.hubgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:820px}
.hubcard{border:1px solid var(--rule);background:#fff;padding:22px 24px 20px}
.hubcard h3{font-family:var(--serif);font-size:1.3rem;line-height:1.25;margin:0 0 8px}
.hubcard p{font-size:.93rem;line-height:1.6;color:var(--ink2);margin:0 0 12px}
.hubcard .go{font-size:.88rem;color:var(--accent);font-weight:600}
@media(max-width:860px){.hubgrid{grid-template-columns:1fr}}

/* ================= BỔ SUNG CHO TRANG THẬT ================= */
/* Những phần dưới đây không có trong bản mô phỏng vì bản mô phỏng
   là ảnh tĩnh, không có bàn phím, không có người dùng trình đọc màn hình. */

/* Đường dẫn bỏ qua, cho người dùng bàn phím và trình đọc màn hình */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:10px 16px;z-index:200}
.skip:focus{left:0}

/* Viền tiêu điểm khi đi bằng phím Tab */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* Bảng menu: ẩn cho tới khi bấm mở */
.panel[hidden]{display:none}
body.menu-mo{overflow:hidden}

/* Nút thật thay cho chữ giả trong bản mô phỏng */
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mbtn,.mclose{cursor:pointer}

/* Ô tìm kiếm thật */
input[type=search],input[type=text],input[type=email]{
  font:inherit;color:inherit;background:transparent;border:0;width:100%}
input::placeholder{color:var(--ink3)}
.srch{cursor:text}
.srch form{display:flex;width:100%;align-items:center}

/* Ảnh bài viết: giữ đúng khung, không méo */
.card__anh,.item .anh,.clead .anh{aspect-ratio:3/2;object-fit:cover;width:100%;
  background:var(--rule);display:block}
.mrow .anh{aspect-ratio:3/2;object-fit:cover;width:100%;background:var(--rule)}

/* Đánh dấu từ khoá trong kết quả tìm kiếm */
mark{background:#fbecc0;color:inherit;padding:0 2px}

/* Hộp nguồn tham khảo cuối bài */
.nguon{border-top:2px solid var(--ink);margin-top:38px;padding-top:18px}
.nguon h2{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:11px;font-family:var(--sans);font-weight:700}
.nguon ol{padding-left:20px;margin:0}
.nguon li{font-size:.9rem;line-height:1.6;color:var(--ink2);margin-bottom:7px}
.nguon .luuy{font-size:.85rem;color:var(--ink3);margin-top:14px;line-height:1.6}

/* Ghi chú đính chính */
.dinhchinh{background:var(--wash);border-left:3px solid var(--accent);
  padding:12px 16px;margin:20px 0;font-size:.92rem;color:var(--ink2)}
.dinhchinh b{color:var(--ink)}

/* Chia trang: thẻ a thật thay cho span giả */
.cpager a{border:1px solid var(--rule2);padding:8px 14px;color:var(--ink2);background:#fff}
.cpager a.on,.cpager span.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Khi in ra giấy */
@media print{
  .mast,.tick,.panel,.ft,.sb,.cpager,.mbtn{display:none!important}
  body{background:#fff;font-size:12pt}
  .article__body a:after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* Người dùng đã tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---- Nhãn chỉ dành cho trình đọc màn hình ----
   Thiếu lớp này thì nhãn "Tìm kiếm", "Email của bạn" hiện ra giữa trang. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Tiêu đề bài giữ màu chữ, không nhuộm đỏ như đường dẫn thường ---- */
.item h2 a,.feat__title a,.mrow h3 a,.card__title a,.related h2 a{color:var(--ink)}
.item h2 a:hover,.feat__title a:hover,.mrow h3 a:hover{color:var(--accent)}

/* ---- Ô ảnh của bài nổi bật phải cao bằng ảnh thật ---- */
.feat .ph{height:300px;margin-bottom:16px;display:flex;align-items:center;
  justify-content:center}
.feat__anh{margin-bottom:16px}
.item .ph{aspect-ratio:3/2;height:auto;display:flex;align-items:center;justify-content:center}
.mrow .ph{aspect-ratio:3/2;height:auto;display:flex;align-items:center;justify-content:center}

/* ---- Ô tìm kiếm ở cột phụ và chân trang ---- */
.srch{display:flex;align-items:center}
.srch input{flex:1;padding:0}
.srch button{padding:0 4px;font-size:1rem;line-height:1}
.mail{display:flex;align-items:center}
.mail input{flex:1;min-width:0}

/* ---- Đường dẫn xem tiếp ở cuối trang chủ ---- */
.xemtiep{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)}
.xemtiep a{font-weight:600}

/* ---- Khi một mục chưa có bài nào ---- */
.trong{padding:34px 0;color:var(--ink3);font-size:1rem}
.ghichu{font-size:.86rem;color:var(--ink3);margin-top:20px;line-height:1.6}
.cpager span.mo{opacity:.4;padding:8px 14px;border:1px solid var(--rule);color:var(--ink3)}

/* ---- Thẻ chủ đề ở cuối bài viết ---- */
.atags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 4px}
.atags a{border:1px solid var(--rule2);background:var(--surface);padding:6px 13px;
  font-size:.85rem;color:var(--ink2);border-radius:3px}
.atags a:hover{border-color:var(--accent);color:var(--accent)}

/* ---- Ô tìm kiếm lớn ở trang Tìm kiếm và trang Đăng ký ---- */
.bigsearch{display:flex;border:1.5px solid var(--ink);background:var(--surface);
  max-width:640px;margin-top:18px}
.bigsearch input{flex:1;min-width:0;padding:14px 16px;font-size:1.02rem;
  background:transparent;border:0;color:var(--ink)}
.bigsearch input::placeholder{color:var(--ink3)}
.bigsearch button{background:var(--accent);color:#fff;border:0;padding:14px 26px;
  font-size:.95rem;font-weight:600;letter-spacing:.02em;cursor:pointer;white-space:nowrap}
.bigsearch button:hover{background:var(--accent2)}
.searchhint{font-size:.88rem;color:var(--ink3);margin-top:10px;line-height:1.6}
.searchhint b{color:var(--ink2);font-weight:600}
.sstatus{font-size:.92rem;color:var(--ink2);margin-bottom:18px;padding-bottom:14px;
  border-bottom:1px solid var(--rule);min-height:1.4em}
.sstatus:empty{border-bottom:0;padding:0;margin:0;min-height:0}

@media(max-width:700px){
  .bigsearch input{padding:12px 13px;font-size:.98rem}
  .bigsearch button{padding:12px 18px;font-size:.9rem}
}