/* ============================================================
   GIAO DIEN "VU TRU HONG PHAN" (06/10/2026) - nap SAU chung.css va sau phan <style> cua tung trang.
   Chi doi mau sac / hinh dang; khong doi cach hoat dong. Muon ve giao dien cu: bo dong <link ... vu-tru.css> o cac trang.
   ============================================================ */
:root{
  --xanh:#d63f8a;            /* hong dam: vien o dang chon, chu nhan */
  --xanh-nhat:#ffe6f1;
  --xanh-dam:#7a1f52;        /* chu tieu de */
  --nen:transparent;
  --the:rgba(255,255,255,.74);
  --chu:#4a1233; --chu-mo:#8a5a74;
  --vien:rgba(214,92,150,.22);
  --bo-goc:22px;
  --bong:0 18px 48px rgba(190,70,130,.16), inset 0 1px 0 rgba(255,255,255,.9);
  --vt-nut:linear-gradient(135deg,#ff9cc8 0%,#f0569c 58%,#d63f8a 100%);
}
/* nen tinh van hong + sao nho (ve bang SVG, khong can file anh) */
html{
  min-height:100%;
  background-color:#ffe1ef;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='680'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='31' cy='44' r='1.6'/%3E%3Ccircle cx='148' cy='236' r='1.1'/%3E%3Ccircle cx='287' cy='83' r='1.9'/%3E%3Ccircle cx='452' cy='171' r='1.2'/%3E%3Ccircle cx='671' cy='322' r='1.7'/%3E%3Ccircle cx='383' cy='455' r='1.2'/%3E%3Ccircle cx='203' cy='571' r='1.8'/%3E%3Ccircle cx='67' cy='398' r='1.2'/%3E%3Ccircle cx='541' cy='607' r='1'/%3E%3Ccircle cx='712' cy='71' r='1.3'/%3E%3Ccircle cx='598' cy='443' r='1.5'/%3E%3Ccircle cx='331' cy='291' r='1'/%3E%3C/g%3E%3Cg fill='%23e8418f' fill-opacity='.5'%3E%3Ccircle cx='92' cy='141' r='1.1'/%3E%3Ccircle cx='391' cy='37' r='1'/%3E%3Ccircle cx='511' cy='287' r='1.2'/%3E%3Ccircle cx='233' cy='377' r='.9'/%3E%3Ccircle cx='127' cy='651' r='1.1'/%3E%3Ccircle cx='703' cy='533' r='1'/%3E%3Ccircle cx='23' cy='263' r='.9'/%3E%3Ccircle cx='623' cy='187' r='1'/%3E%3Ccircle cx='447' cy='629' r='.9'/%3E%3C/g%3E%3Cg stroke='%23e8418f' stroke-opacity='.28' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M213 131h12M219 125v12'/%3E%3Cpath d='M633 371h10M638 366v10'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1100px 650px at 82% 4%, rgba(255,143,192,.62), transparent 62%),
    radial-gradient(900px 620px at 4% 98%, rgba(196,160,255,.50), transparent 62%),
    radial-gradient(800px 520px at 46% 58%, rgba(255,200,170,.42), transparent 66%),
    linear-gradient(160deg,#fff4fa 0%,#ffe1ef 45%,#ffd0e6 100%);
  background-attachment:fixed;
}
body{background:transparent !important;color:var(--chu)}

/* ---------- the, o nhap, nut ---------- */
.the{background:var(--the);border:1px solid rgba(255,255,255,.92);border-radius:var(--bo-goc);box-shadow:var(--bong);
     -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
input[type=text],input[type=password],select,textarea,.o-dien{
  border:1.5px solid var(--vien);border-radius:14px;background:rgba(255,255,255,.86);color:var(--chu)}
input:focus,select:focus,textarea:focus,.o-dien:focus{border-color:var(--xanh);box-shadow:0 0 0 4px rgba(214,63,138,.12)}
.nut{border-radius:999px;background:var(--vt-nut);color:#fff;
     box-shadow:0 8px 22px rgba(214,63,138,.30), inset 0 1px 0 rgba(255,255,255,.45)}
.nut-nho{border-radius:999px}
.nut-phu{background:rgba(255,255,255,.82);color:var(--xanh-dam);border:1.5px solid rgba(214,63,138,.55);box-shadow:none}
.nut-xam{background:rgba(255,255,255,.62);color:#7a4a62;border:1.5px solid var(--vien);box-shadow:none}
.nut-do{background:linear-gradient(135deg,#ff8a8a,#dc2626);box-shadow:0 8px 22px rgba(220,38,38,.25)}
.tab{background:rgba(255,255,255,.6);border-radius:999px;padding:5px;gap:4px}
.tab button{border:0;background:transparent;border-radius:999px;color:var(--chu-mo)}
.tab button.chon{background:var(--vt-nut);color:#fff;box-shadow:0 6px 16px rgba(214,63,138,.32)}
.bao{border-radius:14px}

/* ---------- dau trang (chon de, lam bai, giao vien, soan de...) ---------- */
.dinh{background:transparent;color:var(--xanh-dam)}
.dinh h1,.ten-web{background:linear-gradient(90deg,#7a1f52,#e8418f 60%,#ff9a6a);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.anh-logo{border:3px solid #fff;box-shadow:0 0 0 5px rgba(255,255,255,.45),0 10px 30px rgba(214,63,138,.35)}

/* huy hieu / nhan nho dung chung */
.vt-huy{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 13px;font-weight:700;font-size:13px;
        background:rgba(255,255,255,.66);border:1px solid var(--vien);color:#a8336f}

/* ============================================================
   TRANG DANG NHAP (index.html)
   ============================================================ */
.trang-chu::before,.trang-chu::after{display:none}
.trang-chu .khung-chao{max-width:1240px;padding:30px 44px;grid-template-columns:minmax(0,1.12fr) minmax(380px,.78fr);gap:44px;align-items:center}
.vt-trai{position:relative;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:8px 0}
.vt-logo{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.vt-logo h1{margin:0;font-size:24px;font-weight:800;letter-spacing:.16em;color:var(--xanh-dam)}
.vt-logo i{width:38px;height:38px;border-radius:50%;display:block;position:relative;flex:none;
  background:radial-gradient(circle at 32% 30%,#fff 0,#ffd3e6 18%,#ff7fb8 55%,#b23a7d 100%);box-shadow:0 0 22px rgba(255,111,174,.75)}
.vt-logo i::after{content:"";position:absolute;left:-9px;right:-9px;top:15px;height:9px;border:2px solid rgba(232,65,143,.75);border-radius:50%;transform:rotate(-18deg);border-top-color:transparent}
.vt-trai > .vt-huy{align-self:flex-start}
.vt-tieu{margin:18px 0 14px;font-size:clamp(38px,5.2vw,62px);line-height:1.06;font-weight:800;letter-spacing:-.02em;color:#4a1233;max-width:11.5em}
.vt-tieu b{background:linear-gradient(90deg,#e8418f,#ff7fb8 55%,#ff9a6a);-webkit-background-clip:text;background-clip:text;color:transparent}
.vt-phu{margin:0;font-size:18px;line-height:1.6;color:var(--chu-mo);max-width:30em}
.vt-chip{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
/* anh co trong "hanh tinh" co vanh dai + loi chao */
.vt-co{display:flex;align-items:center;gap:26px;margin-top:30px}
.vt-hanh-tinh{position:relative;flex:none;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle at 30% 28%,#ffe3ef,#ff9ecb 30%,#e0559a 70%);
  box-shadow:0 0 0 6px rgba(255,255,255,.75),0 0 60px rgba(255,111,174,.55),0 20px 50px rgba(190,70,130,.30)}
.vt-hanh-tinh .anh-chao{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 30%}
.vt-hanh-tinh::after{content:"";position:absolute;left:-34px;right:-34px;top:50%;height:58px;margin-top:-10px;border:3px solid rgba(232,65,143,.55);
  border-radius:50%;transform:rotate(-14deg);border-top-color:transparent;pointer-events:none}
.trang-chu .loi-chao{position:relative;top:auto;right:auto;left:auto;max-width:330px;padding:16px 20px;font-size:18px;line-height:1.45;
  border-radius:22px 22px 22px 8px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);color:#7a1f52;
  box-shadow:0 14px 36px rgba(190,70,130,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.trang-chu .loi-chao::after{display:none}
/* the dang nhap */
.trang-chu .the-dang-nhap{padding:26px 28px 24px;border-radius:26px;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 24px 64px rgba(190,70,130,.20), inset 0 1px 0 rgba(255,255,255,.95)}
.trang-chu .dau-the{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;text-align:left;margin-bottom:16px}
.trang-chu .logo-nho{grid-row:1 / span 2;width:58px;height:58px;margin:0;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 4px rgba(255,255,255,.5),0 8px 22px rgba(214,63,138,.30)}
.trang-chu .dau-the h2{font-size:25px;color:#4a1233;align-self:end;letter-spacing:0}
.trang-chu .dau-the p{margin:0;align-self:start;font-size:14.5px}
.trang-chu .the-dang-nhap .tab{padding:5px;border-radius:999px;background:rgba(255,255,255,.62);gap:4px}
.trang-chu .the-dang-nhap .tab button{border-radius:999px;color:var(--chu-mo)}
.trang-chu .the-dang-nhap .tab button.chon{background:var(--vt-nut);color:#fff;box-shadow:0 6px 16px rgba(214,63,138,.32)}
.trang-chu .the-dang-nhap input[type=text],.trang-chu .the-dang-nhap input[type=password],.trang-chu .lop-dang-ky{background:rgba(255,255,255,.86);border-color:var(--vien)}
.trang-chu .the-dang-nhap .nut-to{box-shadow:0 10px 26px rgba(214,63,138,.36), inset 0 1px 0 rgba(255,255,255,.45)}
.trang-chu .luu-mk{background:rgba(255,255,255,.6);border:1.5px solid var(--vien);border-radius:14px}
.trang-chu .game-entry{border:1.5px solid rgba(196,160,255,.7);border-radius:18px;background:linear-gradient(135deg,rgba(243,236,255,.9),rgba(255,236,246,.9));box-shadow:none}
.trang-chu .game-entry a{border-radius:999px;background:linear-gradient(135deg,#a78bfa,#7c5ce7);box-shadow:0 6px 16px rgba(124,92,231,.35)}
.trang-chu .game-entry a:active{box-shadow:0 3px 10px rgba(124,92,231,.35)}
.trang-chu .dong-nho{color:#a06a86}
@media(max-width:860px){
  .trang-chu .khung-chao{display:block;padding:16px 14px}
  .vt-trai{display:block;padding:0;margin-bottom:14px}
  .vt-logo{margin-bottom:12px}
  .vt-tieu{font-size:30px;margin:10px 0 0;max-width:none}
  .vt-co{margin-top:14px;gap:16px}
  .vt-hanh-tinh{width:118px;height:118px}
  .vt-hanh-tinh::after{left:-18px;right:-18px;height:34px;margin-top:-6px;border-width:2px}
  .trang-chu .loi-chao{font-size:15px;padding:11px 14px;max-width:none;flex:1}
}
@media(max-width:560px){
  /* dien thoai: o dang nhap phai hien ngay tren man hinh dau */
  .vt-an-dt{display:none !important}
  .vt-logo{margin-bottom:6px}.vt-logo h1{font-size:19px}.vt-logo i{width:30px;height:30px}.vt-logo i::after{top:11px;height:8px;left:-7px;right:-7px}
  .vt-tieu{font-size:23px;line-height:1.15}
  .vt-co{margin-top:10px;gap:14px}
  .vt-hanh-tinh{width:84px;height:84px;box-shadow:0 0 0 4px rgba(255,255,255,.75),0 0 30px rgba(255,111,174,.5)}
  .vt-hanh-tinh::after{left:-12px;right:-12px;height:24px;margin-top:-4px}
  .trang-chu .loi-chao{font-size:13.5px;line-height:1.38;padding:9px 12px;border-radius:16px 16px 16px 6px}
  .trang-chu .the-dang-nhap{padding:14px 15px 16px;border-radius:22px}
  .trang-chu .dau-the{margin-bottom:10px;column-gap:11px}
  .trang-chu .logo-nho{width:44px;height:44px}
  .trang-chu .dau-the h2{font-size:20px}
  .trang-chu .dau-the p{font-size:13px}
}

/* khi in ra giay: nen trang */
@media print{ html{background:#fff !important} .the{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} }

/* ============================================================
   TRANG CHON DE (chon-de.html): moi de la mot "hanh tinh"
   ============================================================ */
.nut-xuat{background:rgba(255,255,255,.7);border:1px solid var(--vien) !important}
button.de{background:var(--the);border:1px solid rgba(255,255,255,.92);border-radius:22px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
button.de:hover{border-color:var(--mau-de,var(--xanh));box-shadow:0 22px 54px rgba(190,70,130,.22)}
button.de .bt{position:relative;flex:none;width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;
        background:radial-gradient(circle at 30% 26%,#fff 0,#ffe3ef 34%,#ffb5d6 78%,#ff9ecb 100%);
        box-shadow:0 0 0 3px rgba(255,255,255,.8),0 0 22px rgba(255,111,174,.45)}
button.de .bt::after{content:"";position:absolute;left:-10px;right:-10px;top:50%;height:18px;margin-top:-3px;border:2px solid var(--mau-de,#e8418f);opacity:.55;
               border-radius:50%;transform:rotate(-14deg);border-top-color:transparent;pointer-events:none}
button.de .di{padding:8px 14px;border-radius:999px;background:var(--vt-nut);color:#fff !important;font-size:14px;box-shadow:0 6px 16px rgba(214,63,138,.28)}
.the-nho{background:rgba(255,255,255,.75);border:1px solid var(--vien);color:#8f3358}
.nhom-tb{color:#c2337c}
.tb,.bai-nop{border-radius:20px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tb{background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,236,246,.82));border:1.5px solid rgba(214,63,138,.5)}
.game-link{border:1.5px solid rgba(196,160,255,.7) !important;border-radius:20px !important;background:linear-gradient(135deg,rgba(243,236,255,.9),rgba(255,236,246,.9)) !important}

/* ============================================================
   TRANG LAM BAI (lam-bai.html)
   ============================================================ */
.thanh-tren{background:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
#day{background:rgba(255,255,255,.74);border-top:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}