/* ═══════════════════════════════════════════════════════════════════
   KONNI39 / HSC — Hệ giao diện chung cho hệ học Tokutei
   Một nguồn duy nhất cho màu, chữ, khoảng cách và các khối dùng lại.
   Màu lấy thẳng từ logo HSC: xanh đậm #0E6D38, xanh lá #73BF44.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Thương hiệu ── */
  --hsc:        #0E6D38;   /* xanh đậm — logo HSC */
  --hsc-2:      #73BF44;   /* xanh lá — chiếc lá trên logo */
  --hsc-mo:     #E8F2EB;
  --hsc-dam:    #0A5129;
  --vang:       #E0A106;   /* vàng hổ phách — màu nhấn thứ hai */
  --vang-mo:    #FCF3DC;
  --vang-dam:   #A8760A;

  /* ── Nền & chữ ── */
  --giay:       #F4F2EC;   /* nền kem — cùng tông với 3 app gốc */
  --the:        #FFFFFF;
  --muc:        #14171A;
  --muc-nhat:   #6C7378;
  --vach:       #E3DFD3;
  --vach-nhat:  rgba(20,23,26,.06);
  --chim:       rgba(20,23,26,.045);

  /* ── Tín hiệu ── */
  --tot:        #0E7A4A;  --tot-mo:  #E4F3EA;
  --canh:       #96620A;  --canh-mo: #FBF1DC;
  --xau:        #B33329;  --xau-mo:  #FBE8E6;
  --lanh:       #1F5FA8;  --lanh-mo: #E7EFF9;

  /* ── Chữ ── */
  --chu: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --so:  ui-monospace, 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace;

  /* ── Bo góc & đổ bóng ── */
  --bo-nho: 7px;  --bo: 11px;  --bo-to: 15px;
  --bong: 0 1px 2px rgba(20,23,26,.05), 0 1px 3px rgba(20,23,26,.04);
  --bong-noi: 0 2px 8px rgba(20,23,26,.09);

  /* ── Bề rộng ── */
  --soc: repeating-linear-gradient(45deg, var(--vang) 0 8px, var(--muc) 8px 16px);
  --hep: 420px;   /* trang cho học viên, một cột */
  --rong: 1120px; /* trang quản trị */
}

@media (prefers-color-scheme: dark){
  :root{
    --hsc:#5FD08A; --hsc-2:#9BE06B; --hsc-mo:#12241A; --hsc-dam:#7EE0A2;
    --vang:#F0C14B; --vang-mo:#2A2314; --vang-dam:#F0C14B;
    --giay:#141614; --the:#1B1E1B; --muc:#EEF1EC; --muc-nhat:#9AA29C;
    --vach:#2A2F2B; --vach-nhat:rgba(255,255,255,.07);
    --chim:rgba(255,255,255,.05);
    --tot:#4ADE80; --tot-mo:#152619; --canh:#FCD34D; --canh-mo:#2A2314;
    --xau:#FCA5A5; --xau-mo:#2C1A18; --lanh:#7FB3EC; --lanh-mo:#16202C;
    --bong:0 1px 2px rgba(0,0,0,.3); --bong-noi:0 2px 10px rgba(0,0,0,.4);
  }
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--giay); color:var(--muc) }
body{
  font-family:var(--chu); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.an{ display:none !important }

/* ── Khung ── */
.khung{ max-width:var(--hep); margin:0 auto; padding:24px 16px 96px }
.khung.rong{ max-width:var(--rong) }

/* ── Nhãn hiệu ── */
.hieu{ text-align:center; margin-bottom:24px }
.hieu img{ height:32px; width:auto; display:block; margin:0 auto 11px }
/* Vạch cảnh báo công trường — mô típ dùng chung với app Từ vựng */
.soc{ height:6px; border-radius:3px; background:var(--soc); margin:0 0 14px }
.hieu h1{ font-size:22px; font-weight:800; letter-spacing:-.021em; margin:0 0 4px }
.hieu p{ margin:0; color:var(--muc-nhat); font-size:13.5px }

/* Đầu trang kiểu ngang (dùng ở trang quản trị) */
.dinh{ display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap }
.dinh img{ height:26px; width:auto }
.dinh h1{ font-size:18px; font-weight:800; margin:0; flex:1; letter-spacing:-.015em }
.dinh .ai{ font-size:12.5px; color:var(--muc-nhat) }

/* ── Thẻ ── */
.the{
  background:var(--the); border:1px solid var(--vach);
  border-radius:var(--bo); padding:16px; margin-bottom:12px; box-shadow:var(--bong);
}
.the.phang{ box-shadow:none }
h2.muc{
  font:700 10.5px/1 var(--so); letter-spacing:.13em; text-transform:uppercase;
  color:var(--muc-nhat); margin:0 0 13px;
}

/* ── Nút ── */
.nut{
  /* display phải khai rõ: thẻ <a> mặc định là inline, width:100% sẽ vô tác dụng
     và nút trôi nằm cạnh khối trước nó. */
  display:inline-block; text-align:center; text-decoration:none;
  font:600 14px/1.35 var(--chu); padding:11px 17px; border:1px solid var(--hsc);
  border-radius:var(--bo-nho); background:var(--hsc); color:#fff; cursor:pointer;
  transition:filter .15s; white-space:nowrap;
}
.nut:hover:not(:disabled){ filter:brightness(1.09) }
.nut:active:not(:disabled){ filter:brightness(.94) }
.nut:disabled{ opacity:.42; cursor:not-allowed }
.nut.rong{ display:block; width:100%; margin-top:16px }
/* Nút nằm ngay sau ô nhập hoặc ô số thì phải có khoảng thở */
.o + .nut, .oso + .nut, .hang + .nut{ margin-top:16px }
.nut.sat{ margin-top:0 }
.nut.mo{ background:var(--the); color:var(--hsc) }
.nut.xam{ background:var(--chim); color:var(--muc); border-color:transparent }
.nut.do{ background:var(--xau); border-color:var(--xau) }
.nut.vang{ background:var(--vang); border-color:var(--vang); color:#1A1204 }
.nut.nho{ padding:6px 11px; font-size:12.5px; border-radius:6px }
.nut:focus-visible{ outline:2px solid var(--muc); outline-offset:2px }

.chu-nut{
  background:none; border:0; color:var(--hsc); font:600 13px var(--chu);
  cursor:pointer; padding:6px 0; text-decoration:none; display:inline-block;
}
.chu-nut:hover{ text-decoration:underline }

/* ── Ô nhập ── */
label{ display:block; font-size:12.5px; font-weight:600; margin:0 0 5px }
/* color-scheme cho trình duyệt vẽ lịch và mũi tên theo đúng nền sáng/tối */
input,select,textarea{ color-scheme:light }
@media(prefers-color-scheme:dark){ input,select,textarea{ color-scheme:dark } }

input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=date],select{
  width:100%; padding:11px 13px; border:1px solid var(--vach);
  border-radius:var(--bo-nho); font:400 15px var(--chu);
  background:var(--the); color:var(--muc);
}
input:focus,select:focus{ outline:2px solid var(--hsc); outline-offset:-1px; border-color:var(--hsc) }

/* Ô ngày: cho cao bằng ô chữ và dùng đúng phông, không để mặc định của máy */
input[type=date]{
  min-height:43px; font:400 15px var(--chu); appearance:none; -webkit-appearance:none;
}
input[type=date]::-webkit-calendar-picker-indicator{
  opacity:.55; cursor:pointer; filter:grayscale(1);
}
input[type=date]::-webkit-datetime-edit{ font:400 15px var(--chu); color:var(--muc) }
input[type=date]:invalid::-webkit-datetime-edit{ color:var(--muc-nhat) }

/* Ô chọn: tự vẽ mũi tên cho giống nhau trên mọi máy */
select{
  appearance:none; -webkit-appearance:none; padding-right:34px; min-height:43px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236C7378' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center;
}
.o + .o{ margin-top:13px }
.mach{ font-size:12px; color:var(--muc-nhat); margin:5px 0 0; line-height:1.5 }
.hang{ display:flex; gap:9px; flex-wrap:wrap; align-items:flex-end }
.hang > div{ flex:1; min-width:112px }
.hang > div.vua{ flex:0 0 auto; min-width:0 }

/* ── Tab ── */
.tab{ display:flex; gap:4px; background:var(--chim); padding:4px; border-radius:9px; margin-bottom:16px }
.tab button{
  flex:1; border:0; background:none; padding:9px 6px; border-radius:6px;
  cursor:pointer; font:600 13.5px var(--chu); color:var(--muc-nhat);
}
.tab button.bat{ background:var(--the); color:var(--muc); box-shadow:var(--bong) }

/* ── Ô số ── */
.oso{ display:grid; grid-template-columns:repeat(auto-fit,minmax(116px,1fr)); gap:9px }
.oso.doi{ grid-template-columns:1fr 1fr }
.so{ background:var(--chim); border-radius:9px; padding:12px 13px }
.so .v{ font:800 22px/1 var(--chu); letter-spacing:-.02em }
.so .k{ font-size:11.5px; color:var(--muc-nhat); margin-top:4px; line-height:1.35 }
.so.canh{ background:var(--canh-mo) } .so.canh .v{ color:var(--canh) }
.so.tot{ background:var(--tot-mo) }   .so.tot .v{ color:var(--tot) }
.so.xau{ background:var(--xau-mo) }   .so.xau .v{ color:var(--xau) }
.so.hsc{ background:var(--hsc-mo) }   .so.hsc .v{ color:var(--hsc) }

/* ── Nhãn tình trạng ── */
.nhan{
  display:inline-block; font:600 10.5px var(--so); letter-spacing:.05em;
  padding:3px 8px; border-radius:5px; white-space:nowrap;
}
.nhan.tot{ background:var(--tot-mo); color:var(--tot) }
.nhan.canh{ background:var(--canh-mo); color:var(--canh) }
.nhan.xau{ background:var(--xau-mo); color:var(--xau) }
.nhan.lanh{ background:var(--lanh-mo); color:var(--lanh) }
.nhan.im{ background:var(--chim); color:var(--muc-nhat) }

/* ── Báo ── */
.bao{ margin-top:13px; padding:10px 13px; border-radius:var(--bo-nho); font-size:13.5px; line-height:1.5 }
.bao.xau{ background:var(--xau-mo); color:var(--xau) }
.bao.tot{ background:var(--tot-mo); color:var(--tot) }
.bao.canh{ background:var(--canh-mo); color:var(--canh) }
.bao:empty{ display:none }

.ghi{
  font-size:12.5px; color:var(--muc-nhat); background:var(--chim);
  border-left:3px solid var(--vach); padding:10px 13px;
  border-radius:0 var(--bo-nho) var(--bo-nho) 0; margin-top:12px; line-height:1.55;
}
.trong{ color:var(--muc-nhat); font-size:13px; text-align:center; padding:18px 0 }

/* ── Bảng ── */
.cuon{ overflow-x:auto; -webkit-overflow-scrolling:touch }
table{ width:100%; border-collapse:collapse; font-size:13px; margin-top:10px }
th{
  text-align:left; font:600 10.5px var(--so); letter-spacing:.07em;
  text-transform:uppercase; color:var(--muc-nhat);
  padding:0 9px 8px; border-bottom:1px solid var(--vach); white-space:nowrap;
}
td{ padding:9px; border-bottom:1px solid var(--vach-nhat); vertical-align:middle }
tr:last-child td{ border-bottom:0 }
tbody tr:hover td{ background:var(--chim) }
td.s, th.s{ text-align:right; font-family:var(--so); font-size:12.5px }

/* ── Thanh đo ── */
.thanh{ height:7px; border-radius:99px; background:var(--chim); overflow:hidden; display:flex }
.thanh i{ height:100%; transition:width .4s }

/* ── Thanh điều hướng dưới ── */
#konni-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:9998; display:flex;
  justify-content:center; background:var(--the);
  border-top:1px solid var(--vach);
  padding-bottom:env(safe-area-inset-bottom);
}
#konni-nav .in{ width:100%; max-width:var(--hep); display:flex }
#konni-nav a{
  flex:1; text-align:center; padding:9px 0 10px; font:600 10.5px var(--chu);
  color:var(--muc-nhat); text-decoration:none;
}
#konni-nav a span{ display:block; font-size:19px; margin-bottom:2px; line-height:1 }
#konni-nav a.bat{ color:var(--hsc) }

/* ── Hàng danh sách bấm được ── */
.hang-nut{
  display:flex; align-items:center; gap:12px; padding:14px 15px;
  border:1px solid var(--vach); border-radius:var(--bo); background:var(--the);
  text-decoration:none; color:var(--muc); margin-bottom:9px; box-shadow:var(--bong);
}
.hang-nut:active{ background:var(--chim) }
.hang-nut .bt{ flex:none; font-size:21px; line-height:1; width:26px; text-align:center }
.hang-nut .nd{ flex:1; min-width:0 }
.hang-nut .nd b{ display:block; font-size:14.5px; font-weight:600; line-height:1.3 }
.hang-nut .nd span{ display:block; font-size:12px; color:var(--muc-nhat); margin-top:2px }
.hang-nut .mui{ flex:none; color:var(--muc-nhat); font-size:17px }
.hang-nut .cham{
  flex:none; background:var(--xau); color:#fff; font:700 11px var(--so);
  padding:3px 8px; border-radius:99px;
}

/* ── Ô app có huy hiệu ── */
.luoi-app a{ position:relative }
.luoi-app a .cham{
  position:absolute; top:8px; right:9px; background:var(--xau); color:#fff;
  font:700 10.5px var(--so); padding:2px 7px; border-radius:99px;
}

/* ── Chân trang ── */
.chan{ text-align:center; margin-top:22px; font-size:12.5px; color:var(--muc-nhat) }

code{ font:400 12px var(--so); background:var(--chim); padding:2px 5px; border-radius:4px }

/* ═══ Khối dùng chung — phải có display rõ ràng, không để chữ dính nhau ═══ */

/* Người dùng: ảnh tròn + tên + email */
.nguoi{ display:flex; align-items:center; gap:11px; margin-bottom:16px }
.nguoi .tron{
  width:44px; height:44px; border-radius:50%; background:var(--hsc-mo); color:var(--hsc);
  display:grid; place-items:center; font:800 17px var(--chu); flex:none;
}
.nguoi .tin{ min-width:0; flex:1 }
.nguoi .tin b{ display:block; font-size:15.5px; font-weight:600; line-height:1.3 }
.nguoi .tin span{ display:block; font-size:12.5px; color:var(--muc-nhat);
                  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* Hộp gói: dòng tiêu đề riêng, dòng mô tả riêng */
.goi{ border-radius:9px; padding:12px 14px; margin-bottom:16px; font-size:13.5px }
.goi b{ display:block; font-weight:600; margin-bottom:2px }
.goi.dung-thu{ background:var(--canh-mo); color:var(--canh) }
.goi.chinh-thuc{ background:var(--tot-mo); color:var(--tot) }
.goi.chua-co{ background:var(--chim); color:var(--muc-nhat) }

/* Lưới 4 app */
.luoi-app{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:16px }
.luoi-app a{
  border:1px solid var(--vach); border-radius:10px; padding:15px 12px;
  text-decoration:none; color:var(--muc); text-align:center; background:var(--the);
  display:block;
}
.luoi-app a:active{ background:var(--hsc-mo) }
.luoi-app a i{ display:block; font-size:23px; font-style:normal; margin-bottom:6px; line-height:1 }
.luoi-app a b{ display:block; font-size:13.5px; font-weight:600; line-height:1.3 }
.luoi-app a span{ display:block; font-size:11.5px; color:var(--muc-nhat); margin-top:2px }

/* Thước sẵn sàng */
.thuoc{ text-align:center; padding:20px 16px }
.thuoc .n{ font:800 46px/1 var(--chu); letter-spacing:-.03em; display:inline-block }
.thuoc .u{ font-size:19px; font-weight:600; opacity:.5; display:inline-block }
.thuoc .lbl{ display:block; font-size:13.5px; margin-top:7px; color:var(--muc-nhat) }
.thuoc .vach-do{ position:relative; margin-top:16px }
.thuoc .vach-do .moc{ position:absolute; top:-3px; bottom:-3px; width:2px;
                      background:var(--muc); opacity:.32 }
.thuoc .moc-lbl{ display:block; font:600 10px var(--so); color:var(--muc-nhat);
                 margin-top:6px; text-align:right }

/* Đường gạch ngang */
.gach{ border:0; border-top:1px solid var(--vach); margin:18px 0 }

/* Dòng danh sách nhỏ */
.mucnho{ padding:9px 0; border-top:1px solid var(--vach-nhat); font-size:13px }
.mucnho:first-child{ border-top:0; padding-top:0 }
.mucnho .m{ display:block; font:600 10.5px var(--so); letter-spacing:.05em; color:var(--xau) }
.mucnho .t{ display:block; margin-top:3px; line-height:1.45 }

/* Ô ngày học */
.oNgay{ display:grid; grid-template-columns:repeat(15,1fr); gap:4px }
.oNgay i{ aspect-ratio:1; border-radius:3px; background:var(--chim); display:block }
.oNgay i.co{ background:var(--hsc) }
.oNgay i.nay{ outline:2px solid var(--hsc-2); outline-offset:1px }

/* Chương trong trang tiến độ */
.chuongdo{ margin-bottom:11px }
.chuongdo .h{ display:flex; justify-content:space-between; align-items:baseline;
              gap:8px; margin-bottom:5px }
.chuongdo .h .a{ font-size:13px; font-weight:600; flex:1; overflow:hidden;
                 text-overflow:ellipsis; white-space:nowrap }
.chuongdo .h .b{ font:600 12px var(--so); color:var(--muc-nhat); flex:none }

/* Biểu đồ điểm */
.duong{ width:100%; height:88px; display:block }
.ds-thi{ margin-top:12px; font:400 12.5px var(--so); color:var(--muc-nhat) }
.ds-thi div{ display:flex; justify-content:space-between; padding:5px 0;
             border-top:1px solid var(--vach-nhat) }
.ds-thi b{ font-weight:600 }
.ds-thi .dau{ color:var(--tot) } .ds-thi .truot{ color:var(--xau) }

@media (max-width:520px){
  .khung{ padding:18px 13px 96px }
  .hieu h1{ font-size:20px }
  .nut{ width:100% }
  .nut.nho, .hang .nut{ width:auto }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important } }

/* ═══════════════════════════════════════════════════════════════════
   DẤU MỜ ĐỊNH DANH
   Phủ email + ngày lên toàn trang, rất nhạt để không cản đọc,
   nhưng đủ hiện trong ảnh chụp màn hình.
   Mục đích: ai chụp gửi đi thì lộ chính email mình — răn đe chuyện
   chụp cả trăm màn hình ném vào nhóm Zalo.
   ═══════════════════════════════════════════════════════════════════ */
#konni-wm{
  /* Phải nằm TRÊN nội dung, không phải dưới.
     Nằm dưới thì thẻ nội dung nền trắng che mất, ảnh chụp câu hỏi
     sẽ không dính dấu — đúng chỗ cần dính nhất.
     Thấp hơn thanh điều hướng (9998) và bảng hồ sơ (9999). */
  position:fixed; inset:0; z-index:9000;
  pointer-events:none;          /* không cản bấm, không cản cuộn */
  user-select:none;
  overflow:hidden;
  opacity:.045;                 /* nhạt tới mức đọc chữ không vướng */
  background-repeat:repeat;
}
@media (prefers-color-scheme: dark){ #konni-wm{ opacity:.06 } }

/* Khi in ra giấy hoặc xuất PDF thì đậm hơn — bản in dễ bị phát tán hàng loạt */
@media print{
  #konni-wm{ opacity:.12 !important; position:absolute; height:100% }
}

/* Thanh điều hướng và bảng nổi vẫn nằm trên dấu mờ */
#konni-nav{ z-index:9998 }
.bang-hs, #konni-che, #konni-nop-loi{ z-index:9999 }