/* ============================================================
   thidua-d.css — Trang Thi đua theo "Phương án D" (thầy duyệt 05/10/2026)
   Màu chính đỏ Đoàn + vàng; xanh navy #262F6C lấy từ logo trường thay cho màu đen.
   dashboard.html và index.html (bục 3 bậc) nạp file này — mọi lớp có tiền tố .d- để không đụng trang khác.
   Bản vẽ gốc: claude.ai/artifact/5odYoxWyCs1RpqwYaNxZMv
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap');

.d-thidua{
  --d-do:#c1121f; --d-vang:#ffba08; --d-navy:#262f6c; --d-navy-dam:#1a2152;
  --d-muc:#1b1d33; --d-nhat:#666a82; --d-ke:#e6e7ee; --d-nen2:#fafafc;
  --d-so:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  color:var(--d-muc);
}
/* Bỏ hiệu ứng "nổi lên" lúc tải của .wrap>* cho trang này: bảng xếp hạng phải hiện ngay */
.d-thidua>*{animation:none}
.d-so{font-family:var(--d-so);font-variant-numeric:tabular-nums}

/* Bố cục: điện thoại 1 cột; máy tính 2 cột (trái: bục + thẻ lớp · phải: bảng + nhật ký) */
.d-luoi{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media (min-width:1000px){
  .d-luoi{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:32px;align-items:start}
}
.d-cot{display:grid;gap:14px;min-width:0;align-content:start}

/* ---- Đầu khu ---- */
.d-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--d-nhat)}
.d-tde{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--d-navy);margin:2px 0 0;line-height:1.15}
.d-cn{font-size:12.5px;color:var(--d-nhat)}
.d-bch{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.d-bch:not(:has(a:not([hidden]))){display:none}
.d-nut{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:10px;border:1px solid var(--d-ke);
  background:#fff;color:var(--d-navy);font-weight:700;font-size:13px;text-decoration:none}
.d-nut.chinh{background:var(--d-navy);border-color:var(--d-navy);color:#fff}
.d-nut:hover{border-color:var(--d-navy)}
.d-tb{margin:0;font-size:14px;color:var(--d-nhat)}

/* ---- Lớp của tôi + nút gạt Cả năm / Tuần ---- */
.d-chonlop{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--d-nhat)}
.d-chonlop label{margin:0;font-weight:600;white-space:nowrap}
.d-chon{flex:1;min-width:0;min-height:42px;padding:8px 12px;border:1px solid var(--d-ke);border-radius:10px;background:#fff;
  color:var(--d-muc);font-family:inherit;font-weight:600;font-size:14px;line-height:1.2;}
.d-gat{display:flex;background:#e9eaf0;border-radius:12px;padding:3px;gap:3px}
.d-gat>*{flex:1;min-width:0;min-height:38px;border:0;border-radius:9px;background:none;color:#5d6178;font-family:inherit;font-weight:700;font-size:13px;line-height:1;
  cursor:pointer;text-align:center}
.d-gat .on{background:#fff;color:var(--d-navy);box-shadow:0 1px 2px rgba(20,22,50,.15)}
.d-gat select{appearance:none;-webkit-appearance:none;padding:0 26px 0 12px;text-align:center;text-align-last:center;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.d-gat select.on{background-color:#fff}

/* ---- Bục 3 bậc trên sân khấu navy, đèn rọi xuống hạng 1 ---- */
.d-san{position:relative;overflow:hidden;border-radius:20px;padding:14px 14px 0;color:#fff;
  background:linear-gradient(180deg,#2c3678 0%,var(--d-navy) 45%,var(--d-navy-dam) 100%)}
.d-san::before{content:"";position:absolute;left:50%;top:0;width:58%;height:78%;transform:translateX(-50%);pointer-events:none;
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(255,236,170,.34) 0%,rgba(255,220,120,.14) 55%,rgba(255,214,102,0) 100%);filter:blur(5px)}
.d-san .d-den{position:absolute;left:50%;top:-6px;width:46px;height:12px;transform:translateX(-50%);border-radius:0 0 50% 50%;
  background:radial-gradient(60% 100% at 50% 0,rgba(255,244,210,.9),rgba(255,214,102,0) 80%)}
.d-san>*{position:relative;z-index:1}
.d-san .d-den{position:absolute}
.d-dau-san{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#c9cde8}
.d-dau-san b{color:var(--d-vang)}
.d-buc{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:6px;align-items:end;margin-top:12px}
.d-buc.hai{grid-template-columns:1fr 1.18fr}
.d-buc.mot{grid-template-columns:minmax(0,1fr);max-width:60%;margin-inline:auto}
.d-b{display:grid;gap:7px;justify-items:center;text-align:center;min-width:0}
.d-b .sao{width:22px;height:22px;background:var(--d-vang);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(0 0 6px rgba(255,186,8,.8))}
.d-b .ten{font-weight:800;font-size:15px;line-height:1.15;overflow-wrap:anywhere}
.d-b.b1 .ten{font-size:18px}
.d-b .pt{font-family:var(--d-so);font-weight:700;font-size:15px;background:rgba(255,255,255,.14);border-radius:999px;padding:1px 10px;white-space:nowrap}
.d-b.b1 .pt{background:var(--d-vang);color:#3a2600}
.d-b .ph{font-size:11px;color:#c9cde8;line-height:1.2;margin-top:-3px}
.d-b .bac{width:100%;border-radius:9px 9px 0 0;display:grid;place-items:start center;padding-top:8px;font-family:var(--d-so);font-weight:700;font-size:42px;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.d-b.b1 .bac{height:112px;background:linear-gradient(#ffd75a,#f0a500);color:#5a3a00}
.d-b.b2 .bac{height:82px;background:linear-gradient(#f0f0f4,#b9b8c2);color:#3c3a48}
.d-b.b3 .bac{height:62px;background:linear-gradient(#ebb98f,#b6764a);color:#4a2510}
.d-chan{height:9px;background:#11163a;margin:0 -14px}
.d-tie{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding:10px 4px 12px;font-size:11.5px;color:#c9cde8}
.d-tie span{background:rgba(255,255,255,.10);border-radius:999px;padding:2px 8px}
.d-tie b{color:#fff;font-weight:700}
.d-san-trong{padding:18px 4px 20px;text-align:center;color:#dfe2f5;font-size:14px}

/* ---- Thẻ Lớp của tôi ----
   05/10: thầy chê khối ĐỎ lớn "chen ngang" giữa nền trắng và sân khấu navy -> thẻ trắng viền mảnh.
   Đỏ chỉ còn mang nghĩa ĐIỂM TRỪ (cột âm trong biểu đồ). */
.d-toi{background:#fff;color:var(--d-muc);border:1px solid var(--d-ke);border-radius:18px;padding:14px 16px 12px;display:grid;gap:10px}
.d-toi .tren{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:end}
.d-toi .hang{line-height:.85;white-space:nowrap}
.d-toi .hang .d-so{font-size:66px;font-weight:700;color:var(--d-navy)}
.d-toi .hang small{font-family:var(--d-so);font-size:18px;color:var(--d-nhat);font-weight:600}
.d-toi .n2{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--d-nhat)}
.d-toi .tl{font-size:20px;font-weight:800;line-height:1.15;color:var(--d-navy)}
.d-toi .ct{font-size:13px;color:var(--d-nhat)}
.d-toi .ct b{font-family:var(--d-so);font-size:17px;color:var(--d-muc)}
.d-cot-tuan{display:grid;gap:8px 6px;border-top:1px solid var(--d-ke);padding-top:8px}
.d-cot-tuan .o{position:relative;height:var(--h,56px)}
.d-cot-tuan .o::before{content:"";position:absolute;left:0;right:0;top:var(--zero,36px);height:1px;background:#cfd2e2}
.d-cot-tuan .tr{position:absolute;left:50%;transform:translateX(-50%);width:70%;max-width:24px;background:var(--d-navy);border-radius:3px 3px 0 0}
.d-cot-tuan .am{background:var(--d-do);border-radius:0 0 3px 3px}
.d-cot-tuan .nh{text-align:center;font-size:10.5px;color:var(--d-nhat);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.d-toi .lk{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--d-ke);padding-top:9px;
  font-size:13px;font-weight:700;color:var(--d-navy);text-decoration:none;min-height:32px}

/* ---- Bảng xếp hạng ---- */
.d-tde2{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.d-tde2 h2{font-size:19px;font-weight:800;color:var(--d-navy);margin:0;letter-spacing:-.01em}
.d-tde2 small{font-size:12px;font-weight:600;color:var(--d-nhat)}
.d-khoi{display:flex;gap:6px;flex-wrap:wrap}
.d-khoi button{min-height:34px;font-family:inherit;font-weight:700;font-size:12.5px;line-height:1;padding:0 13px;border-radius:999px;border:1px solid var(--d-ke);background:#fff;color:#4a4e68;cursor:pointer}
.d-khoi button.on{background:var(--d-navy);border-color:var(--d-navy);color:#fff}
.d-bang{background:#fff;border:1px solid var(--d-ke);border-radius:16px;overflow:hidden}
.d-bd,.d-dg{display:grid;grid-template-columns:38px minmax(0,1fr) 52px 40px;gap:6px;align-items:center;padding:9px 14px}
.d-bd{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--d-nhat);border-bottom:1px solid var(--d-ke);padding-block:8px;background:var(--d-nen2)}
.d-bd span:nth-child(n+3){text-align:right}
.d-dg{border-top:1px solid #f0f1f5;font-size:14px}
.d-bd+.d-dg{border-top:0}
.d-dg .h{font-family:var(--d-so);font-weight:700;font-size:19px;color:#565a74}
.d-dg .l{font-weight:700;min-width:0;line-height:1.25}
.d-dg .l small{display:block;font-weight:500;font-size:11.5px;color:var(--d-nhat);font-variant-numeric:tabular-nums}
.d-dg .t{font-family:var(--d-so);font-weight:700;font-size:19px;text-align:right}
.d-dg .t.am{color:#a3111b}
.d-dg .t.duong{color:#1a7f45}
.d-dg .x{font-size:11px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.d-len{color:#1a8f4c} .d-xuong{color:var(--d-do)} .d-giu{color:#a3a6b8}
.d-dg.minh{background:#fff5d6}
.d-dg.minh .h{color:var(--d-do)}
.d-ngan{padding:6px 14px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--d-nhat);background:var(--d-nen2);border-top:1px solid var(--d-ke)}
.d-them{display:block;width:100%;min-height:42px;border:0;border-top:1px solid #f0f1f5;background:#fff;color:var(--d-navy);font-family:inherit;font-weight:700;font-size:13px;line-height:1;cursor:pointer}
.d-them:hover{background:var(--d-nen2)}

/* ---- Nhật ký (danh sách) ---- */
.d-nk-cu{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.d-nk-cu label{margin:0;font-weight:600;font-size:13px;color:var(--d-nhat)}
.d-nk-cu .d-chon{flex:1 1 160px}
.d-nk-cu input[type=search]{flex:1 1 200px;min-height:42px;padding:8px 12px;border:1px solid var(--d-ke);border-radius:10px;background:#fff;font-family:inherit;font-size:14px}
.d-nk{background:#fff;border:1px solid var(--d-ke);border-radius:16px;overflow:hidden}
.d-r{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid #f0f1f5}
.d-r:first-child{border-top:0}
.d-r .ng{font-size:11.5px;color:var(--d-nhat);line-height:1.15;text-align:center}
.d-r .ng b{display:block;font-family:var(--d-so);font-size:19px;color:var(--d-muc)}
.d-r .nd{min-width:0;font-size:13.5px;line-height:1.35}
.d-r .nd b{font-weight:700}
.d-r .nd small{display:block;color:var(--d-nhat);font-size:12px}
.d-r .phai{display:grid;justify-items:end;gap:6px}
.d-r .dm{font-family:var(--d-so);font-weight:700;font-size:15px;border-radius:999px;padding:1px 9px;white-space:nowrap}
.d-r .dm.tru{color:#a3111b;background:#fdecec}
.d-r .dm.cong{color:#14713d;background:#e5f5ec}
.d-r .xoa{min-height:30px;padding:0 10px;border-radius:8px;border:1px solid #f1c7ca;background:#fff;color:#a3111b;font-family:inherit;font-weight:700;font-size:12px;line-height:1;cursor:pointer}
.d-r.daxoa{opacity:.62;background:#fbf7f7}
.d-r.daxoa .nd>span{text-decoration:line-through}
.d-r .ghi-xoa-boi,.d-r .ghi-xoa-lydo{font-size:11.5px}

/* ---- Trang chủ: MỘT bục + nút gạt Cả năm / Tuần. Máy tính: khung gọn 640px ở giữa, không kéo bục dài 1120px ---- */
.d-buc-home{display:grid;gap:12px;max-width:640px;margin-inline:auto}