:root{
  --giay:#0E1418; --giay2:#141C21; --muc:#E9F0F2; --muc2:#8FA0A6;
  --ke:#1B262C; --ke-dam:#2A3841; --daquang:#57E0B8;
  --xanh:#57E0B8; --xanh-dam:#8CF0D2;
  --o:26px;
  --sans:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Literata",Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--giay);color:var(--muc);font-family:var(--serif);
  font-size:18px;line-height:1.72;font-optical-sizing:auto;
  background-image:linear-gradient(var(--ke) 1px,transparent 1px),linear-gradient(90deg,var(--ke) 1px,transparent 1px);
  background-size:var(--o) var(--o);background-position:-1px -1px}
img{max-width:100%;height:auto;display:block}
a{color:var(--xanh);text-decoration:none;border-bottom:1px solid rgba(15,107,79,.28)}
a:hover{border-bottom-color:var(--xanh)}
:focus-visible{outline:3px solid var(--muc);outline-offset:2px}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 22px}
.sans{font-family:var(--sans)}

/* ── Thanh trên ── */
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:2px solid var(--muc)}
header .wrap{display:flex;align-items:center;gap:18px;min-height:62px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.logo{display:flex;align-items:center;gap:10px;border:0;flex:0 0 auto;color:var(--muc)}
.logo .mark{width:34px;height:34px;flex:0 0 auto}
.logo .ten{font-family:var(--sans);font-weight:800;font-size:15px;letter-spacing:-.2px;line-height:1.1}
.logo .kh{font-family:var(--sans);font-size:10.5px;color:var(--muc2);letter-spacing:.14em;font-weight:500}
nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
nav a,header .logo .ten,header .logo .kh{color:var(--muc)}
nav a{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--muc);
  padding:7px 10px;border:0;border-radius:3px}
nav a:hover{background:var(--giay2)}
nav a.dang-o{background:var(--daquang)}

/* ── Hero: bảng sổ tay ── */
.hero{border-bottom:2px solid var(--muc);background:var(--giay)}
.hero .wrap{display:grid;grid-template-columns:1.32fr .98fr;gap:44px;align-items:center;
  padding-top:46px;padding-bottom:46px}
h1{font-family:var(--sans);font-weight:800;letter-spacing:-.9px;line-height:1.1;
  font-size:clamp(30px,4.4vw,50px);margin:0 0 16px}
.hero p.dan{font-size:19px;color:#2A3339;margin:0 0 24px;max-width:34ch}
.nut{display:inline-block;font-family:var(--sans);font-weight:700;font-size:15px;
  background:var(--muc);color:#fff;padding:13px 22px;border-radius:3px;border:2px solid var(--muc)}
.nut:hover{background:var(--xanh);border-color:var(--xanh)}
.nut.phu{background:transparent;color:var(--muc)}
.nut.phu:hover{background:var(--daquang);color:var(--muc);border-color:var(--muc)}
.hangnut{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* bảng sổ: khối giấy có kẻ ô, đóng khung mực */
.so{background:var(--giay);border:2px solid var(--muc);border-radius:4px;
  box-shadow:7px 7px 0 var(--muc);overflow:hidden}
.so .dau{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;
  background:var(--muc);color:#fff;padding:8px 14px}
.so ul{list-style:none;margin:0;padding:6px 0}
.so li{display:flex;gap:12px;align-items:baseline;padding:11px 16px;font-size:16.5px;
  border-bottom:1px solid var(--ke)}
.so li:last-child{border-bottom:0}
.so li b{font-family:var(--sans);font-size:12px;color:var(--muc2);flex:0 0 22px}
.so li.cuoi{background:linear-gradient(transparent 58%,var(--daquang) 58%);font-weight:600}
.so .day{font-family:var(--sans);font-size:11.5px;color:var(--muc2);padding:9px 16px;border-top:1px dashed var(--ke-dam)}

/* ── Khối chung ── */
section{padding:38px 0}
.td{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--muc);padding-bottom:9px;margin-bottom:2px}
h2{font-family:var(--sans);font-weight:800;font-size:20px;letter-spacing:-.3px;margin:0}
.td .xem{margin-left:auto;font-family:var(--sans);font-size:13px;font-weight:600}

/* ── Danh sách bài kiểu mục lục sổ ── */
.mucluc{display:block}
.hang{display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--ke-dam)}
.hang .so-thu{font-family:var(--sans);font-weight:800;font-size:13px;color:var(--muc2);
  border-right:2px solid var(--muc);padding-right:12px;text-align:right}
.hang h3{font-family:var(--sans);font-weight:700;font-size:19px;letter-spacing:-.4px;
  margin:0 0 5px;line-height:1.28}
.hang .mota{font-size:15.5px;color:#3C464E;margin:0}
.hang .nhan{font-family:var(--sans);font-size:11px;color:var(--muc2);letter-spacing:.04em;font-weight:600}
.hang .anh{width:96px;height:120px;object-fit:cover;border:1.5px solid var(--muc);border-radius:3px}
.hang:hover h3{background:linear-gradient(transparent 62%,var(--daquang) 62%)}
.hang:hover .anh{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--muc)}
.hang .anh{transition:transform .15s ease,box-shadow .15s ease}

/* ── Bốn mục ── */
.bon{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--ke-dam)}
.muc-o{display:flex;align-items:baseline;gap:14px;padding:20px 0;border-bottom:1px solid var(--ke-dam);border-radius:0}
.muc-o:nth-child(odd){padding-right:26px;border-right:1px solid var(--ke-dam)}
.muc-o:nth-child(even){padding-left:26px}
.muc-o .ten{font-family:var(--sans);font-weight:800;font-size:18px}
.muc-o .sl{margin-left:auto;font-family:var(--sans);font-size:12.5px;color:var(--muc2)}
.muc-o .mo{display:block;font-size:15px;color:#3C464E;margin-top:5px;max-width:40ch}
.muc-o:hover{background:var(--giay2)}

/* ── Bản tin ── */
.bantin{border:2px solid var(--muc);border-radius:4px;overflow:hidden;background:var(--giay);
  display:grid;grid-template-columns:210px 1fr;gap:0;box-shadow:7px 7px 0 var(--muc)}
.bantin img{height:100%;object-fit:cover;border-right:2px solid var(--muc)}
.bantin .tv{padding:20px 22px}
.bantin .nhan{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--muc2)}
.bantin h3{font-family:var(--sans);font-weight:800;font-size:22px;letter-spacing:-.5px;margin:8px 0 9px}
.bantin p{font-size:15.5px;color:#3C464E;margin:0 0 14px}

/* ── Bài viết ── */
article{max-width:720px}
article .nhan-muc{display:inline-block;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;background:var(--daquang);padding:5px 9px;border-radius:2px;border:0}
article h1{font-size:clamp(29px,3.9vw,44px);margin:-4px 0 14px;max-width:24ch}
article .lede{font-family:var(--serif);font-size:20px;font-style:italic;color:#2A3339;
  border-left:3px solid var(--muc);padding-left:16px;margin:0 0 26px;max-width:56ch}
article .meta{font-family:var(--sans);font-size:12.5px;color:var(--muc2);margin:0 0 26px}
.tom{position:relative;margin:0 0 30px;padding:22px 24px;background:var(--giay);
  border:1.5px solid var(--muc);border-radius:3px;font-size:20px;font-weight:600;line-height:1.5}
.tom span{background:linear-gradient(transparent 60%,var(--daquang) 60%)}
.than p{margin:0 0 22px}
.than p:first-child::first-letter{font-family:var(--sans);font-weight:800;font-size:52px;
  float:left;line-height:.86;padding:5px 9px 0 0}
.lam{margin:32px 0;border:1.5px dashed var(--ke-dam);border-radius:4px;padding:20px 22px;background:var(--giay2)}
.lam .dt{font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.1em;margin-bottom:8px}
.lam p{margin:0;font-size:17px}
.hoi{margin:34px 0 0;padding:22px 24px;border:2px solid var(--muc);border-radius:3px;
  background:var(--giay);box-shadow:6px 6px 0 var(--muc)}
.hoi .dt{font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.1em;margin-bottom:8px}
.hoi p{margin:0;font-size:18px;font-weight:600}
.hashtag{font-family:var(--sans);font-size:13px;color:var(--xanh-dam);background:var(--giay2);
  border:1px solid var(--ke-dam);border-radius:3px;padding:10px 12px;margin:30px 0 0}
.tieptheo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:34px 0 0;
  border-top:2px solid var(--muc);padding-top:18px}
.tieptheo a{border:0;font-family:var(--sans)}
.tieptheo .nhan{font-size:11.5px;color:var(--muc2);font-weight:700;letter-spacing:.1em}
.tieptheo h4{font-size:16px;font-weight:700;margin:5px 0 0;letter-spacing:-.3px;line-height:1.3;color:var(--muc)}
.lienquan{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px}
.lienquan a{border:0}
.lienquan img{border:1.5px solid var(--muc);border-radius:3px;margin-bottom:10px;aspect-ratio:4/5;object-fit:cover}
.lienquan h4{font-family:var(--sans);font-size:15.5px;font-weight:700;margin:0;letter-spacing:-.3px;color:var(--muc)}

/* ── Chân trang ── */
footer{border-top:2px solid var(--muc);background:var(--giay);margin-top:26px;padding:34px 0 40px}
footer .f1{display:flex;gap:14px;align-items:center;margin-bottom:16px}
footer .ft{font-family:var(--sans);font-weight:800;font-size:17px;letter-spacing:-.3px}
footer p{font-size:15px;color:#3C464E;max-width:64ch;margin:0 0 12px}
footer .fmono{font-family:var(--sans);font-size:12.5px;color:var(--muc2)}
footer .lk{font-family:var(--sans);font-size:14px}
footer .hashtag{font-family:var(--sans);font-size:12.5px;background:none;border:0;padding:0;color:var(--muc2)}
.lx{font-family:var(--sans);font-size:13.5px;color:var(--muc);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  border:1.5px solid var(--muc);border-radius:3px;padding:9px 12px;background:var(--giay);width:fit-content;margin:14px 0 12px}
.lx .lx-t{font-size:11.5px;letter-spacing:.1em;color:var(--muc2);font-weight:700}
.lx b{font-size:19px;letter-spacing:-.3px;border-bottom:3px solid var(--daquang);line-height:1.2}
.lx .lx-p{font-size:12.5px;color:var(--muc2)}
.bq{font-family:var(--sans);font-size:13px;color:var(--muc)}
.bq b{background:linear-gradient(transparent 60%,var(--daquang) 60%)}
.dem{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--muc);border-radius:4px;
  overflow:hidden;background:var(--giay);box-shadow:7px 7px 0 var(--muc);margin:20px 0 6px}
.dem .o{padding:18px 20px;border-right:1px solid var(--ke-dam)}
.dem .o:last-child{border-right:0}
.dem .o .t{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muc2);display:block;margin-bottom:6px}
.dem .o .s{font-family:var(--sans);font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1;
  border-bottom:4px solid var(--daquang);display:inline-block;padding-bottom:3px}
.dem .o .p{font-family:var(--sans);font-size:12px;color:var(--muc2);margin-top:8px}
@media (max-width:620px){.dem{grid-template-columns:1fr}.dem .o{border-right:0;border-bottom:1px solid var(--ke-dam)}}

/* ── Bản tin (trang riêng) ── */
.so-ban{border-bottom:1px solid var(--ke-dam);padding:26px 0}
.so-ban .dt{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.so-ban h3{font-family:var(--sans);font-size:21px;font-weight:800;letter-spacing:-.4px;margin:0}
.so-ban .ngay{font-family:var(--sans);font-size:12.5px;color:var(--muc2)}
video{width:100%;max-width:400px;border:2px solid var(--muc);border-radius:4px;background:#000}
.tin{padding-left:20px;margin:14px 0 0;max-width:70ch}
.tin li{margin-bottom:13px;font-size:16.5px}
.tin .nguon{font-family:var(--sans);font-size:12.5px;color:var(--muc2)}
.muc-tin{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.14em;
  color:var(--muc2);margin:22px 0 8px;border-bottom:1px solid var(--ke-dam);padding-bottom:6px}
ul.ds{padding-left:20px;max-width:70ch}
ul.ds li{margin-bottom:10px}

/* ── Màn hình nhỏ ── */
@media (max-width:900px){
  body{background-size:22px 22px}
  .hero .wrap{grid-template-columns:1fr;gap:26px;padding-top:32px;padding-bottom:32px}
  .so{box-shadow:5px 5px 0 var(--muc)}
  .bantin{grid-template-columns:1fr;box-shadow:5px 5px 0 var(--muc)}
  .bantin img{border-right:0;border-bottom:2px solid var(--muc);max-height:260px}
  .bon{grid-template-columns:1fr}
  .muc-o:nth-child(odd){border-right:0;padding-right:0}
  .muc-o:nth-child(even){padding-left:0}
  .lienquan{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  body{font-size:17.5px}
  .wrap{padding:0 16px}
  header .wrap{gap:10px;padding-top:9px;padding-bottom:9px}
  nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;gap:0}
  nav a{white-space:nowrap;font-size:13px;padding:7px 9px}
  nav::-webkit-scrollbar{display:none}
  nav{scrollbar-width:none}
  .hang{grid-template-columns:1fr auto;gap:14px}
  .hang .so-thu{display:none}
  .hang .anh{width:74px;height:92px}
  .hang h3{font-size:18px}
  .tieptheo{grid-template-columns:1fr}
  .lienquan{grid-template-columns:1fr}
  article h1{font-size:27px}
  .tom{font-size:18px;padding:18px}
  .nut{width:100%;text-align:center}
  .hangnut{gap:10px}
}
/* Banner web Chuyên Gia Trung Quốc — giữ nét nhận diện của web đó (xanh ngọc #1FA8BC) */
.banner-tq{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  border:2px solid var(--muc);border-radius:4px;background:var(--giay);box-shadow:7px 7px 0 var(--muc);
  padding:22px 24px;margin-top:18px;border-bottom:2px solid var(--muc)}
.banner-tq:hover{box-shadow:9px 9px 0 var(--muc);transform:translate(-1px,-1px)}
.o-tq{width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  background:#15242a;color:#fff;font-size:34px;font-weight:700;border-radius:3px;flex:0 0 auto;
  font-family:"Noto Sans SC","Be Vietnam Pro",sans-serif}
.chu{display:flex;flex-direction:column;gap:3px}
.ten-tq{font-family:var(--sans);font-weight:800;font-size:21px;letter-spacing:-.4px;color:var(--muc)}
.kh-tq{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.16em;color:#0e6b7a}
.mo-tq{font-size:15.5px;color:#3C464E;margin-top:5px;max-width:56ch}
.nut-tq{font-family:var(--sans);font-weight:700;font-size:14px;color:#fff;background:#0e6b7a;
  padding:10px 16px;border-radius:3px;align-self:flex-start;margin-top:11px}
.banner-tq:hover .nut-tq{background:#1FA8BC}
.anh-tq{display:flex;gap:8px}
.anh-tq img{width:96px;height:96px;object-fit:cover;border:1.5px solid var(--muc);border-radius:3px}
/* ô 中 nhỏ ở chân trang */
.o-tq-nho{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;
  background:#15242a;color:#fff;font-size:12px;border-radius:2px;vertical-align:-4px;margin-right:5px}
@media (max-width:900px){.banner-tq{grid-template-columns:auto 1fr}.anh-tq{display:none}}
@media (max-width:620px){.banner-tq{grid-template-columns:1fr;padding:18px}
  .o-tq{width:54px;height:54px;font-size:28px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}
.hang h3,.hang:hover h3{color:var(--muc)}
.mucluc a.hang{border-bottom:1px solid var(--ke-dam);text-decoration:none}

/* ═══ GIAO DIỆN "BẢNG TIN SỐ" — Kathy dựng 02/10/2026, sếp chốt Mẫu C ═══ */
body{background-image:none;background:#0E1418}
a{color:var(--daquang);border-bottom-color:rgba(87,224,184,.3)}
a:hover{border-bottom-color:var(--daquang)}
header{background:rgba(14,20,24,.94);border-bottom:1px solid #22303A}
nav a:hover{background:#17222A}
nav a.dang-o{background:var(--daquang);color:#04231C}
h1,h2{font-family:var(--serif);font-weight:700}
h1{letter-spacing:-1px}
.hero{border-bottom:1px solid #22303A;background:transparent}
.hero p.dan{color:#9FB0B6}
.nut{background:var(--daquang);color:#04231C;border:0;border-radius:10px}
.nut:hover{background:#8CF0D2;border-color:#8CF0D2}
.nut.phu{background:transparent;color:var(--muc);border:1px solid #2A3841}
.nut.phu:hover{background:#17222A;color:var(--muc)}
.so,.bantin,.tom,.hoi,.dem,.banner-tq,.lx{background:#141C21;border:1px solid #22303A;border-radius:14px;box-shadow:none}
.so .dau{background:#182329;color:var(--daquang)}
.mucluc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mucluc a.hang,.mucluc .hang{border:1px solid #22303A;border-radius:12px;background:#141C21;
 display:flex;flex-direction:column;padding:0;overflow:hidden}
.hang .anh{order:-1;width:100%;height:168px;border:0;border-radius:0;object-fit:cover;object-position:center 46%}
.hang h3{font-family:var(--serif);font-weight:700;font-size:19px;color:#E9F0F2;margin:14px 16px 0 16px}
.hang:hover h3{background:none;color:var(--daquang)}
.hang .mota{font-size:13.5px;color:#8FA0A6;margin:8px 16px 16px 16px;line-height:1.45}
.hang .nhan{color:var(--daquang);font-weight:700;font-size:11px;letter-spacing:.14em;margin:14px 16px 0 16px;display:block}
.hang .so-thu{display:none}
.hang:hover .anh{transform:none;box-shadow:none;opacity:.92}
.dem .o .s{color:var(--daquang);border-bottom:0;font-family:var(--serif)}
.dem .o .p{color:#8FA0A6}
.muc-o .ten{color:#E9F0F2} .muc-o .mo{color:#8FA0A6} .muc-o .sl{color:#7C8C93}
.muc-o:hover{background:#141C21}
article .nhan-muc{background:rgba(87,224,184,.16);color:var(--daquang);border-radius:99px;padding:5px 12px}
article .lede{color:#B9C6CB;border-left:3px solid var(--daquang)}
.tom span,.so li.cuoi,.bq b,.lx b{background:none;border-bottom:2px solid rgba(87,224,184,.55)}
.than p{color:#C6D2D6}
.td{border-bottom:1px solid #22303A}
.so li{border-bottom:1px solid #1B262C}
.bai-tiep,.tieptheo{border-top:1px solid #22303A}
.lienquan img{border:1px solid #22303A;border-radius:10px}
footer{border-top:1px solid #22303A;background:transparent}
footer p{color:#9FB0B6}
.banner-tq:hover{box-shadow:none;transform:translateY(-2px)}
.bantin img{border-right:1px solid #22303A}
video{border:1px solid #22303A;border-radius:12px}
@media (max-width:900px){.mucluc{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.mucluc{grid-template-columns:1fr}}

/* ── Vá tương phản cho giao diện tối (Kathy 02/10/2026) ── */
.lam{background:#131B21;border:1px dashed #2F4048}
.lam p,.lam li,.lam .dt{color:#DCE7EA}
.lam .dt{color:#57E0B8}
.tom,.hoi,.so,.bantin{color:#E9F0F2}
.tom p,.hoi p,.so p{color:#C6D2D6}
.hang .mota,.muc-o .mo,.tin .nguon,.muc-tin,footer .fmono,.bq{color:#93A3AA}
.hero p.dan{color:#B4C2C7}
.than p,.tin li,ul.ds li{color:#D2DDE1}
article .meta,.hang .nhan,.the .muc{color:#7FCFB4}
.so li b{color:#93A3AA}
.muc-o .ten,.so-ban h3,h3,h4{color:#E9F0F2}
.nhan,.chip,.nhan-muc{color:#8FEBD0}