/* eTeacher — Trạm thu pin cũ. Hệ thiết kế "POSTER XANH" dùng chung cho trang công khai và khu nội bộ. */

/* ══════════════════════════════════════════════════════════
   POSTER XANH — áp phích cổ động môi trường
   Giấy #F7F9EF hơi ngả lá · mực #14251B · ba màu thương hiệu đặt PHẲNG:
   lá #7ED957 (hành động, kết quả) · xanh #0097B2 (thông tin) · tím #805FA9 (tem eTeacher).
   Dấu ấn: viền mực 2px, BÓNG ĐỔ CỨNG (4px 4px 0 mực) như bản in lụa, tem dán nghiêng.
   Chữ hiển thị Bricolage Grotesque 800, chữ thân Be Vietnam Pro.
   Hai màu lá/xanh vẫn QUÁ SÁNG để làm chữ trên nền giấy — chữ màu dùng --xanh-chu #007083,
   còn trên nền lá/xanh phẳng luôn dùng CHỮ MỰC, không dùng chữ trắng.
   ══════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;   /* Poster Xanh cam kết MỘT diện mạo giấy sáng — không có bản tối */
  --xanh:#0097B2; --xanh-chu:#007083; --xanh-dam:#005766; --xanh-mo:#DFF3FB; --xanh-ke:#B9E2EE;
  --la:#7ED957; --la-chu:#007083; --la-mo:#EAF8DF; --la-ke:#C9EDB4;
  --xanh-lá-gradient:linear-gradient(135deg,#0097B2 0%,#7ED957 100%);
  --tim:#805FA9; --tim-sau:#5E4180; --tim-mo:#EFE9F6; --tim-ke:#D9CBE7;
  --hu:#F5A623; --hu-mo:#FCF0DC;
  --muc:#14251B; --muc-nhat:#47584D; --muc-mo:#5D6E60;
  --giay:#F7F9EF; --the:#FFFFFF; --kem:#EFF3E6; --ke:#DCE3D0;
  --tren-toi:#F0F9F4;
  --la-sau:#0E6B45; --la-tuoi:#7ED957; --la-dam:#005766;
  --do:#C63A2B; --do-mo:#FBEAE6; --cam:#B05E12;
  --ok-chu:#1E5C10; --do-chu:#A5251B; --cam-chu:#8A5206;
  /* Bí danh cho các trang gọi inline từ trước — trỏ về đúng vai trong hệ mới */
  --vien:var(--ke); --tim-nhat:var(--kem); --tim-vien:var(--ke);
  /* Bóng đổ cứng — chữ ký của Poster Xanh */
  --bong:#14251B;
  --de:'Bricolage Grotesque','Be Vietnam Pro',-apple-system,sans-serif;
  --than:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --r:12px;
  --canh-nen:#805FA9; --canh-chu:#F3EDFA;
}
*{box-sizing:border-box}
body{margin:0;background:var(--giay);color:var(--muc);
  font-family:var(--than);font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--tim);text-decoration:none}
::selection{background:var(--tim);color:#fff}
a:hover{text-decoration:underline}
/* Giãn dòng 1.2+: tiếng Việt xếp dấu cả trên (ắ ế ố) lẫn dưới (ạ ộ ợ),
   tiêu đề nhiều dòng cỡ lớn dễ bị dấu dòng dưới chạm chân dòng trên. */
h1,h2,h3,h4{font-family:var(--de);font-weight:800;line-height:1.2;
  letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{line-height:1.26}
h2{line-height:1.22}
p{margin:0}
:focus-visible{outline:2.5px solid var(--xanh-chu);outline-offset:3px;border-radius:2px}

.bao{max-width:1200px;margin:0 auto;padding:0 26px}
.hep{max-width:780px;margin:0 auto;padding:0 26px}
.doc > * + *{margin-top:18px}

/* ── Nhãn mắt: ô lá vuông dán nghiêng — con tem nhỏ lặp khắp trang ── */
.mat{display:inline-flex;align-items:center;gap:10px;font-size:.8rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muc)}
.mat::before{content:"";width:13px;height:13px;border-radius:3px;flex:none;
  background:var(--la);border:2px solid var(--muc);transform:rotate(-8deg)}
.mat.tim{color:var(--tim-sau)} .mat.tim::before{background:var(--tim)}
.mat.do{color:var(--do-chu)} .mat.do::before{background:var(--do)}
.tren-toi .mat{color:var(--la-tuoi)} .tren-toi .mat::before{background:var(--la-tuoi);border-color:var(--tren-toi)}

/* Tiêu đề cột bên trong một khối — thay cho nhãn mắt khi cần chữ nổi và rõ, không ô vuông */
.tieu-cot{font-family:var(--de);font-weight:800;font-size:1.28rem;line-height:1.25;
  letter-spacing:-.01em;color:var(--muc);margin:0}

/* ── Thanh đầu: giấy + gạch mực đậm dưới chân ── */
.dau{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--giay) 92%,transparent);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:2px solid var(--muc)}
.dau .bao{display:flex;align-items:center;gap:26px;min-height:78px;max-width:none;padding:0 20px}
.hieu img{height:46px;width:auto}
.hieu-tim{display:block} .hieu-trang{display:none}
.hieu{display:flex;align-items:center;gap:13px;flex:none}
.hieu .vach{width:2px;height:26px;background:var(--muc);opacity:.25}
.hieu .ten{font-family:var(--de);font-weight:800;font-size:1.3rem;color:var(--muc);
  line-height:1.1;letter-spacing:-.01em}
.hieu .ten small{display:block;font-family:var(--than);font-weight:600;font-size:.72rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tim);margin-top:3px}
.dieu{margin-left:auto;display:flex;align-items:center;gap:2px}
/* Nhắm cả <a> lẫn <button>: bản chạy thật dùng thẻ liên kết để có URL thật cho SEO/QR. */
.dieu a:not(.nut),.dieu button{background:none;border:0;font:600 .96rem/1 var(--than);
  color:var(--muc-nhat);padding:10px 13px;border-radius:8px;cursor:pointer;
  position:relative;text-decoration:none;white-space:nowrap}
.dieu a:not(.nut):hover,.dieu button:hover{color:var(--muc);background:var(--kem);text-decoration:none}
.dieu a.hien,.dieu button.hien{color:var(--muc);font-weight:700}
.dieu a.hien::after,.dieu button.hien::after{content:"";position:absolute;left:13px;right:13px;
  bottom:1px;height:4px;border-radius:2px;background:var(--la)}
.mo-menu{display:none;background:var(--the);border:2px solid var(--muc);border-radius:9px;
  padding:8px 11px;cursor:pointer;margin-left:auto;color:var(--muc);box-shadow:2px 2px 0 var(--bong)}

/* ── Nút: mảng lá phẳng + viền mực + bóng cứng. Bấm xuống là bóng "sập" — cảm giác con dấu ── */
.nut{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:11px;
  border:2px solid var(--muc);background:var(--la);
  color:#14251B;font:800 .95rem/1.2 var(--than);cursor:pointer;transition:.13s;text-decoration:none;
  box-shadow:4px 4px 0 var(--bong)}
.nut:hover{text-decoration:none;color:#14251B;transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--bong)}
.nut:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--bong)}
.nut i{font-style:normal;transition:transform .16s}
.nut:hover i{transform:translateX(4px)}
.nut-hu{background:var(--la);color:#14251B}
.nut-hu:hover{color:#14251B}
.nut-vien{background:transparent;color:var(--muc);border-color:var(--muc);box-shadow:none}
.nut-vien:hover{background:var(--the);color:var(--muc);box-shadow:3px 3px 0 var(--bong)}
.tren-toi .nut-vien{color:var(--tren-toi);border-color:rgba(255,255,255,.6)}
.tren-toi .nut-vien:hover{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.nut-tim{background:var(--tim);color:#fff}
.nut-tim:hover{background:var(--tim-sau);color:#fff}
.nut-nho{padding:8px 15px;font-size:.85rem;box-shadow:2px 2px 0 var(--bong);border-width:1.5px}
.nut-nho:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--bong)}

/* ── Bản duotone cho ảnh chưa có hình thật — thêm viền mực cho hợp hệ in ── */
.plate{position:relative;overflow:hidden;background:#03414F;isolation:isolate;
  border:2px solid var(--muc);border-radius:var(--r)}
.plate::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgba(3,22,26,.60) 0%, rgba(3,22,26,.28) 55%, rgba(3,22,26,.08) 100%),
    radial-gradient(115% 82% at 2% 110%, rgba(126,217,87,.50) 0%, rgba(126,217,87,0) 56%),
    radial-gradient(70% 58% at 96% -10%, rgba(128,95,169,.32) 0%, rgba(128,95,169,0) 64%),
    linear-gradient(158deg,#046074 0%,#03414F 38%,#07301F 100%)}
.plate::after{content:"";position:absolute;inset:0;z-index:2;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.plate > *{position:relative;z-index:3}
.plate .nhan-anh{position:absolute;left:18px;bottom:14px;z-index:4;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.52);font-weight:600}

/* Khung có ẢNH THẬT làm nền — lớp phủ mạnh để chữ trắng luôn đọc được */
.plate .anh-nen{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.plate.co-anh::before{
  background:
    linear-gradient(100deg, rgba(3,22,26,.80) 0%, rgba(3,22,26,.62) 46%, rgba(3,22,26,.38) 100%),
    radial-gradient(115% 82% at 2% 110%, rgba(126,217,87,.24) 0%, rgba(126,217,87,0) 56%),
    radial-gradient(70% 58% at 96% -10%, rgba(0,151,178,.26) 0%, rgba(0,151,178,0) 64%)}

/* Logo chiến dịch nhiều màu → tấm nền trắng viền mực kiểu tem */
.hop-logo-cd{display:table;background:#fff;border:2px solid var(--muc);border-radius:14px;
  padding:16px 20px;margin:0 0 26px;box-shadow:5px 5px 0 var(--bong)}
.logo-cd{height:230px;width:auto;display:block;margin:-14px 0 -6px -10px}
@media (max-width:620px){.logo-cd{height:160px;margin:-8px 0 -4px -6px}.hop-logo-cd{padding:12px 15px;margin-bottom:20px}}
/* Hai logo (eTeacher và đơn vị xử lý) phải CÙNG CHIỀU CAO và cùng mốc trên,
   nên khoá theo chiều cao chứ không theo bề ngang — mỗi logo một tỷ lệ khác nhau. */
.logo-don-vi{height:76px;width:auto;max-width:100%;object-fit:contain;object-position:left center;
  display:block;margin:18px 0 6px}
.logo-don-vi.nho{height:61px}
@media (max-width:620px){.logo-don-vi{height:60px}.logo-don-vi.nho{height:48px}}
.doi-tac-logo{max-width:310px;height:auto;margin-bottom:18px}

/* ══ KHỐI NỀN MÀU: mảng in phẳng, kẹp giữa hai gạch mực ══
   Trên mảng lá/xanh sáng luôn dùng CHỮ MỰC (.tren-sang). Chỉ khối tím dùng chữ trắng. */
.nen-gradient{background:var(--la);border-top:2px solid var(--muc);border-bottom:2px solid var(--muc)}
.nen-la{background:var(--la-mo);border-top:2px solid var(--muc);border-bottom:2px solid var(--muc)}
.nen-xanh{background:var(--xanh-mo);border-top:2px solid var(--muc);border-bottom:2px solid var(--muc)}
.nen-tim{background:var(--tim);border-top:2px solid var(--muc);border-bottom:2px solid var(--muc)}

.tren-sang{color:#14251B}
.tren-sang h1,.tren-sang h2,.tren-sang h3,.tren-sang h4{color:#14251B}
.tren-sang .mo,.tren-sang .tieu-khoi p,.tren-sang p{color:rgba(20,37,27,.94)}
.tren-sang .mat{color:#14251B}
.tren-sang .mat::before{background:#fff;border-color:#14251B}
.tren-sang .ds li::before{background:#fff;border-color:#14251B}
.tren-sang .buoc .num{background:#14251B;color:#fff;border-color:#14251B}
.tren-sang .the{background:rgba(255,255,255,.9);border-color:#14251B}
.tren-sang .nut-vien{color:#14251B;border-color:#14251B}
.tren-sang .nut-vien:hover{background:#fff;color:#14251B}
.tren-sang .nut{background:#14251B;color:#fff;border-color:#14251B;box-shadow:4px 4px 0 rgba(20,37,27,.35)}
.tren-sang .nut:hover{background:#0B1710;color:#fff}
.tren-sang .doc-them{color:#0E5A2E}

.nen-tim,.nen-tim h1,.nen-tim h2,.nen-tim h3{color:#fff}
.nen-tim .mo,.nen-tim .tieu-khoi p,.nen-tim p{color:rgba(255,255,255,.95)}
.nen-tim .mat{color:#fff} .nen-tim .mat::before{background:var(--la);border-color:#fff}
/* Thẻ TỰ NÓ mang nền tím (dùng ở khối tác động môi trường trang điểm thu). Phải khai SAU .the
   và đủ đặc hiệu, nếu không nền trắng của .the thắng mà chữ vẫn trắng → khối trông như rỗng. */
.the.nen-tim{background:var(--tim);border-color:var(--muc);color:#fff}
.the.nen-tim h3,.the.nen-tim h4{color:#fff}
.the.nen-tim small,.the.nen-tim p{color:rgba(255,255,255,.9)}
.nen-tim .the h3,.nen-tim .the{color:var(--muc)}
.nen-tim .the p{color:var(--muc-nhat)}
.nen-tim .the .mat{color:var(--muc)}
.nen-tim .the .mat::before{background:var(--la);border-color:var(--muc)}
.nen-tim .the .ds li::before{border-color:var(--muc)}
.nen-tim .nut-vien{color:#fff;border-color:rgba(255,255,255,.7);box-shadow:none}
.nen-tim .nut-vien:hover{background:rgba(255,255,255,.16);color:#fff}

/* ══ BÌA ĐÔI: chữ trái trên giấy chấm ram in, ảnh phải giữ màu thật ══ */
.bia-doi{display:grid;grid-template-columns:1fr;align-items:stretch;
  background:var(--giay);
  background-image:radial-gradient(color-mix(in srgb,var(--muc) 9%,transparent) 1.2px,transparent 1.3px);
  background-size:22px 22px;border-bottom:2px solid var(--muc)}
.bia-chu{padding:52px 0 58px}
.bia-anh{position:relative;overflow:hidden;min-height:330px;border-top:2px solid var(--muc)}
.bia-anh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.bia-anh img.hien{opacity:1}
.bia-cham{position:absolute;right:16px;bottom:14px;display:flex;gap:8px;z-index:3}
.bia-cham i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.6);border:2px solid #14251B;cursor:pointer;transition:.2s}
.bia-cham i.hien{background:var(--la)}
.bia-anh::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(0,151,178,.10),rgba(126,217,87,.08))}
@media (min-width:960px){
  .bia-doi{grid-template-columns:1.04fr .96fr;min-height:min(82vh,700px)}
  .bia-chu{padding:64px 0;display:flex;flex-direction:column;justify-content:center}
  .bia-anh{min-height:auto;border-top:0;border-left:2px solid var(--muc)}
}
.bia-chu h1{font-size:clamp(2.3rem,5.4vw,3.9rem);max-width:16ch;line-height:1.24}
.bia-chu .dan{max-width:52ch;margin-top:20px;font-size:clamp(1rem,1.5vw,1.14rem);
  color:var(--muc-nhat)}
.bia-chu .gach{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* Bộ đếm đóng hộp: viền mực + bóng cứng — con dấu số liệu của chiến dịch */
.dem-sang{margin-top:36px;padding:24px 28px;background:var(--the);border:2px solid var(--muc);
  border-radius:16px;box-shadow:6px 6px 0 var(--bong);display:inline-block;max-width:100%}
.dem-sang .con-so{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dem-sang .con-so b{font-family:var(--de);font-weight:800;line-height:.95;color:var(--muc);
  font-size:clamp(2.9rem,7vw,4.7rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dem-sang .dv{font-family:var(--de);font-size:clamp(1.1rem,2.2vw,1.6rem);
  color:var(--tim-sau);font-weight:700}
.dem-sang .nhan{font-size:.95rem;color:var(--muc-nhat);margin-top:8px;max-width:52ch;text-wrap:balance}
.dem-sang .phu-so{display:flex;flex-wrap:wrap;gap:0;margin-top:20px;border-top:2px solid var(--ke);padding-top:16px}
.dem-sang .phu-so div{flex:1 1 128px;padding-right:22px}
.dem-sang .phu-so b{display:block;font-family:var(--de);font-size:1.5rem;font-weight:800;
  color:var(--muc);line-height:1;font-variant-numeric:tabular-nums}
.dem-sang .phu-so span{display:block;font-size:.86rem;color:var(--muc-mo);margin-top:5px}

/* ── Băng tối (giữ cho các khối cũ còn dùng) ── */
.tren-toi{color:var(--tren-toi)}
.tren-toi h1,.tren-toi h2,.tren-toi h3{color:#fff}
.tren-toi .mo{color:rgba(241,248,243,.88)}

/* ── Trang bìa kiểu cũ (còn vài trang dùng) ── */
.bia{min-height:min(88vh,760px);display:flex;align-items:flex-end;padding:96px 0 60px}
.bia .bao{width:100%}
.bia h1{font-size:clamp(2.7rem,7.2vw,5.4rem);max-width:15ch;color:#fff;line-height:1.26}
.bia .dan{max-width:56ch;margin-top:24px;font-size:clamp(1.02rem,1.7vw,1.2rem);
  color:rgba(241,248,243,.92)}
.bia .gach{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.bia-so{display:flex;flex-wrap:wrap;gap:0;margin-top:56px;border-top:1px solid rgba(255,255,255,.2)}
.bia-so div{flex:1 1 160px;padding:22px 24px 4px 0}
.bia-so b{display:block;font-family:var(--de);font-size:clamp(2rem,4vw,2.9rem);
  font-weight:800;color:var(--la-tuoi);line-height:1;letter-spacing:-.02em}
.bia-so span{display:block;font-size:.83rem;color:rgba(246,242,251,.72);margin-top:7px}

/* ── Khối chung ───────────────────────────── */
.khoi{padding:84px 0}
.khoi-hep{padding:68px 0}
.nen-kem{background:var(--kem)}
.nen-toi{background:var(--muc)}
.tieu-khoi{max-width:62ch}
.tieu-khoi h2{font-size:clamp(1.9rem,3.7vw,2.8rem);margin-top:16px}
.tieu-khoi p{margin-top:16px;color:var(--muc-nhat);font-size:1.05rem}
.tren-toi .tieu-khoi p{color:rgba(241,248,243,.88)}

.luoi{display:grid;gap:26px}
.l2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.l3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.l4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ── Số liệu lớn ──────────────────────────── */
.so-lon{border-top:3px solid var(--muc);padding-top:18px}
.tren-toi .so-lon{border-top-color:rgba(255,255,255,.34)}
.so-lon b{display:block;font-family:var(--de);font-weight:800;
  font-size:clamp(2.5rem,5vw,3.7rem);line-height:.98;letter-spacing:-.02em;color:var(--muc)}
.tren-toi .so-lon b{color:var(--la-tuoi)}
.so-lon span{display:block;margin-top:10px;font-size:.93rem;color:var(--muc-nhat);max-width:26ch}
.tren-toi .so-lon span{color:rgba(241,248,243,.88)}

/* ── Tác hại: biểu tượng + tiêu đề nhỏ ── */
.hai{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-top:2px solid var(--ke)}
.hai svg{flex:none;width:30px;height:30px;stroke:var(--xanh-chu);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.hai h3{font-family:var(--than);font-size:1.04rem;font-weight:800;letter-spacing:0;margin-bottom:6px}
.hai p{color:var(--muc-nhat);font-size:.95rem}

/* ── Bộ đếm sống trên nền tối ── */
.dem-song{margin-top:44px;padding:30px 0 0;border-top:1px solid rgba(255,255,255,.22)}
.dem-song .con-so{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
/* Bọc đúng vào .con-so, KHÔNG viết .dem-song b — kẻo mọi <b> trong chú thích bị phóng to theo. */
.dem-song .con-so b{font-family:var(--de);font-weight:800;color:var(--la-tuoi);line-height:.92;
  font-size:clamp(3.2rem,8.6vw,6rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dem-song .dv{font-family:var(--de);font-size:clamp(1.3rem,2.6vw,2rem);color:var(--la-tuoi);font-weight:700}
.dem-song .nhan{font-size:.95rem;color:rgba(241,248,243,.90);margin-top:10px;max-width:44ch}
.dem-phu{display:flex;flex-wrap:wrap;gap:0;margin-top:26px}
.dem-phu div{flex:1 1 140px;padding-right:26px}
.dem-phu b{display:block;font-family:var(--de);font-size:1.7rem;font-weight:800;color:#fff;
  line-height:1;font-variant-numeric:tabular-nums}
.dem-phu span{display:block;font-size:.82rem;color:rgba(241,248,243,.88);margin-top:6px}

/* ── Thẻ: tấm bìa viền mực, bóng cứng ── */
.the{background:var(--the);border:2px solid var(--muc);border-radius:var(--r);
  padding:28px;transition:.14s;box-shadow:4px 4px 0 var(--bong)}
.the:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--bong)}
.the h3{font-size:1.2rem;margin-bottom:10px}
.the p{color:var(--muc-nhat);font-size:.95rem}
.the .stt{font-family:var(--de);font-size:2.5rem;font-weight:800;color:var(--la);
  -webkit-text-stroke:1.5px var(--muc);line-height:1;letter-spacing:-.02em;margin-bottom:14px;display:block}

/* ── Bài viết ─────────────────────────────── */
.bai{display:grid;grid-template-columns:1fr;gap:0;border-top:2px solid var(--ke);
  padding:26px 0;align-items:start}
@media (min-width:760px){.bai{grid-template-columns:240px 1fr;gap:30px}}
.bai:hover h3{color:var(--xanh-chu)}
.bai .plate{aspect-ratio:16/10}
.bai .chu{padding-top:2px}
.bai h3{font-size:1.3rem;margin:10px 0 8px;transition:.16s}
.bai p{color:var(--muc-nhat);font-size:.95rem}
.bai .doc-them{margin-top:12px;font-weight:700;font-size:.9rem;color:var(--tim);
  display:inline-flex;gap:7px;align-items:center}
.ngay{font-size:.84rem;color:var(--muc-mo);letter-spacing:.05em;text-transform:uppercase;font-weight:700}

/* ── Ảnh minh hoạ trong các khối nội dung ── */
.anh-khoi{display:block;width:100%;height:auto;border:2px solid var(--muc);
  border-radius:var(--r);box-shadow:5px 5px 0 var(--bong);object-fit:cover}
.anh-khoi.cao{aspect-ratio:4/3}
.anh-khoi.ngang{aspect-ratio:21/9}
.anh-chu{display:block;font-size:.82rem;color:var(--muc-mo);margin-top:10px}
.nen-tim .anh-chu,.tren-sang .anh-chu{color:inherit;opacity:.82}

/* ── Media: ba ảnh nổi bật (2 ngang chồng nhau bên trái, 1 dọc bên phải) ── */
/* Hai ô ngang khoá tỷ lệ 16:9 để TỰ ĐỊNH chiều cao hàng — không khoá thì ô lưới
   giãn theo chiều cao thật của ảnh và cả khối cao vống lên mấy nghìn pixel. */
.noi-bat{display:grid;gap:16px;grid-template-columns:1.35fr 1fr}
.noi-bat .o-anh{position:relative;overflow:hidden;border:2px solid var(--muc);
  border-radius:var(--r);box-shadow:5px 5px 0 var(--bong);background:var(--kem)}
.noi-bat .o-anh{aspect-ratio:16/9}
.noi-bat .o-anh img{width:100%;height:100%;object-fit:cover;display:block}
.noi-bat .doc{grid-column:2;grid-row:1 / span 2;aspect-ratio:auto;height:100%}
.noi-bat .o-anh .ten{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 18px;
  color:#fff;font-weight:700;font-size:.95rem;
  background:linear-gradient(to top,rgba(10,20,14,.82),transparent)}
@media (max-width:760px){
  .noi-bat{grid-template-columns:1fr;grid-template-rows:none}
  .noi-bat .o-anh{aspect-ratio:16/10}
  .noi-bat .doc{grid-column:auto;grid-row:auto;aspect-ratio:3/4}
}

/* ── Băng ảnh cuộn ngang — thêm bao nhiêu ảnh cũng không vỡ bố cục ── */
.bang-anh{display:flex;gap:14px;overflow-x:auto;padding:4px 4px 16px;scroll-snap-type:x mandatory}
.bang-anh .o-anh{flex:none;width:min(300px,72vw);scroll-snap-align:start;position:relative;
  border:2px solid var(--muc);border-radius:var(--r);box-shadow:4px 4px 0 var(--bong);overflow:hidden}
.bang-anh .o-anh img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bang-anh .o-anh .ten{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;color:#fff;
  font-weight:600;font-size:.88rem;background:linear-gradient(to top,rgba(10,20,14,.82),transparent)}

/* ── Khung video 16:9 ── */
.khung-video{position:relative;aspect-ratio:16/9;border:2px solid var(--muc);border-radius:var(--r);
  overflow:hidden;box-shadow:5px 5px 0 var(--bong);background:#000}
.khung-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── Media ────────────────────────────────── */
.thu-vien{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.thu-vien .plate{aspect-ratio:1;display:grid;place-items:end start;padding:18px}
.thu-vien .plate.rong{grid-column:span 2;aspect-ratio:2/1}
.thu-vien .plate span{font-weight:600;font-size:.92rem;color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.5)}

/* ── Quy trình: số bước là con tem vuông ── */
.buoc{position:relative;padding-left:0}
.buoc .num{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:12px;background:var(--tim);color:#fff;border:2px solid var(--muc);
  font-family:var(--de);font-weight:800;font-size:1.2rem;margin-bottom:16px;
  transform:rotate(-4deg);box-shadow:3px 3px 0 var(--bong)}
.tren-toi .buoc .num{background:var(--la-tuoi);color:#14251B;border-color:#fff}

/* ── Biểu mẫu ─────────────────────────────── */
.o{margin-bottom:20px}
.o label{display:block;font-weight:700;font-size:.89rem;margin-bottom:8px}
.o .goi{display:block;font-weight:400;color:var(--muc-mo);font-size:.83rem;margin-top:6px}
input,select,textarea{width:100%;padding:12px 15px;border:1.5px solid var(--ke);border-radius:10px;
  font:400 1rem/1.5 var(--than);background:var(--the);color:var(--muc)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--muc);
  box-shadow:3px 3px 0 var(--la)}
textarea{min-height:110px;resize:vertical}
.hang{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ── Bảng: chân tiêu đề gạch mực đậm ── */
.cuon{overflow-x:auto}
/* Bảng TRANG CÔNG KHAI đọc thong thả nên chữ to hơn; bảng khu nội bộ giữ mật độ làm việc */
.khoi table{font-size:1.04rem}
.khoi th{font-size:.78rem}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{text-align:left;font-size:.71rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muc-nhat);font-weight:800;padding:0 14px 11px 0;border-bottom:2.5px solid var(--muc)}
td{padding:14px 14px 14px 0;border-bottom:1.5px solid var(--ke);vertical-align:middle}
.phai{text-align:right}
.so{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── Vặt ──────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:9px;
  font-size:.83rem;font-weight:700;background:var(--the);color:var(--muc);
  border:1.5px solid var(--muc)}
.chip.tim{background:var(--tim);color:#fff;border-color:var(--muc);transform:rotate(-2deg);
  box-shadow:2px 2px 0 var(--bong)}
.mo{color:var(--muc-nhat)}
.gach{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.vach-ngang{height:2px;background:var(--ke);border:0;margin:0}
.ds{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.ds li{display:flex;gap:13px;align-items:flex-start;font-size:.97rem}
.ds li::before{content:"";flex:none;width:13px;height:13px;margin-top:6px;border-radius:3px;
  background:var(--la);border:2px solid var(--muc);transform:rotate(-8deg);position:relative}
/* Nội dung mỗi mục phải nằm trong <span>: flex tách thẻ con rời thành ô riêng. */
.ds li > span{flex:1;min-width:0}
.ds.khong li::before{background:var(--do)}
.tren-toi .ds li::before{background:var(--la-tuoi);border-color:#fff}

/* ── Chân trang: mảng mực đậm, chữ lá ── */
.chan{background:#14251B;color:rgba(232,240,228,.78);padding:68px 0 30px;font-size:.94rem;text-wrap:pretty;
  border-top:2px solid var(--muc)}
.chan a{color:#fff} .chan a:hover{color:var(--la-tuoi)}
.chan h4{color:#C9B3E3;font-family:var(--than);font-size:.84rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 16px;font-weight:800}
.chan .luoi{gap:36px}
.chan-cot{grid-template-columns:1.25fr .82fr .82fr 1.12fr}
@media (max-width:900px){.chan-cot{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.chan .cuoi{border-top:1px solid rgba(232,240,228,.16);margin-top:48px;padding-top:22px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.9rem;
  color:rgba(232,240,228,.5)}
.chan .cuoi a{color:rgba(232,240,228,.5);font-weight:500}
.chan .cuoi a:hover{color:rgba(232,240,228,.9)}
.chan img{height:46px;margin-bottom:18px}

/* ── Chuyển trang ─────────────────────────── */
.trang{display:none}
.trang.hien{display:block;animation:vao .32s ease both}
@keyframes vao{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .nut:hover,.the:hover{transform:none}
}

@media (max-width:940px){
  .dieu{position:fixed;inset:74px 0 auto;flex-direction:column;align-items:stretch;
    background:var(--giay);border-bottom:2px solid var(--muc);padding:12px;gap:2px;display:none}
  .dieu.mo{display:flex}
  .dieu a:not(.nut),.dieu button{text-align:left;padding:13px 15px;font-size:1rem}
 /* Hai nút hành động: xuống dòng riêng, cách nhau rõ, rộng hết bề ngang cho dễ bấm */
 .dieu .nut{margin:0!important;width:100%;justify-content:center;padding:13px 18px;font-size:.95rem}
 .dieu .nut:first-of-type{margin-top:10px!important}
 .dieu .nut + .nut{margin-top:10px!important}
  .dieu button.hien::after{display:none}
  .mo-menu{display:block;flex:none}
  /* Cụm hiệu phải CO ĐƯỢC, nếu không nó đẩy nút menu ra ngoài khung */
  .hieu{flex:1 1 auto;min-width:0;gap:9px}
  .hieu img{height:34px}
  .hieu .ten{font-size:1.02rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hieu .ten small{font-size:.62rem;letter-spacing:.1em}
  .dau .bao{gap:10px;padding:0 14px;min-height:66px}
  .dieu{inset:66px 0 auto}
  .bia{min-height:auto;padding:72px 0 52px}
  .khoi{padding:60px 0}
  .thu-vien .plate.rong{grid-column:span 1;aspect-ratio:1}
}


/* ══════════════════════════════════════════════════════════════════
   PHẦN 4 — KHU NỘI BỘ
   Cùng hệ Poster Xanh nhưng tiết chế: thanh bên là mảng mực đậm,
   thẻ viền mực bóng cứng nhỏ hơn, mọi thứ phục vụ thao tác nhanh.
   ══════════════════════════════════════════════════════════════════ */

.khung-app{display:flex;min-height:100vh;background:var(--giay)}
.canh{width:282px;flex:none;background:var(--canh-nen);border-right:2px solid var(--muc);
  padding:16px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.canh .nhom{font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:rgba(243,237,250,.68);
  font-weight:700;padding:16px 12px 7px}
.canh a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  color:var(--canh-chu);font-size:.92rem;font-weight:600;text-decoration:none}
.canh a:hover{background:rgba(255,255,255,.13);text-decoration:none;color:#fff}
.canh a.hien{background:var(--la);color:#14251B;font-weight:800}
.canh a .dem{margin-left:auto;background:var(--hu);color:#3A2600;font-size:.7rem;font-weight:800;
  padding:1px 8px;border-radius:999px}
.canh a.hien .dem{background:#14251B;color:#fff}
.canh .hieu-app{display:flex;align-items:center;gap:12px;padding:10px 12px 18px;text-decoration:none}
.canh .hieu-app img{height:28px;width:auto;flex:none}
.canh .hieu-app .hieu-tim{display:none}
.canh .hieu-app .hieu-trang{display:block}
.canh .hieu-app span{font-family:var(--de);font-weight:800;font-size:.95rem;color:#fff;line-height:1.15}
.canh .hieu-app small{display:block;font-family:var(--than);font-weight:600;font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;color:#C9B3E3;margin-top:2px}
.than{flex:1;min-width:0;padding:28px 30px 70px}
.than-tieu{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:24px;flex-wrap:wrap}
.than-tieu h1{font-size:1.7rem;margin:0}

/* Ô số liệu trong khu nội bộ */
.so-lieu{background:var(--the);border:2px solid var(--muc);border-radius:var(--r);padding:18px 20px;
  box-shadow:3px 3px 0 var(--bong)}
.so-lieu .nhan{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muc-mo);font-weight:800}
.so-lieu .gia-tri{font-family:var(--de);font-size:clamp(1.6rem,3.6vw,2.05rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.1;margin:8px 0 3px;font-variant-numeric:tabular-nums}
.so-lieu .phu{font-size:.84rem;color:var(--muc-nhat)}
.so-lieu.tim{background:var(--tim);border-color:var(--muc);color:#fff}
.so-lieu.tim .gia-tri{color:#fff}
.so-lieu.tim .nhan{color:rgba(255,255,255,.72)}
.so-lieu.tim .phu{color:rgba(255,255,255,.86)}

/* Nhãn trạng thái: viên tem có viền */
.nhan-tt{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:8px;
  font-size:.75rem;font-weight:700;line-height:1.5;white-space:nowrap;
  border:1.5px solid color-mix(in srgb,var(--muc) 55%,transparent)}
.tt-xanh{background:var(--la-mo);color:var(--ok-chu)}
.tt-cam{background:var(--hu-mo);color:var(--cam-chu)}
.tt-do{background:var(--do-mo);color:var(--do-chu)}
.tt-tim{background:var(--tim-mo);color:var(--tim-sau)}
.tt-xam{background:var(--kem);color:var(--muc-nhat);border-color:var(--ke)}

/* Thông báo: viền mực + băng màu trái dày */
.bao-tin{padding:13px 17px;border-radius:11px;margin-bottom:18px;font-size:.93rem;
  border:2px solid var(--muc);border-left-width:8px;background:var(--the);box-shadow:3px 3px 0 var(--bong)}
.tin-xanh{border-left-color:#3FA523;background:var(--la-mo);color:var(--ok-chu)}
.tin-do{border-left-color:var(--do);background:var(--do-mo);color:var(--do-chu)}
.tin-cam{border-left-color:var(--hu);background:var(--hu-mo);color:var(--cam-chu)}
.tin-tim{border-left-color:var(--tim);background:var(--tim-mo);color:var(--tim-sau)}

/* Biểu đồ cột thuần CSS: cột lá viền mực như cột mực in */
.bieu-do{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:24px}
.bd-cot{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  height:100%;position:relative;min-width:0}
.bd-thanh{width:100%;max-width:46px;background:var(--la);border:2px solid var(--muc);border-bottom:0;
  border-radius:7px 7px 0 0;min-height:4px;transition:.2s}
.bd-cot:hover .bd-thanh{background:var(--xanh)}
.bd-so{position:absolute;top:-21px;left:50%;transform:translateX(-50%);font-size:.7rem;
  font-weight:800;color:var(--muc-nhat);white-space:nowrap;font-variant-numeric:tabular-nums}
.bd-nhan{font-size:.7rem;color:var(--muc-mo);margin-top:7px;white-space:nowrap;font-weight:600}
.bd-cot.rong .bd-thanh{background:var(--kem);border-color:var(--ke)}

/* Thanh tiến độ: ống viền mực, ruột lá */
.tien-do{height:13px;background:var(--the);border:2px solid var(--muc);border-radius:999px;overflow:hidden}
.tien-do i{display:block;height:100%;background:var(--la)}

/* Ô chọn điểm thu — gõ là lọc */
.dong-diem{padding:12px 14px;cursor:pointer;border-bottom:1.5px solid var(--ke);
  display:flex;gap:11px;align-items:center}
.dong-diem:last-child{border-bottom:0}
.dong-diem:hover,.dong-diem.sang{background:var(--la-mo)}
.dd-chu{flex:1;min-width:0}
.dd-ten{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-meta{font-size:.79rem;color:var(--muc-mo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dong-diem .nhan-tt{flex:none}
@media (max-width:560px){
  .dong-diem{flex-direction:column;align-items:flex-start;gap:5px}
  .dd-chu{width:100%} .dd-meta{white-space:normal}
}

/* ══════════════════════════════════════════════════════════════════
   PHẦN 5 — TIỆN ÍCH DÙNG CHUNG
   ══════════════════════════════════════════════════════════════════ */

.the-tieu{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:16px;flex-wrap:wrap}
.the-tieu h2,.the-tieu h3{margin:0}
.bang-cuon{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ma-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;
  background:var(--giay);border:1.5px solid var(--ke);padding:1px 7px;border-radius:6px;color:var(--tim-sau)}
.tam{text-align:center}
.dam{font-weight:700}
.tach{margin-top:26px}
.tach-nho{margin-top:14px}
.trong{padding:46px 20px;text-align:center;color:var(--muc-mo)}
.trong .icon{font-size:2.4rem;margin-bottom:10px;opacity:.5}
.nut-to{padding:16px 30px;font-size:1.02rem}
.nut-rong{width:100%;justify-content:center}
.nut-do{background:var(--do);color:#fff}
.nut-do:hover{background:#A82F22;color:#fff}
.nut-xanh{background:var(--xanh);color:#fff}
.nut-xanh:hover{background:var(--xanh);color:#fff}
.nut-phu{background:var(--the);color:var(--muc)}
.nut-phu:hover{background:var(--kem);color:var(--muc)}
.nut-nhe{background:transparent;color:var(--muc-nhat);border-color:var(--ke);box-shadow:none}
.nut-nhe:hover{background:var(--the);color:var(--muc);border-color:var(--muc);box-shadow:2px 2px 0 var(--bong);transform:translate(-1px,-1px)}
.luoi-2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.luoi-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.luoi-4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
tbody tr:hover{background:var(--la-mo)}
details summary{cursor:pointer}

@media (max-width:860px){
  .khung-app{flex-direction:column}
  .canh{width:auto;height:auto;position:sticky;top:0;z-index:40;border-right:0;
    border-bottom:2px solid var(--muc);display:flex;gap:4px;overflow-x:auto;padding:10px 12px;
    align-items:center}
  /* Thanh ngang chật chỗ: chỉ giữ logo ảnh, tên chữ đầy đủ nhường chỗ cho các mục */
  .canh .nhom,.canh .hieu-app small,.canh .hieu-app span{display:none}
  .canh .hieu-app{padding:0 6px 0 0;flex:none}
  .canh a{white-space:nowrap;padding:9px 14px}
  .than{padding:18px 16px 56px}
  .than-tieu h1{font-size:1.4rem}
}

@media (max-width:390px){
  .hieu img{height:30px}
  .hieu .ten{font-size:.95rem}
  .hieu .ten small{display:none}
  .hieu .vach{display:none}
}

@media print{
  .dau,.chan,.canh,.khong-in{display:none!important}
  body{background:#fff}
  .the,.so-lieu{box-shadow:none;border-color:#888}
}