/* =========================================================================
   BẢNG XANH — giao diện dựng theo bản thiết kế design_handoff_bang_xanh
   Phần 1: trang chủ (index.html của bản thiết kế)
   Phần 2: trang môn học & trang 35 tuần (mon.html + tuan.html)
   Phần 3: các trang chức năng khác, dùng lại đúng bộ màu đó
   ========================================================================= */

/* ===================== BỘ MÀU & KÍCH THƯỚC CHUNG =====================
   Đổi màu chủ đạo của cả app chỉ cần sửa mấy dòng dưới đây.            */
:root{
  --xanh:#16a34a;         /* xanh lá chính */
  --xanh-sang:#22a55b;
  --xanh-dam:#15803d;
  --xanh-nhat:#e8f6ee;
  --lam:#2f6fed;          /* xanh dương phụ */
  --do:#dc2626;
  /* Nền phải đủ đậm hơn thẻ trắng thì thẻ mới nổi. Chênh khoảng 8–9%
     độ sáng là vừa: vẫn là xanh nhạt nhưng nội dung không bị bệt. */
  --nen:#dfeee7;          /* nền trang — xanh bạc hà nhạt */
  --the:#fff;            /* nền thẻ */
  --vien:#d7e7de;         /* viền thẻ, đậm hơn nền để thấy rõ mép */
  --vien-dam:#c8dcd1;
  --chu:#1e293b;
  --chu-nhat:#5b7386;
  --chu-mo:#758d95;
  /* Đổ bóng ngả xanh cho hợp nền, và đủ đậm để thấy được */
  --bong-1:0 1px 2px rgba(14,58,40,.07),0 3px 8px rgba(14,58,40,.06);
  --bong-2:0 6px 16px rgba(14,58,40,.13);
  --bong-3:0 14px 30px rgba(14,58,40,.16);
  --bo:16px;              /* bo góc thẻ */
  --bo-lon:20px;
  /* Font riêng cho tiêu đề — Be Vietnam Pro dựng riêng cho tiếng Việt nên
     dấu thanh không chồng lên chữ khi phóng to. Chữ thân bài giữ nguyên. */
  --font-td:'Be Vietnam Pro','UTM Avo','Nunito','Segoe UI',sans-serif;
}

/* Hệ tiêu đề dùng chung một font, một cách giãn chữ */
.hero h1,.sec-title h2,.page-head h1,.subj-hero h1,.hk h2,.logo-name,
.tuannay .txt h3,.homeroom .info h3,.modal-head h3,.guide h3,.empty-box h4{
  font-family:var(--font-td);letter-spacing:-.018em}

/* ===================== PHẦN 1 — TRANG CHỦ ===================== */
*{box-sizing:border-box}
body{margin:0;background:var(--nen);font-family:'UTM Avo','Nunito','Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;color:var(--chu)}
a{color:var(--xanh);text-decoration:none}a:hover{color:var(--xanh-dam)}
button{font-family:inherit;cursor:pointer;border:none}
input,select,textarea{font-family:inherit}
img{max-width:100%}

/* Viền sáng khi dùng bàn phím (Tab) — trước đây không thấy đang ở đâu */
:focus{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid rgba(34,165,91,.55);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
h1,h2,h3,h4{margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.layout{max-width:1400px;margin:0 auto;display:flex;gap:20px;padding:20px 24px 0;align-items:flex-start}

/* --- icon ---
   Dùng svg[class^="ic"] chứ không liệt kê từng cỡ, để gọi ic() với cỡ chưa
   có sẵn thì icon vẫn nét viền bình thường, không bị tô đen đặc. */
svg[class^="ic"]{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ic13{width:13px;height:13px}.ic14{width:14px;height:14px}.ic15{width:15px;height:15px}.ic16{width:16px;height:16px}
.ic17{width:17px;height:17px}.ic19{width:19px;height:19px}.ic22{width:22px;height:22px}.ic24{width:24px;height:24px}
.fill,.fill-star{fill:currentColor;stroke:none}
.fill-star{color:#ffd34d}

/* --- Sidebar --- */
aside{width:240px;flex-shrink:0;display:flex;flex-direction:column;gap:16px}
.side-card{background:#fff;border-radius:18px;padding:14px 12px;box-shadow:var(--bong-1)}
.logo{display:flex;align-items:center;gap:10px;padding:2px 4px 12px;color:inherit}
.logo:hover{color:inherit}
.logo-name{font-size:20px;font-weight:700;color:var(--xanh);letter-spacing:-.3px}
.logo-sub{font-size:11px;color:var(--chu-nhat);font-weight:600}
nav{display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;color:#475569;font-weight:700;font-size:14.5px;cursor:pointer}
.nav-item:hover{background:#f1f5f9;color:var(--xanh)}
.nav-item.active{padding:12px 14px;background:linear-gradient(90deg,#2f6fed,#3b82f6);color:#fff;font-weight:700;font-size:15px;box-shadow:0 4px 10px rgba(47,111,237,.3)}
.nav-item svg{color:var(--chu-nhat)}.nav-item.active svg{color:#fff}
.nav-item:hover svg{color:var(--xanh)}.nav-item.active:hover{color:#fff}.nav-item.active:hover svg{color:#fff}
.pro-card{background:linear-gradient(180deg,#effaf2,#e4f6ea);border:1px solid #d3eedd;border-radius:18px;padding:16px 16px 18px}
.support-card{background:#fff;border:1px solid var(--vien-dam);border-radius:18px;padding:16px}
.card-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.card-head .ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.card-head span.tt{font-weight:700;font-size:15.5px}
.card-body{font-size:13px;font-weight:600;line-height:1.55;margin-bottom:12px}
.btn-green{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(90deg,#22a55b,var(--xanh));color:#fff;border-radius:10px;padding:10px 16px;font-weight:700;font-size:14px;width:100%;box-shadow:0 3px 8px rgba(34,165,91,.3)}
.btn-green:hover{filter:brightness(1.05);color:#fff}
.btn-outline{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1.5px solid #cbd5e1;border-radius:10px;padding:8px 20px;font-weight:700;font-size:13.5px;color:#334155}
.btn-outline:hover{border-color:var(--xanh);color:var(--xanh)}
.teacher{width:100%;border-radius:16px;display:block;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 86%,transparent 100%)}
.sidebar-backdrop{display:none}

/* Cột trái dính theo màn hình: menu luôn trong tầm mắt khi cuộn 35 tuần,
   và ảnh cô giáo tự co cho vừa chiều cao còn lại thay vì bị mép dưới
   màn hình cắt ngang mặt. */
@media (min-width:900px){
  aside{position:sticky;top:20px;max-height:calc(100dvh - 26px);overflow:hidden}
  .side-card,.pro-card,.support-card{flex-shrink:0}
  /* Còn bao nhiêu chỗ thì ảnh lấy bấy nhiêu, cắt bớt phần chân chứ không
     bóp méo. Đáy ảnh vốn đã mờ dần nên chỗ cắt không lộ. */
  .teacher{margin-top:auto;flex:0 1 auto;min-height:0;max-height:230px;
    object-fit:cover;object-position:center top}
}
/* Màn hình thấp thì không còn chỗ cho ảnh, ẩn hẳn còn hơn để hở một sợi */
@media (min-width:900px) and (max-height:980px){ .teacher{display:none} }

/* --- Main --- */
main{flex:1;min-width:0;display:flex;flex-direction:column;gap:22px}
#view{display:flex;flex-direction:column;gap:22px}
.topbar{display:flex;align-items:center;gap:14px}
.search{flex:1;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--vien-dam);border-radius:999px;padding:8px 8px 8px 18px;color:var(--chu-mo)}
.search:focus-within{border-color:#22a55b;box-shadow:0 0 0 3px rgba(34,165,91,.12)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px;font-weight:600;color:#1e293b}
.search input::placeholder{color:var(--chu-mo);font-weight:600}
.search-go{width:32px;height:32px;border-radius:999px;background:#e8f6ee;color:var(--xanh);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.search-go:hover{background:var(--xanh);color:#fff}
.btn-pro{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,#22a55b,var(--xanh));color:#fff;border-radius:999px;padding:10px 18px;font-weight:700;font-size:14px;box-shadow:0 3px 8px rgba(34,165,91,.3);white-space:nowrap}
.btn-pro:hover{filter:brightness(1.05);color:#fff}
.bell{position:relative;cursor:pointer;color:#475569;background:none;display:flex;align-items:center}
.bell:hover{color:var(--xanh)}
.badge{position:absolute;top:-6px;right:-7px;background:#ef4444;color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;border:2px solid var(--nen)}
.badge[data-empty="1"]{display:none}
.user{display:flex;align-items:center;gap:9px;cursor:pointer;color:#1e293b}
.user:hover{color:var(--xanh)}
.user img{width:38px;height:38px;border-radius:999px;object-fit:cover;border:2px solid #fff;box-shadow:0 1px 4px rgba(30,64,120,.15)}
.user b{font-weight:700;font-size:14.5px;white-space:nowrap}
.user .chev{color:var(--chu-nhat)}

/* --- Hero ---
   Nền nhiều lớp: hai quầng sáng mềm (cam ở góc trên phải sau ảnh, xanh ở
   góc dưới trái) chồng lên nền chuyển sắc, tạo chiều sâu thay vì một mảng
   phẳng.                                                                */
.hero{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--bong-1);
  background:
    radial-gradient(660px 420px at 86% 8%, rgba(255,206,150,.55), transparent 62%),
    radial-gradient(520px 400px at 2% 96%, rgba(160,232,196,.5), transparent 64%),
    linear-gradient(104deg,#f6faff 0%,#e7effd 54%,#dde9fb 100%);
  padding:36px 0 28px 36px;min-height:352px}
.hero-img{position:absolute;right:0;bottom:0;width:min(448px,44%);height:auto;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%);mask-image:linear-gradient(90deg,transparent 0%,#000 14%)}
.hero-content{position:relative;max-width:min(470px,52%);display:flex;flex-direction:column;align-items:flex-start}

/* Nhãn nhỏ phía trên tiêu đề */
.hero-nhan{display:inline-flex;align-items:center;gap:7px;margin-bottom:15px;
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.95);border-radius:999px;
  padding:6px 15px;font-family:var(--font-td);font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#2a5da8;
  box-shadow:0 2px 8px rgba(14,58,40,.08)}
.hero-nhan svg{color:var(--xanh-sang)}

.hero h1{margin:0 0 18px;font-family:var(--font-td);
  font-size:clamp(26px,2.9vw,41px);line-height:1.26;font-weight:800;
  color:#12335f;letter-spacing:-.022em;text-wrap:balance}
/* Cụm chữ nhấn tô chuyển sắc đúng bộ màu logo PowerPoint.
   nowrap để cụm nhấn không bị ngắt đôi giữa hai dòng. */
.hero h1 em{font-style:normal;white-space:nowrap;
  background:linear-gradient(100deg,#F2712F 0%,#E8434F 50%,#E93E82 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

.checks{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.checks div{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;font-weight:600;color:#2f4e79;line-height:1.5}
.check-ic{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.hero-nut{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.btn-cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(100deg,#34b86a,#16a34a);color:#fff;border-radius:999px;padding:14px 28px;font-family:var(--font-td);font-weight:700;font-size:15.5px;box-shadow:0 6px 18px rgba(22,163,74,.36)}
.btn-cta:hover{filter:brightness(1.06);color:#fff;box-shadow:0 8px 22px rgba(22,163,74,.44)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.85);
  border:1.5px solid rgba(42,93,168,.22);color:#2a5da8;border-radius:999px;
  padding:12px 22px;font-family:var(--font-td);font-weight:700;font-size:14.5px}
.btn-ghost:hover{background:#fff;border-color:#2a5da8;color:#2a5da8}
.features{display:flex;gap:clamp(10px,2vw,26px);flex-wrap:wrap;max-width:100%}
.feature{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(96px,28%);text-align:center}
.feature .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff}
.feature span.lb{font-size:11.5px;font-weight:700;color:#3f5878;line-height:1.4}
.dots{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:7px}
.dots span{width:9px;height:9px;border-radius:999px;background:#b9cdec;cursor:pointer}
.dots span.on{background:#2f6fed}

/* --- Lối tắt --- */
.quick{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.quick-card{background:#fff;border:1px solid var(--vien);border-radius:16px;padding:18px 8px 14px;display:flex;flex-direction:column;align-items:center;gap:11px;cursor:pointer;box-shadow:var(--bong-1);transition:.15s}
.quick-card:hover{box-shadow:0 6px 16px rgba(30,64,120,.12);transform:translateY(-2px)}
.quick-card .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff}
.quick-card .lb{font-size:13px;font-weight:700;color:#334155;text-align:center}
.qai{font-size:17px;font-weight:700;color:#fff}

/* --- Dải "Tuần này" ngoài trang chủ --- */
.tuannay{display:flex;align-items:center;gap:20px;flex-wrap:wrap;border-radius:var(--bo-lon);padding:20px 26px;
  background:linear-gradient(110deg,#e4f6ea 0%,#e8f2ff 100%);border:1px solid #d3eedd;box-shadow:var(--bong-1)}
.tuannay .so{width:64px;height:64px;flex-shrink:0;border-radius:20px;display:flex;align-items:center;justify-content:center;
  font-size:29px;font-weight:700;color:#fff;background:linear-gradient(135deg,#2fae62,var(--xanh));
  box-shadow:0 6px 16px rgba(34,165,91,.32)}
.tuannay .txt{flex:1;min-width:190px}
.tuannay .txt h3{font-size:19px;font-weight:700;color:#14532d}
.tuannay .txt p{font-size:13.5px;font-weight:600;color:#3f6b52;margin-top:4px;line-height:1.5}
.tuannay .row-btn{flex-shrink:0}

/* --- Đầu mục --- */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.sec-title{display:flex;align-items:center;gap:10px;min-width:0}
.sec-title .bar{width:4px;height:22px;border-radius:4px;background:#22a55b;flex-shrink:0}
.sec-title h2{margin:0;font-size:20px;font-weight:700;color:#1e293b}
.see-all{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;white-space:nowrap}
.see-all .chev{width:24px;height:24px;border-radius:999px;background:#e8f6ee;display:flex;align-items:center;justify-content:center;color:var(--xanh)}
.see-all .chev svg{stroke-width:3}

/* --- Thẻ môn học --- */
.subjects{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.subj{position:relative;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--vien);cursor:pointer;box-shadow:var(--bong-1);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;display:flex;flex-direction:column;color:inherit}
.subj:hover{box-shadow:0 12px 26px rgba(30,64,120,.14);transform:translateY(-3px);border-color:transparent;color:inherit}
.subj .top{padding:16px 12px 10px;text-align:center;position:relative}
.subj .name{font-size:20px;font-weight:700;margin-bottom:8px;letter-spacing:.2px;line-height:1.25;min-height:2.5em;display:flex;align-items:center;justify-content:center}
.subj img{width:100%;height:132px;object-fit:contain;display:block;margin:0 auto;mix-blend-mode:multiply}
.subj .foot{margin-top:auto;padding:12px 14px 13px;border-top:1px solid #f1f5f9}
.subj .cta{display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:13.5px;font-weight:700;margin-top:9px}
.subj .cta .go{width:26px;height:26px;border-radius:999px;background:#f1f5f9;color:inherit;display:flex;align-items:center;justify-content:center;transition:.18s}
.subj:hover .cta .go{background:currentColor}
.subj:hover .cta .go svg{color:#fff}
.subj .cnt{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.9);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;color:#475569;box-shadow:0 1px 3px rgba(30,64,120,.1)}

/* --- Bộ sưu tập --- */
.cols{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.col-card{background:#fff;border:1px solid var(--vien);border-radius:14px;padding:8px 8px 12px;cursor:pointer;box-shadow:var(--bong-1);transition:.15s;display:block;color:inherit}
.col-card:hover{box-shadow:0 8px 20px rgba(30,64,120,.13);transform:translateY(-2px);color:inherit}
.col-card img{width:100%;height:106px;object-fit:cover;border-radius:9px;display:block;margin-bottom:10px}
.col-card .nm{font-size:13.5px;font-weight:700;padding:0 4px;line-height:1.35}
.col-card .ct{font-size:12px;font-weight:600;color:var(--chu-mo);padding:3px 4px 0}

/* --- Thẻ gần đây --- */
.recents{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.recent{background:#f4f8fc;border:1px solid #e7eef5;border-radius:14px;padding:14px;cursor:pointer;display:block;color:inherit;position:relative}
.recent:hover{background:#fff;box-shadow:0 6px 16px rgba(30,64,120,.1);color:inherit}
.recent .row{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.recent .ppt{width:36px;height:36px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9.5px;font-weight:700;box-shadow:0 2px 6px rgba(30,64,120,.18)}
.recent .tt{font-size:13.5px;font-weight:700;line-height:1.35}
.recent .mt{font-size:12px;font-weight:700;color:var(--chu-nhat);margin-top:3px}
.recent .tm{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--chu-mo)}

/* --- Banner --- */
.banner{background:#e4f6ea;border:1px solid #d3eedd;border-radius:12px;padding:11px 18px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:13.5px;color:#1e5631;font-weight:700;text-align:center}
.banner b{font-weight:700}
.banner.warn{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.banner a{text-decoration:underline}

/* --- Tab dưới --- */
.tabs{position:sticky;bottom:0;max-width:1400px;margin:14px auto 0;background:#fff;border-top:1px solid #e7eef5;border-radius:22px 22px 0 0;box-shadow:0 -6px 20px rgba(30,64,120,.08);display:flex;justify-content:space-around;padding:10px 40px 12px;z-index:40}
.tab{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;color:var(--chu-mo);min-width:64px}
.tab:hover{color:var(--xanh)}
.tab.active{color:var(--xanh)}
.tab span{font-size:12px;font-weight:700}
.m-logo{display:none;align-items:center;gap:10px}
.m-menu{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--vien-dam);color:#475569;display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media (min-width:900px){.tabs{display:none}}


/* ============ PHẦN 2 — TRANG MÔN HỌC & TRANG KHỐI LỚP ============ */

/* Thanh điều hướng phụ: nút quay lại + đường dẫn */
.sub-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sub-nav .crumb{margin-left:auto}
.back{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--vien-dam);border-radius:999px;padding:8px 16px;font-weight:700;font-size:13.5px;color:#334155;box-shadow:var(--bong-1)}
.back:hover{border-color:var(--xanh);color:var(--xanh)}

/* Hero môn học / khối lớp */
.subj-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:26px;border:1px solid rgba(15,32,53,.05);border-radius:22px;padding:28px 32px;box-shadow:var(--bong-1)}
.subj-hero::after{content:"";position:absolute;right:-80px;top:-110px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none}
.subj-hero .art{position:relative;z-index:1;width:118px;height:118px;flex-shrink:0;border-radius:28px;background:rgba(255,255,255,.72);box-shadow:0 8px 20px rgba(30,64,120,.1);display:flex;align-items:center;justify-content:center}
.subj-hero .art img{width:88px;height:88px;object-fit:contain;mix-blend-mode:multiply}
.subj-hero .art .n{font-size:52px;font-weight:700;line-height:1}
.subj-hero .txt{position:relative;z-index:1;flex:1;min-width:0}
.subj-hero .eyebrow{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.8);border-radius:999px;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-bottom:11px}
.subj-hero h1{font-size:29px;font-weight:700;letter-spacing:-.4px;line-height:1.22}
.subj-hero p{margin-top:8px;font-size:14px;font-weight:600;color:#4b6079;max-width:600px;line-height:1.6}
.hero-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hstat{background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.95);border-radius:14px;padding:8px 16px;min-width:94px;box-shadow:0 2px 6px rgba(30,64,120,.06)}
.hstat b{display:block;font-size:20px;font-weight:700;line-height:1.2}
.hstat span{font-size:11.5px;font-weight:700;color:var(--chu-nhat)}
.subj-hero.sm{padding:22px 26px;gap:20px}
.subj-hero.sm .art{width:96px;height:96px;border-radius:24px}
.subj-hero.sm .art img{width:70px;height:70px}
.subj-hero.sm .art .n{font-size:42px}
.subj-hero.sm h1{font-size:25px}

/* Thanh tiến độ dùng chung */
.prog{display:block;height:7px;border-radius:99px;background:rgba(15,32,53,.09);overflow:hidden}
.prog i{display:block;height:100%;border-radius:99px;transition:width .45s ease}
.hero-prog{margin-top:18px;max-width:470px}
.hero-prog .lbrow{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:700;color:#4b6079;margin-bottom:6px}

/* Thẻ khối lớp */
.grades{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.grade{position:relative;background:#fff;border:1px solid var(--vien);border-radius:18px;padding:20px 18px 18px;cursor:pointer;box-shadow:var(--bong-1);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;display:block;color:inherit;overflow:hidden}
.grade::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--mau,#22a55b);opacity:0;transition:.18s}
.grade:hover{box-shadow:0 12px 26px rgba(30,64,120,.13);transform:translateY(-3px);border-color:transparent;color:inherit}
.grade:hover::before{opacity:1}
.grade .num{width:54px;height:54px;border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:700;color:#fff;box-shadow:0 6px 14px rgba(30,64,120,.16);margin-bottom:14px}
.grade .lb{display:block;font-size:17px;font-weight:700}
.grade .sub{display:block;font-size:12.5px;font-weight:700;color:var(--chu-mo);margin-top:3px}
.grade .prog{margin-top:14px}
.grade .pct{display:block;font-size:11.5px;font-weight:700;color:var(--chu-mo);margin-top:7px}
.grade .go{position:absolute;right:16px;top:20px;width:30px;height:30px;border-radius:999px;background:#f1f5f9;color:var(--chu-mo);display:flex;align-items:center;justify-content:center;transition:.18s}
.grade:hover .go{background:var(--mau,#22a55b);color:#fff}

/* Thẻ lớp chủ nhiệm */
.homeroom{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:linear-gradient(120deg,#effaf2,#e8f2ff);border:1px solid #d9ecdf;border-radius:18px;padding:20px 22px}
.homeroom .av{width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,#22a55b,var(--xanh));color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;flex-shrink:0;box-shadow:0 6px 14px rgba(34,165,91,.28)}
.homeroom .info{flex:1;min-width:180px}
.homeroom .info h3{font-size:17px;font-weight:700}
.homeroom .info p{font-size:13px;font-weight:600;color:#5b7386;margin-top:3px}

/* Thanh lọc trên trang 35 tuần */
.week-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.week-bar .chips{gap:8px}
.week-bar .nhay{margin-left:auto;background:var(--xanh-nhat);border-color:#c9e9d7;color:var(--xanh)}
.week-bar .nhay:hover{background:var(--xanh);border-color:transparent;color:#fff}
.tuan-wrap{display:flex;flex-direction:column;gap:22px}
.trong-loc{display:none;font-size:13.5px;font-weight:600;color:var(--chu-mo);padding:14px 2px}
/* Ô đang khoá cũng là ô CÓ BÀI nên nằm cùng nhóm với ô đã mở */
.tuan-wrap[data-che-do="co"]  .w-item.none{display:none}
.tuan-wrap[data-che-do="chua"] .w-item.has,
.tuan-wrap[data-che-do="chua"] .w-item.lock{display:none}
/* Hai câu khác nhau cho hai bộ lọc: lọc "đã có bài" mà học kì trống thì
   nói kho đang dựng; lọc "đang dựng" mà không còn ô nào thì khen là đủ. */
.tuan-wrap[data-che-do="co"]  .weeks:not(:has(.w-item.has)):not(:has(.w-item.lock)) ~ .t-co,
.tuan-wrap[data-che-do="chua"] .weeks:not(:has(.w-item.none)) ~ .t-chua{display:block}

/* Lưới 35 tuần */
.hk{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.hk .bar{width:4px;height:22px;border-radius:4px;background:#22a55b}
.hk h2{margin:0;font-size:19px;font-weight:700}
.hk .ct{font-size:13px;font-weight:700;color:var(--chu-mo)}
/* Ô tuần: khối nhỏ, có cạnh dưới dày nên nhìn nổi lên khỏi trang;
   rê chuột thì nhấc cao, bấm xuống thì lún như nút bấm thật.        */
.weeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:11px;padding-top:12px}
.w-item{position:relative}
.week{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  width:100%;height:100%;padding:11px 7px 10px;border-radius:15px;font:inherit;text-align:center;
  background:linear-gradient(180deg,#fff 0%,#f6fbf8 100%);border:1px solid var(--vien);color:inherit;
  box-shadow:0 5px 0 var(--canh,#d3e0ee), 0 7px 14px rgba(30,64,120,.13);
  transition:transform .13s ease,box-shadow .13s ease,border-color .13s ease}
.week:hover{transform:translateY(-3px);color:inherit;
  box-shadow:0 8px 0 var(--canh,#c6d6e8), 0 15px 26px rgba(30,64,120,.2)}
.week:active{transform:translateY(4px);
  box-shadow:0 1px 0 var(--canh,#d3e0ee), 0 2px 4px rgba(30,64,120,.16)}

.ppt-ic{width:30px;height:30px;display:block;flex-shrink:0}
/* Ô tuần có kèm giáo án Word: biểu tượng W nhỏ nép sau biểu tượng PowerPoint */
.bo-ic{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bo-ic .word-ic{width:19px;height:19px;display:block;margin-left:-7px;margin-top:11px;
  filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 1px 2px rgba(0,0,0,.18))}
.week.lock .bo-ic .word-ic,.week.lock .ppt-ic{opacity:.85}
.nhan-word{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;
  color:#1e5fa8;background:#e8f1fc;border:1px solid #c5ddf6;border-radius:99px;padding:1px 6px;margin-top:2px}
.week .lb{font-size:13px;font-weight:700;line-height:1.2}
/* 19/8/2026 — cô Hoàng Mai chốt: MỌI Ô TUẦN NHÌN NHƯ NHAU.
   Trước đây ô có bài màu vàng, ô chưa có màu xám viền đứt, icon bạc màu;
   mở một môn ra là thấy ngay kho còn thưa. Nay chung một kiểu, chỉ khác
   nhau ở tên bài in dưới số tuần.                                      */
.week .lb{color:var(--mau)}
.week .tenbai{font-size:10px;font-weight:600;color:var(--chu-mo);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Ô tuần đang dạy trong năm học */
.w-item.nay .week{border-color:var(--mau,#22a55b);border-width:2px;padding:10px 6px 9px;background:#fff}
.w-item.nay .week.none{border-style:solid}
.nhan-nay{position:absolute;left:50%;top:-8px;transform:translateX(-50%);white-space:nowrap;
  background:var(--mau,#22a55b);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.3px;
  border-radius:999px;padding:2px 9px;box-shadow:0 3px 8px rgba(30,64,120,.22);z-index:2}
.w-item.chop .week{animation:chop 1.6s ease}
@keyframes chop{
  0%,100%{box-shadow:0 3px 0 var(--canh,#dde7f2), 0 5px 11px rgba(30,64,120,.10)}
  30%,70%{box-shadow:0 6px 0 var(--canh,#cfdcea), 0 0 0 8px rgba(34,165,91,.22)}
}

/* nút phụ trên ô tuần — ẩn cho gọn, hiện khi rê chuột hoặc trên điện thoại */
.w-tools{position:absolute;top:5px;right:5px;display:flex;gap:3px;opacity:0;transition:.15s;
  background:rgba(255,255,255,.94);border-radius:999px;padding:2px;box-shadow:0 1px 4px rgba(30,64,120,.16)}
.week:hover+.w-tools,.w-item:hover .w-tools,.w-tools:focus-within,.w-tools.show{opacity:1}
.w-btn{width:21px;height:21px;border-radius:999px;background:#f1f5f9;color:var(--chu-mo);display:flex;align-items:center;justify-content:center}
.w-btn svg{width:12px;height:12px}
.w-btn:hover{background:#e8f6ee;color:var(--xanh)}
.w-btn.on{color:#ec4899;background:#fdf2f8}
.w-btn.on svg{fill:currentColor;stroke:none}
@media (hover:none){.w-tools{opacity:1}}


/* ============ PHẦN 3 — CÁC TRANG CHỨC NĂNG KHÁC ============ */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.page-head h1{font-size:24px;font-weight:700}
.page-head p{font-size:13.5px;font-weight:600;color:var(--chu-nhat);margin-top:4px}
.crumb{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--chu-mo);flex-wrap:wrap}
.crumb a{color:var(--chu-nhat)}.crumb a:hover{color:var(--xanh)}
.crumb b{color:#1e293b}
.crumb svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.card{background:#fff;border:1px solid var(--vien);border-radius:16px;box-shadow:var(--bong-1)}
.pad{padding:18px}
.muted{color:var(--chu-mo);font-weight:600}
.small{font-size:12.5px}

/* Danh sách bài giảng kèm tên môn (Yêu thích, Tìm kiếm, Tuần học, Bộ sưu tập) */
.wlist{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wcard{background:#f4f8fc;border:1px solid #e7eef5;border-radius:14px;position:relative;transition:.15s;overflow:hidden}
.wcard:hover{background:#fff;box-shadow:0 6px 16px rgba(30,64,120,.1)}
.wcard>a,.wcard>button{display:block;width:100%;text-align:left;padding:14px;color:inherit;background:none;font:inherit}
.wcard .row{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;padding-right:28px}
.wcard .ppt{width:36px;height:36px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9.5px;font-weight:700;box-shadow:0 2px 6px rgba(30,64,120,.18)}
.wcard .tt{font-size:14px;font-weight:700;line-height:1.3}
.wcard .mt{font-size:12px;font-weight:700;color:var(--chu-nhat);margin-top:3px}
.wcard .tm{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--xanh)}
.wcard.no{background:#fbfdff;border-style:dashed}
.wcard.no .ppt{background:var(--vien-dam);color:var(--chu-mo);box-shadow:none}
.wcard.no .tm{color:var(--chu-mo)}
.wcard .w-tools{opacity:1;top:9px;right:9px}

/* Chỉ mục tuần */
.week-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;padding-top:10px}
.wi{position:relative;background:#fff;border:1px solid var(--vien);border-radius:13px;padding:11px 6px;text-align:center;box-shadow:var(--bong-1);transition:.15s;color:inherit}
.wi:hover{box-shadow:0 6px 16px rgba(30,64,120,.12);transform:translateY(-2px);color:inherit}
.wi b{display:block;font-size:21px;font-weight:700;color:var(--chu-mo)}
.wi small{font-size:11px;font-weight:700;color:var(--chu-mo)}
.wi.has{background:var(--xanh-nhat);border-color:#d3eedd}
.wi.has b{color:var(--xanh)}.wi.has small{color:var(--xanh-sang)}
.wi.nay{background:linear-gradient(135deg,#2fae62,var(--xanh));border-color:transparent;
  box-shadow:0 6px 16px rgba(34,165,91,.3)}
.wi.nay b,.wi.nay small{color:#fff}

/* Chip lọc */
.chips{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--vien-dam);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:700;color:#475569}
.chip:hover{border-color:#22a55b;color:var(--xanh)}
.chip.on{background:linear-gradient(90deg,#22a55b,var(--xanh));border-color:transparent;color:#fff;box-shadow:0 3px 8px rgba(34,165,91,.25)}
.chip.on:hover{color:#fff}
.chip svg{width:14px;height:14px}
.count{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--chu-mo)}

/* Lịch dạy */
.tt-wrap{overflow-x:auto;padding:14px}
.tt-wrap table{border-collapse:separate;border-spacing:9px;min-width:780px;width:100%}
.tt-wrap th{font-size:12.5px;font-weight:700;color:var(--chu-nhat);padding-bottom:2px}
.tt-wrap th.rw{text-align:right;padding-right:4px;white-space:nowrap;color:var(--chu-mo)}
.tt-wrap td{vertical-align:top;width:14%}
.slot{background:#f4f8fc;border:1px solid #e7eef5;border-left:4px solid #2f6fed;border-radius:12px;padding:10px;min-height:88px;display:flex;flex-direction:column;gap:4px}
.slot .s1{font-size:13px;font-weight:700;line-height:1.3}
.slot .s2{font-size:11.5px;font-weight:600;color:var(--chu-nhat);line-height:1.35}
.chon-tuan{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#334155}
.chon-tuan .input{width:auto;padding:8px 12px;border-radius:999px;font-size:13.5px;font-weight:700}
.slot .s3{display:flex;gap:6px;margin-top:auto;padding-top:6px}
.slot-empty{width:100%;min-height:88px;background:#fbfdff;border:1.5px dashed #dbe6f0;border-radius:12px;color:#b6c6d8;display:flex;align-items:center;justify-content:center}
.slot-empty:hover{border-color:#22a55b;color:#22a55b}
.mini{display:inline-flex;align-items:center;gap:4px;background:#e8f6ee;color:var(--xanh);border-radius:8px;padding:5px 9px;font-size:11.5px;font-weight:700}
.mini:hover{background:var(--xanh);color:#fff}
.mini.blue{background:#e9f0fe;color:#2f6fed}
.mini.blue:hover{background:#2f6fed;color:#fff}
.mini.red{background:#fef2f2;color:#e11d48}
.mini.red:hover{background:#e11d48;color:#fff}

/* Hướng dẫn */
.guides{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
.guide h3{font-size:16px;font-weight:700;margin-bottom:12px}
.guide li{display:flex;gap:10px;font-size:13.5px;font-weight:600;color:#475569;line-height:1.5;padding:6px 0}
.guide .num{width:22px;height:22px;flex-shrink:0;border-radius:999px;color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* Bảng ký hiệu trên trang hướng dẫn */
.kyhieu li{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px dashed var(--vien)}
.kyhieu li:last-child{border:none}
.kyhieu .kh{width:52px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.kyhieu .kh .ppt-ic{width:28px;height:28px}
.kyhieu .kh.mo .ppt-ic{filter:grayscale(1);opacity:.42}
.kyhieu .kh .w-btn{cursor:default}
.kyhieu b{display:block;font-size:14px;font-weight:700}
.kyhieu span:not(.kh):not(.nhan-mau){font-size:13px;font-weight:600;color:var(--chu-nhat);line-height:1.55}
.nhan-mau{background:var(--xanh-sang);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.3px;
  border-radius:999px;padding:3px 9px;white-space:nowrap}

.faq li{padding:12px 0;border-bottom:1px dashed var(--vien);display:flex;flex-direction:column;gap:4px}
.faq li:last-child{border:none}
.faq b{font-size:14px;font-weight:700}
.faq span{font-size:13px;font-weight:600;color:var(--chu-nhat);line-height:1.55}
.code{background:#0f2035;color:#dbeafe;border-radius:12px;padding:14px;overflow-x:auto;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;line-height:1.75;white-space:pre;margin:0}
code{background:var(--nen);border:1px solid var(--vien-dam);border-radius:6px;padding:2px 6px;font-family:ui-monospace,Consolas,monospace;font-size:12.5px}

/* Thống kê */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:#fff;border:1px solid var(--vien);border-radius:14px;padding:15px 16px;box-shadow:var(--bong-1)}
.stat b{display:block;font-size:25px;font-weight:700;color:var(--xanh)}
.stat span{font-size:12px;font-weight:700;color:var(--chu-mo)}

/* Form */
.form{display:grid;gap:14px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:#334155}
.hint{font-size:12.5px;font-weight:600;color:var(--chu-mo);margin-top:6px;line-height:1.55}
.input{width:100%;padding:11px 14px;border-radius:11px;border:1px solid var(--vien-dam);background:#fff;outline:0;font-size:14px;font-weight:600}
.input:focus{border-color:#22a55b;box-shadow:0 0 0 3px rgba(34,165,91,.12)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.row-btn{display:flex;gap:10px;flex-wrap:wrap}
.btn-blue{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(90deg,#2f6fed,#3b82f6);color:#fff;border-radius:999px;padding:10px 20px;font-weight:700;font-size:14px;box-shadow:0 3px 8px rgba(47,111,237,.28)}
.btn-blue:hover{filter:brightness(1.05);color:#fff}
.btn-red{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1.5px solid #fecaca;color:#dc2626;border-radius:999px;padding:9px 18px;font-weight:700;font-size:13.5px}
.btn-red:hover{background:#fef2f2;color:#dc2626}
.btn-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1.5px solid #cbd5e1;color:#334155;border-radius:999px;padding:9px 18px;font-weight:700;font-size:13.5px}
.btn-pill:hover{border-color:var(--xanh);color:var(--xanh)}

/* Khung xem bài giảng */
.viewer{background:#0f2035;border-radius:14px;overflow:hidden;aspect-ratio:16/9}
.viewer iframe{width:100%;height:100%;border:0;display:block}

/* Trạng thái rỗng */
.empty-box{background:#fff;border:1px solid var(--vien);border-radius:16px;padding:26px;display:flex;align-items:center;gap:22px;box-shadow:var(--bong-1)}
.empty-box img{width:170px;border-radius:12px;flex-shrink:0}
.empty-box h4{font-size:16px;font-weight:700;margin-bottom:6px}
.empty-box p{font-size:13.5px;font-weight:600;color:var(--chu-nhat);line-height:1.6;margin-bottom:12px}

/* Nhãn */
.tag{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;background:#e9f0fe;color:#2f6fed}
.tag.ok{background:#e4f6ea;color:var(--xanh)}
.tag.warn{background:#fff7ed;color:#c2410c}
.tag svg{width:13px;height:13px}

/* Hộp thoại */
.modal-bg{position:fixed;inset:0;background:rgba(15,32,53,.5);backdrop-filter:blur(3px);z-index:100;display:grid;place-items:center;padding:16px}
.modal{background:#fff;border-radius:18px;width:min(560px,100%);max-height:90vh;overflow:auto;box-shadow:0 20px 50px rgba(15,32,53,.3)}
.modal-wide{width:min(1000px,100%)}
.modal-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--vien);position:sticky;top:0;background:#fff;z-index:2}
.modal-head h3{font-size:16px;font-weight:700;flex:1;min-width:0}
.x-btn{width:34px;height:34px;border-radius:999px;background:#f1f5f9;color:#475569;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.x-btn:hover{background:var(--vien-dam)}
.modal-body{padding:18px}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:0 18px 18px;flex-wrap:wrap}

/* Thông báo nhỏ */
.toast-root{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#0f2035;color:#fff;padding:11px 18px;border-radius:999px;font-size:13.5px;font-weight:700;box-shadow:0 10px 26px rgba(15,32,53,.3);display:flex;align-items:center;gap:8px;animation:pop .25s ease}
.toast svg{width:16px;height:16px}
.toast.ok{background:var(--xanh)}
.toast.err{background:#dc2626}
@keyframes pop{from{opacity:0;transform:translateY(10px)}}


/* ===================== MÀN HÌNH NHỎ ===================== */
@media (max-width:899px){
  aside{position:fixed;left:0;top:0;height:100dvh;width:280px;z-index:120;background:var(--nen);padding:14px;overflow-y:auto;transform:translateX(-104%);transition:transform .25s ease;display:flex}
  body.nav-open aside{transform:none;box-shadow:0 10px 40px rgba(15,32,53,.3)}
  body.nav-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(15,32,53,.45);z-index:110}
  .m-logo{display:flex}
  .layout{padding:14px 14px 0;gap:0}
  main{gap:18px}
  #view{gap:18px}
  .topbar{flex-wrap:wrap;gap:10px}
  .search{order:5;flex-basis:100%}
  .user b,.user .chev{display:none}
  .btn-pro{padding:9px 14px;font-size:13px}
  .hero{padding:24px 20px 20px;min-height:0}
  .hero-content{max-width:100%}
  .hero h1{font-size:25px}
  .hero-img{position:static;width:100%;height:auto;-webkit-mask-image:none;mask-image:none;border-radius:14px;margin-top:6px}
  .features{gap:12px;flex-wrap:wrap}
  .dots{position:static;transform:none;justify-content:center;margin-top:12px}
  .quick{grid-template-columns:repeat(3,1fr);gap:10px}
  .subjects{grid-template-columns:repeat(2,1fr);gap:12px}
  .subj img{width:100%;height:130px}
  .cols{grid-template-columns:repeat(2,1fr);gap:12px}
  .recents{grid-template-columns:1fr;gap:10px}
  .banner{flex-wrap:wrap;text-align:center;font-size:12.5px}
  .tabs{border-radius:16px 16px 0 0;padding:8px 8px 10px}
  .tab{min-width:0}.tab span{font-size:11px}

  .sub-nav .crumb{margin-left:0;flex-basis:100%}
  .subj-hero,.subj-hero.sm{flex-direction:column;text-align:center;padding:22px 18px;gap:16px}
  .subj-hero h1,.subj-hero.sm h1{font-size:22px}
  .subj-hero p{font-size:13.5px}
  .hero-stats,.subj-hero .eyebrow{justify-content:center}
  .hero-stats{justify-content:center}
  .hero-prog{max-width:100%;text-align:left}
  .grades{grid-template-columns:repeat(2,1fr);gap:12px}
  .weeks{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
  .wlist{grid-template-columns:1fr}
  .guides{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .empty-box{flex-direction:column;text-align:center}
  .page-head{align-items:flex-start}
}
@media (max-width:520px){
  .quick{grid-template-columns:repeat(2,1fr)}
  .weeks{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px}
  .grades{grid-template-columns:1fr}
  .subjects{grid-template-columns:1fr}
}

@media print{
  aside,.topbar,.tabs,.m-logo,.dots,.w-tools,.sub-nav{display:none!important}
  body{background:#fff}
}

/* =========================================================================
   PHẦN BÁN BỘ BÀI GIẢNG — ô tuần đang khoá, bảng giá, hộp mua
   Tuần 1 mở tự do (nhãn "Học thử"); tuần 2 trở đi khoá lại.
   ========================================================================= */

/* --- Ô tuần đang khoá: vẫn nổi khối như ô có bài, nhưng ngả hổ phách --- */
.week.lock{background:linear-gradient(180deg,#fffdf6 0%,#fdf5e3 100%);
  border-color:#f0dcb0;
  box-shadow:0 5px 0 #e8d3a4, 0 7px 14px rgba(120,84,14,.14)}
.week.lock:hover{border-color:#e0b544;
  box-shadow:0 8px 0 #e0c68d, 0 15px 26px rgba(120,84,14,.22)}
.week.lock:active{transform:translateY(4px);
  box-shadow:0 1px 0 #e8d3a4, 0 2px 4px rgba(120,84,14,.16)}
/* Ô khoá là ô ĐÃ CÓ BÀI, chỉ chưa mua — để biểu tượng gần như bình thường
   cho thầy cô thấy đó là bài thật, đừng làm mờ như ô trống. */
.week.lock .ppt-ic{filter:grayscale(.2);opacity:.85}
.week.lock:hover .ppt-ic{filter:none;opacity:1}
.week.lock .lb{color:#92700f}
.week.lock .st{color:#a97a12}
.week.lock .st .dot{background:#e0a919}

/* Ổ khoá nhỏ ở góc ô tuần */
.o-khoa{position:absolute;left:6px;top:6px;width:19px;height:19px;border-radius:999px;
  background:#fbeec6;color:#a97a12;display:flex;align-items:center;justify-content:center;z-index:2}
.o-khoa svg{width:12px;height:12px}

/* Nhãn "Học thử" trên ô tuần 1 */
.nhan-thu{position:absolute;left:50%;top:-8px;transform:translateX(-50%);white-space:nowrap;
  background:#0ea5e9;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.3px;
  border-radius:999px;padding:2px 9px;box-shadow:0 3px 8px rgba(14,116,144,.28);z-index:2}
.w-item.nay .nhan-thu{top:-10px}

/* Thẻ bài trong danh sách (Yêu thích, Tìm kiếm…) khi đang khoá */
.wcard.lock{background:#fffdf6;border-color:#f0dcb0}
.wcard.lock .tm{color:#a97a12}

/* --- Bảng giá --- */
.gia-hang{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 14px}
.gia-hang.gia-2{grid-template-columns:repeat(2,1fr);gap:16px}
.gia-o{background:#f4f8fc;border:1px solid #e7eef5;border-radius:14px;padding:14px 12px;text-align:center}
.gia-o b{display:block;font-size:19px;font-weight:800;color:var(--chu);font-family:var(--font-td)}
.gia-o span{display:block;font-size:11.5px;font-weight:700;color:var(--chu-mo);margin-top:3px;line-height:1.35}
.gia-o.hot{background:var(--xanh-nhat);border-color:#bfe3cd}
.gia-o.hot b{color:var(--xanh-dam)}

.gia-cot{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);
  padding:18px;box-shadow:var(--bong-1)}
.gia-cot.hot{border-color:#bfe3cd;box-shadow:0 0 0 3px rgba(34,165,91,.13),var(--bong-2)}
.gia-cot .gc-top{margin-bottom:12px}
.gia-cot .gc-top b{display:block;font-size:17px;font-weight:800;font-family:var(--font-td);letter-spacing:-.018em}
.gia-cot .gc-top span{display:block;font-size:12.5px;font-weight:700;color:var(--chu-mo);margin-top:2px}
.gia-cot ul{list-style:none;margin:0;padding:0}
.gia-cot li{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 0;border-top:1px dashed var(--vien)}
.gia-cot li span{font-size:13px;font-weight:700;color:var(--chu-nhat)}
.gia-cot li b{font-size:15px;font-weight:800;white-space:nowrap}
.gia-cot li.nam b{color:var(--xanh-dam);font-size:18px}
.gia-cot .gc-mo{font-size:12px;font-weight:600;color:var(--chu-mo);margin:10px 0 0}

.goi-them{list-style:none;margin:0;padding:0}
.goi-them li{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:12px 0;border-top:1px dashed var(--vien)}
.goi-them li:first-child{border-top:0;padding-top:0}
.goi-them li b{display:block;font-size:14.5px;font-weight:700}
.goi-them li span{display:block;font-size:12.5px;font-weight:600;color:var(--chu-mo);margin-top:2px;line-height:1.4}
.goi-them li em{font-style:normal;font-size:17px;font-weight:800;color:var(--xanh-dam);white-space:nowrap;
  display:flex;align-items:center;gap:4px}

.mua-buoc{list-style:none;margin:0 0 16px;padding:0;counter-reset:mb}
.mua-buoc li{counter-increment:mb;position:relative;padding:0 0 14px 40px}
.mua-buoc li::before{content:counter(mb);position:absolute;left:0;top:-1px;
  width:27px;height:27px;border-radius:999px;background:var(--xanh);color:#fff;
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.mua-buoc li b{display:block;font-size:14.5px;font-weight:700}
.mua-buoc li span{display:block;font-size:12.5px;font-weight:600;color:var(--chu-mo);margin-top:2px;line-height:1.45}

/* --- Hộp mua hiện khi bấm ô tuần đang khoá --- */
.mua-ten{font-size:15px;font-weight:700;margin:0 0 6px;font-family:var(--font-td)}
.goi-dang-co{margin-top:14px;background:var(--xanh-nhat);border:1px solid #bfe3cd;
  border-radius:12px;padding:12px 14px;font-size:13px;font-weight:700;color:var(--xanh-dam)}
.goi-dang-co ul{margin:6px 0 0;padding-left:18px}
.goi-dang-co li{font-weight:600;line-height:1.6}

@media (max-width:640px){
  .gia-hang,.gia-hang.gia-2{grid-template-columns:1fr}
}

/* Chỗ này trước đây in GIÁ thẳng lên từng ô tuần. Cô Hoàng Mai chốt bỏ
   ngày 18/8/2026: để số tiền lên từng ô trông như cái chợ. Giá nay chỉ
   hiện trong hộp mua khi bấm vào ô.                                     */

/* ---- Ảnh xem trước trong hộp mua ---- */
.xt{margin:0 0 14px;border-radius:14px;overflow:hidden;border:1px solid var(--vien);background:#f4f8fc}
.xt img{display:block;width:100%;height:auto}
.xt figcaption{display:flex;align-items:flex-start;gap:6px;padding:9px 12px;
  font-size:12px;font-weight:600;color:var(--chu-mo);line-height:1.45;background:#fff}
.xt figcaption svg{flex-shrink:0;margin-top:2px}

/* ---- Khối chuyển khoản có mã QR ---- */
.ck-box{background:#f4f8fc;border:1px solid #e7eef5;border-radius:15px;padding:14px}
.ck-chon{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.ck-nut{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;
  border-radius:12px;background:#fff;border:1.5px solid var(--vien);font:inherit;color:inherit;
  transition:.13s;text-align:center}
.ck-nut b{font-size:15px;font-weight:800;font-family:var(--font-td);letter-spacing:-.02em}
.ck-nut span{font-size:11px;font-weight:700;color:var(--chu-mo)}
.ck-nut:hover{border-color:var(--xanh-sang)}
.ck-nut.on{background:var(--xanh-nhat);border-color:var(--xanh);box-shadow:0 0 0 2px rgba(34,165,91,.16)}
.ck-nut.on b{color:var(--xanh-dam)}
.ck-nut.on span{color:var(--xanh-dam)}

.ck-than{display:flex;gap:16px;align-items:flex-start}
.ck-qr{width:172px;height:172px;flex-shrink:0;border-radius:12px;background:#fff;
  border:1px solid var(--vien);object-fit:contain;padding:4px}
.ck-tt{flex:1;min-width:0}
.ck-tt .d{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px dashed var(--vien)}
.ck-tt .d:first-child{border-top:0;padding-top:0}
.ck-tt .d span{font-size:12px;font-weight:700;color:var(--chu-mo);width:106px;flex-shrink:0}
.ck-tt .d b{font-size:13.5px;font-weight:700;word-break:break-word;min-width:0}
.ck-tt .d b.to{font-size:16px;font-weight:800;letter-spacing:.2px;font-family:var(--font-td)}
.ck-tt .sao{width:24px;height:24px;border-radius:7px;background:#fff;border:1px solid var(--vien);
  color:var(--chu-mo);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ck-tt .sao:hover{color:var(--xanh);border-color:var(--xanh-sang)}

@media (max-width:600px){
  .ck-than{flex-direction:column;align-items:center}
  .ck-qr{width:200px;height:200px}
  .ck-tt{width:100%}
  .ck-chon{grid-template-columns:1fr}
  .ck-nut{flex-direction:row;justify-content:space-between;padding:9px 12px}
}

/* =========================================================================
   PHẦN 4 — CHỈNH GIAO DIỆN 18/8/2026
   Bốn việc: (1) giấu nút quản trị khỏi mắt thầy cô mua bài, (2) trang chủ
   biết chào hàng, (3) khoe cái kho ĐANG CÓ thay vì cái còn thiếu,
   (4) mấy khối mới: dải chào, bộ đủ năm, điểm mạnh, cam kết.
   ========================================================================= */

/* ---- Nút "Nhập mã" trên thanh trên ---- */
.btn-ma{display:flex;align-items:center;gap:7px;background:#fff;color:var(--xanh-dam);
  border:1.5px solid var(--xanh-sang);border-radius:999px;padding:9px 15px;
  font-weight:700;font-size:13.5px;white-space:nowrap;cursor:pointer;font-family:inherit}
.btn-ma:hover{background:var(--xanh-nhat)}
@media (max-width:1180px){ .btn-ma span{display:none} .btn-ma{padding:9px 11px} }
@media (max-width:899px){ .btn-ma{display:none} }

/* ---- Dải chào hàng ngay dưới màn hero ---- */
.chao{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(100deg,#ecfdf3,#f0f9ff);
  border:1.5px solid #bbf0d0;border-radius:var(--bo-lon);
  padding:16px 20px;margin-bottom:20px;box-shadow:var(--bong-1)}
.chao-txt{flex:1;min-width:260px}
/* Chỉ dòng đầu (con trực tiếp) mới là dòng tiêu đề. Trước đây quy tắc này
   áp cho MỌI thẻ b, nên chữ in đậm giữa câu cũng bị đẩy xuống dòng riêng. */
.chao-txt>b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;
  color:var(--xanh-dam);font-family:var(--font-td);letter-spacing:-.01em;margin-bottom:5px}
.chao-txt>b svg{flex-shrink:0}
.chao-txt>span b{font-weight:800;color:var(--xanh-dam)}
.chao-txt>span{display:block;font-size:13.5px;line-height:1.65;color:#436a54}
.chao-nut{display:flex;gap:10px;flex-wrap:wrap}
.chao-nut .btn-pill{background:#fff}
@media (max-width:640px){ .chao{padding:14px} .chao-nut{width:100%} .chao-nut>*{flex:1;justify-content:center} }

/* ---- Bộ đã dựng đủ cả năm ---- */
.sec-mo{font-size:13.5px;line-height:1.6;color:var(--chu-nhat);margin:-6px 0 14px}
.bo-nam-hang{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.bo-nam{position:relative;background:var(--the);border:1px solid var(--vien);
  border-radius:var(--bo);padding:16px 12px 14px;text-align:center;
  box-shadow:var(--bong-1);transition:.18s;display:block;color:var(--chu)}
.bo-nam:hover{transform:translateY(-3px);box-shadow:var(--bong-2);border-color:var(--mau,var(--xanh))}
.bo-nam img{width:62px;height:62px;object-fit:contain;margin:6px auto 10px;display:block}
.bo-nam b{display:block;font-size:14.5px;font-weight:800;font-family:var(--font-td);
  letter-spacing:-.015em;color:var(--mau,var(--chu));margin-bottom:4px}
.bn-so{display:block;font-size:12px;font-weight:700;color:var(--chu-mo)}
.bn-nhan{position:absolute;top:9px;left:9px;background:#16a34a;color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.2px;padding:3px 8px;border-radius:999px}

/* ---- Bốn điểm mạnh của bộ ---- */
.manh{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px}
.manh-o{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);
  padding:16px 16px 15px;box-shadow:var(--bong-1)}
.manh-o .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;color:#fff;margin-bottom:11px}
.manh-o b{display:block;font-size:14.5px;font-weight:800;font-family:var(--font-td);
  letter-spacing:-.015em;line-height:1.35;margin-bottom:6px}
.manh-o>span{display:block;font-size:13px;line-height:1.62;color:var(--chu-nhat)}

/* ---- Lời cam kết ở trang Bảng giá ---- */
.cam-ket{display:grid;gap:9px;background:#f2fbf6;border:1.5px solid #c9edd8;
  border-radius:var(--bo);padding:15px 18px;margin-bottom:22px}
.cam-ket>div{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;
  line-height:1.62;font-weight:600;color:#33604a}
.cam-ket .check-ic{width:19px;height:19px;flex-shrink:0;margin-top:1px}

/* ---- Trạng thái kho in trong hộp mua ---- */
.kho-trang-thai{display:flex;gap:8px;align-items:flex-start;background:#f8fafc;
  border:1px solid var(--vien);border-radius:12px;padding:10px 13px;margin:0 0 14px;
  font-size:13px;line-height:1.6;color:var(--chu-nhat)}
.kho-trang-thai svg{flex-shrink:0;margin-top:2px;color:var(--xanh)}

/* ---- Hộp "tuần này đang dựng" (thay cho hộp gắn link cũ) ---- */
.chua-co{display:flex;gap:9px;align-items:center;font-size:14.5px;font-weight:700;
  color:#8a6d1f;background:#fdf6e3;border:1px solid #f2e0ae;border-radius:12px;
  padding:12px 14px;margin:0 0 12px}
.chua-co svg{flex-shrink:0}

/* ---- Ô lịch báo giảng chưa có bài ---- */
.mini.off{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  color:var(--chu-mo);background:#f1f5f9;border-radius:7px;padding:4px 8px}

/* ---- Trang chế độ chủ kho ---- */
.ck-on{color:var(--xanh-dam)}
.ck-off{color:var(--chu-nhat)}
/* Máy đang bật chế độ chủ kho thì viền trên app đổi màu để cô khỏi quên tắt */
body.chu-kho main{box-shadow:inset 0 3px 0 #f59e0b}

/* ---- Nhãn "Word" trên ô tuần có kèm giáo án Word ----
   Truoc day chi la bieu tuong W nho xiu nep sau hinh PowerPoint, co Hoang Mai
   mo ra khong thay (18/8/2026). Nay thanh nhan chu, dat goc tren ben phai. */
.nhan-word{position:absolute;right:5px;top:5px;display:flex;align-items:center;gap:3px;
  background:#e8f1fd;color:#1b5fae;border:1px solid #bcd8f7;border-radius:999px;
  padding:1px 6px 1px 4px;font-size:9.5px;font-weight:800;letter-spacing:.01em;line-height:1.5}
.nhan-word .word-ic{width:11px;height:11px;flex-shrink:0}
.week.lock .nhan-word{background:#fdf3dc;border-color:#f0dcae;color:#8a6410}
.week.none .nhan-word{opacity:.55}