/* CON CHÚNG TA — giao diện ưu tiên điện thoại. Chỉ dùng token dưới đây; thành phần dùng chung (dùng lại, KHÔNG viết CSS riêng
   cho từng trang nếu đã có): .the .the__h .ds .ds__muc .nut(.nut--vien .nut--nho .nut--nguy .nut--khoi) .nut-bt .bao(--ok --err --warn --info)
   .nhan(--xanh --cam --xam --do) .vt .rong .tieu-de-trang .phu .nho .luoi-2 .form-luoi .form-nut .field* .anh-dd .thanh-tien .tab-loc */
:root {
  --c: #0f766e; --c-dam: #0b5a54; --c-nhat: #e6f4f1; --c-vien: #b7ddd6;
  --nhan: #f59e0b; --nhan-dam: #92580a; --nhan-nhat: #fff4df;
  --bg: #f5f6f3; --the: #ffffff; --chu: #1d2a2c; --phu: #5c6b6d; --vien: #e2e6e1;
  --do: #b42318; --do-nhat: #fdecea; --xanh-la: #1f7a3a; --xanh-la-nhat: #e8f5ec;
  --r: 14px; --r-nho: 9px; --bong: 0 1px 2px rgba(20,40,40,.05), 0 6px 18px rgba(20,40,40,.06);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tab-cao: 62px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55; color: var(--chu); background: var(--bg); }
a { color: var(--c-dam); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .5em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .75em; }
.skip { position: absolute; left: -999px; top: 0; background: #000; color: #fff; padding: 8px 12px; z-index: 99; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--c) 55%, #fff); outline-offset: 2px; }
.khung { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.phu { color: var(--phu); } .nho { font-size: .875rem; }
.demo-bar { background: #2b2f2e; color: #f3f1e9; font-size: .8125rem; text-align: center; padding: 6px 12px; }

/* Đầu trang */
.dau { position: sticky; top: 0; z-index: 30; background: var(--the); border-bottom: 1px solid var(--vien); }
.dau__in { display: flex; align-items: center; gap: 8px; min-height: 58px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--chu); font-weight: 800; font-size: 1.125rem; }
.dau__nhom { flex: 1; min-width: 0; text-decoration: none; color: var(--chu); display: flex; flex-direction: column; }
.dau__ten { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dau__phu { font-size: .8125rem; color: var(--phu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dau__phai { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.nut-bt { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--chu); text-decoration: none;
  background: transparent; border: 0; cursor: pointer; flex: none; }
.nut-bt:hover { background: var(--c-nhat); color: var(--c-dam); }
.tab-ngang { display: none; }
.chinh { padding-top: 16px; padding-bottom: 32px; }
.co-nhom .chinh { padding-bottom: calc(var(--tab-cao) + 28px + env(safe-area-inset-bottom)); }

/* Thanh tab đáy (điện thoại) */
.tab-day { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; align-items: stretch;
  height: calc(var(--tab-cao) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--the); border-top: 1px solid var(--vien); box-shadow: 0 -4px 16px rgba(0,0,0,.05); }
.tab-day > a, .tab-day__them > summary { flex: 1; display: grid; place-items: center; color: var(--phu); text-decoration: none; cursor: pointer; list-style: none; }
.tab-day__them { flex: 1; display: flex; position: relative; }
.tab-day__them > summary::-webkit-details-marker { display: none; }
.tab-day > a[aria-current="page"], .tab-day__them[open] > summary { color: var(--c); }
.tab-day > a[aria-current="page"] { box-shadow: inset 0 3px 0 var(--c); }
.tab-day__ngan { position: absolute; right: 8px; bottom: calc(100% + 8px); min-width: 200px; background: var(--the); border: 1px solid var(--vien);
  border-radius: var(--r); box-shadow: var(--bong); padding: 6px; display: flex; flex-direction: column; }
.tab-day__ngan a { padding: 11px 14px; border-radius: var(--r-nho); color: var(--chu); text-decoration: none; font-weight: 600; }
.tab-day__ngan a:hover, .tab-day__ngan a[aria-current="page"] { background: var(--c-nhat); color: var(--c-dam); }
@media (min-width: 900px) {
  .tab-day { display: none; }
  .co-nhom .chinh { padding-bottom: 40px; }
  .tab-ngang { display: block; border-top: 1px solid var(--vien); }
  .tab-ngang__in { display: flex; gap: 2px; overflow-x: auto; }
  .tab-ngang a { padding: 10px 12px; color: var(--phu); text-decoration: none; font-weight: 600; font-size: .9375rem; white-space: nowrap; }
  .tab-ngang a:hover { color: var(--c-dam); }
  .tab-ngang a[aria-current="page"] { color: var(--c-dam); box-shadow: inset 0 -3px 0 var(--c); }
  .khung { max-width: 900px; }
}

/* Chân trang (ngoài nhóm) */
.chan { border-top: 1px solid var(--vien); background: var(--the); padding: 20px 0 28px; font-size: .875rem; color: var(--phu); }
.chan__lk { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; }

/* Nút */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--c); background: var(--c); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.nut:hover { background: var(--c-dam); border-color: var(--c-dam); color: #fff; }
.nut--vien { background: transparent; color: var(--c-dam); border-color: var(--c-vien); }
.nut--vien:hover { background: var(--c-nhat); color: var(--c-dam); }
.nut--nho { min-height: 36px; padding: 6px 14px; font-size: .875rem; }
.nut--nguy { background: transparent; color: var(--do); border-color: #efc2bd; }
.nut--nguy:hover { background: var(--do-nhat); color: var(--do); border-color: var(--do); }
.nut--khoi { width: 100%; }
.nut:disabled { opacity: .55; cursor: not-allowed; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.inline { display: inline; margin: 0; }

/* Thẻ, danh sách */
.the { background: var(--the); border: 1px solid var(--vien); border-radius: var(--r); box-shadow: var(--bong); padding: 16px; margin-bottom: 14px; }
.the__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.the__h h2, .the__h h3 { margin: 0; }
.the__h a { font-weight: 600; font-size: .9375rem; text-decoration: none; }
a.the { display: block; text-decoration: none; color: var(--chu); }
a.the:hover { border-color: var(--c-vien); }
.ds { list-style: none; margin: 0; padding: 0; }
.ds__muc { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--vien); }
.ds__muc:last-child { border-bottom: 0; }
.ds__muc > .ds__than { flex: 1; min-width: 0; }
.ds__muc a { color: var(--chu); text-decoration: none; font-weight: 600; }
.ds__muc a:hover { color: var(--c-dam); }
.tieu-de-trang { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; }
.tieu-de-trang h1 { margin: 0; }
.luoi-2 { display: grid; gap: 14px; }
@media (min-width: 720px) { .luoi-2 { grid-template-columns: 1fr 1fr; } }
.rong { text-align: center; color: var(--phu); padding: 28px 16px; background: var(--the); border: 1px dashed var(--vien); border-radius: var(--r); }

/* Nhãn */
.nhan { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--c-nhat); color: var(--c-dam); vertical-align: middle; }
.nhan--cam { background: var(--nhan-nhat); color: var(--nhan-dam); }
.nhan--xam { background: #eef0ed; color: var(--phu); }
.nhan--do { background: var(--do-nhat); color: var(--do); }
.nhan--xanh { background: var(--xanh-la-nhat); color: var(--xanh-la); }
.vt { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 6px; font-size: .6875rem; font-weight: 700; vertical-align: 1px; background: #eef0ed; color: var(--phu); }
.vt--giao_vien { background: var(--nhan-nhat); color: var(--nhan-dam); }
.vt--truong_nhom, .vt--ban_dai_dien { background: var(--c-nhat); color: var(--c-dam); }
.so-dem { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--do); color: #fff; font-size: .75rem; font-weight: 700; }

/* Ảnh đại diện chữ cái */
.anh-dd { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-nhat); color: var(--c-dam); font-weight: 800; }
.anh-dd--giao_vien { background: var(--nhan-nhat); color: var(--nhan-dam); }

/* Thông báo hệ thống */
.bao { padding: 12px 14px; border-radius: var(--r-nho); margin-bottom: 14px; border: 1px solid; font-size: .9375rem; }
.bao--ok { background: var(--xanh-la-nhat); border-color: #bfe2c9; color: #184d27; }
.bao--err { background: var(--do-nhat); border-color: #f1c2bc; color: #7a1a12; }
.bao--warn { background: var(--nhan-nhat); border-color: #f3d49b; color: #6b4309; }
.bao--info { background: #e9f1fb; border-color: #c4d8f1; color: #1c3f66; }

/* Form (khớp app/form.php) */
.form-luoi { display: grid; gap: 14px; }
@media (min-width: 720px) { .form-luoi--2 { grid-template-columns: 1fr 1fr; } .form-luoi--2 .field--full { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.field label { font-weight: 600; font-size: .9375rem; }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #cfd6d1; border-radius: var(--r-nho);
  font: inherit; color: var(--chu); background: #fff; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c); outline: 3px solid var(--c-nhat); }
.field--error input, .field--error select, .field--error textarea { border-color: var(--do); }
.field__err { color: var(--do); font-size: .875rem; margin: 0; }
.field__hint { color: var(--phu); font-size: .8125rem; margin: 0; }
.field--check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.field--check input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--c); }
.req { color: var(--do); }
.form-nut { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* Thanh tiến độ (đã đọc, số chỗ, kết quả khảo sát) */
.thanh-tien { height: 8px; border-radius: 999px; background: #e6ebe7; overflow: hidden; }
.thanh-tien > span { display: block; height: 100%; background: var(--c); border-radius: inherit; }

/* Bộ lọc dạng chip */
.tab-loc { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; }
.tab-loc a { padding: 6px 14px; border-radius: 999px; background: var(--the); border: 1px solid var(--vien); color: var(--chu); text-decoration: none; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.tab-loc a[aria-current="page"] { background: var(--c); border-color: var(--c); color: #fff; }

/* Trang chủ (chưa đăng nhập) */
.gt { text-align: center; padding: 28px 0 8px; }
.gt h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); color: var(--c-dam); }
.gt p { color: var(--phu); font-size: 1.0625rem; max-width: 36rem; margin: 0 auto 18px; }
.gt .hang-nut { justify-content: center; }
.gt-tinh { display: grid; gap: 12px; margin: 24px 0; }
@media (min-width: 720px) { .gt-tinh { grid-template-columns: repeat(2, 1fr); } }
.gt-tinh .the { display: flex; gap: 12px; margin: 0; }
.gt-tinh .bt { color: var(--c); flex: none; margin-top: 2px; }
.gt-tinh h3 { margin: 0 0 4px; }
.gt-tinh p { margin: 0; color: var(--phu); font-size: .9375rem; }

/* Đăng nhập nhanh tài khoản dùng thử */
.dung-thu { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.dung-thu form { margin: 0; }
.dung-thu button { width: 100%; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; border-radius: var(--r-nho); }
.dung-thu small { font-weight: 400; font-size: .75rem; }

/* Mã mời */
.ma-moi { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ma-moi__ma { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.5rem; font-weight: 800; letter-spacing: .12em; color: var(--c-dam);
  background: var(--c-nhat); padding: 6px 14px; border-radius: var(--r-nho); }
.o-link { display: flex; gap: 6px; } .o-link input { flex: 1; min-width: 0; min-height: 40px; padding: 6px 10px; border: 1px solid var(--vien); border-radius: var(--r-nho); font: inherit; font-size: .875rem; background: var(--bg); }

/* Trang văn bản (pháp lý, hướng dẫn) */
.van-ban { background: var(--the); border: 1px solid var(--vien); border-radius: var(--r); padding: 18px 20px; }
.van-ban h2 { margin-top: 1.3em; font-size: 1.125rem; }
.van-ban h2:first-child { margin-top: 0; }
.van-ban li { margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Chuông trên đầu trang + chuyển nhóm (29/9/2026) */
.chuong { position: relative; }
.chuong__so { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--do); color: #fff;
  font-size: .6875rem; font-weight: 800; line-height: 18px; text-align: center; border: 2px solid var(--the); box-sizing: content-box; }
.doi-nhom { position: relative; flex: none; }
.doi-nhom > summary { list-style: none; }
.doi-nhom > summary::-webkit-details-marker { display: none; }
.doi-nhom[open] > summary { background: var(--c-nhat); color: var(--c-dam); }
.doi-nhom__ds { position: absolute; left: -120px; top: calc(100% + 6px); width: min(300px, 88vw); background: var(--the); border: 1px solid var(--vien);
  border-radius: var(--r); box-shadow: var(--bong); padding: 6px; z-index: 50; }
.doi-nhom__h { margin: 4px 10px 6px; font-size: .75rem; font-weight: 700; color: var(--phu); text-transform: uppercase; letter-spacing: .06em; }
.doi-nhom__ds a { display: flex; flex-direction: column; padding: 9px 10px; border-radius: var(--r-nho); color: var(--chu); text-decoration: none; }
.doi-nhom__ds a:hover { background: var(--c-nhat); }
.doi-nhom__ds a span { font-size: .8125rem; color: var(--phu); }
.doi-nhom__ds a:last-child { border-top: 1px solid var(--vien); margin-top: 4px; }