/**
 * eTeacher Game — giao dien nguoi choi.
 * Trang doc lap, uu tien dien thoai (nguoi choi vao bang smartphone).
 * Font "Baloo 2" (variable 400-800): tron tria kieu game Kahoot, du tieng Viet.
 */
@font-face{
  font-family:"Baloo 2";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/baloo-2-var-vietnamese.woff2) format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:"Baloo 2";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/baloo-2-var-latin.woff2) format("woff2");
}
@font-face{
  font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/be-vietnam-pro-400-vietnamese.woff2) format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/be-vietnam-pro-400-latin.woff2) format("woff2");
}
@font-face{
  font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/be-vietnam-pro-700-vietnamese.woff2) format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/be-vietnam-pro-700-latin.woff2) format("woff2");
}

*{box-sizing:border-box;margin:0;padding:0}
/*
 * BAT BUOC: thuoc tinh hidden phai thang moi display cua class (mac dinh
 * stylesheet cua tac gia DE len [hidden] cua trinh duyet — tung lam dong ho
 * va thanh emoji hien ca o man khong duoc phep).
 */
[hidden]{display:none !important}
body{
  min-height:100vh;min-height:100dvh;
  background:linear-gradient(160deg,#4b3670,#805fa9 55%,#9678bd);
  font-family:"Baloo 2","Be Vietnam Pro","Segoe UI",Roboto,Arial,sans-serif;color:#1C1430;
}
/* Hai quang sang mo lo lung phia sau — san khau game bot phang lang */
body::before,body::after{
  content:"";position:fixed;border-radius:50%;filter:blur(70px);
  pointer-events:none;z-index:0;
}
body::before{width:46vw;height:46vw;left:-14vw;top:-12vw;background:rgba(245,158,11,.17)}
body::after{width:56vw;height:56vw;right:-18vw;bottom:-16vw;background:rgba(255,255,255,.11)}
.g{max-width:640px;margin:0 auto;padding:16px 16px 40px;position:relative;z-index:1}
.g-dau{display:flex;align-items:center;gap:12px;padding:8px 2px 18px;color:#fff}
.g-dau span{font-weight:700;opacity:.9}

.g-the{
  background:#fff;border-radius:22px;padding:28px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
  /* Moi lan chuyen canh (bo hidden) the truot nhe len — trang bot "tinh" */
  animation:gVaoCanh .4s cubic-bezier(.2,.9,.3,1);
}
@keyframes gVaoCanh{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.g-the h1{font-size:1.35rem;line-height:1.4;margin-bottom:10px;text-wrap:balance}
.g-mo{color:#6E6584;font-size:.95rem;line-height:1.6;margin:8px 0}
.g-loi{color:#E11D48;font-size:.9rem;margin:8px 0}

#g-form{display:grid;gap:12px;margin-top:14px}
/* Chon avatar khi vao buoi */
.g-avt-nhan{font-weight:700;color:#4b3670;font-size:.92rem;margin-bottom:-4px}
.g-avt-chon{display:flex;flex-wrap:wrap;gap:6px}
.g-avt-chon button{
  width:46px;height:46px;border-radius:50%;border:2px solid #E8E2F2;
  background:#FAF8FF;font-size:1.5rem;line-height:1;cursor:pointer;
  transition:transform .12s,border-color .12s,box-shadow .12s;
}
.g-avt-chon button:active{transform:scale(1.15)}
.g-avt-chon button.is-chon{
  border-color:#805fa9;background:#F1EAF8;
  box-shadow:0 0 0 3px rgba(128,95,169,.25);transform:scale(1.1);
}
#g-form input{
  border:2px solid #E8E2F2;border-radius:14px;padding:14px 16px;
  font:400 16px "Baloo 2","Be Vietnam Pro",sans-serif; /* 16px: chong iOS tu zoom */
}
#g-form input:focus{outline:0;border-color:#805fa9}
/* Nut kieu game: co "day" 3D, bam thi lun xuong (nhu Kahoot) */
.g-nut{
  border:0;border-radius:16px;padding:15px 16px;cursor:pointer;
  background:#F59E0B;color:#4b3670;font:800 1.1rem "Baloo 2","Be Vietnam Pro",sans-serif;
  letter-spacing:.01em;
  box-shadow:0 5px 0 #c47d06;
  transition:transform .1s,box-shadow .1s;
}
.g-nut:active{transform:translateY(4px);box-shadow:0 1px 0 #c47d06}
.g-nut:disabled{box-shadow:0 5px 0 #c47d06}

/* Sanh chung: khung tung phong dang mo */
.g-phong{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:12px 0;padding:14px 16px;text-decoration:none;
  background:#FAF8FF;border:2px solid #E8E2F2;border-radius:16px;
  transition:border-color .15s,transform .15s;
}
.g-phong:active{transform:scale(.98)}
.g-phong:hover{border-color:#805fa9}
.g-phong-tt{display:grid;gap:4px;min-width:0}
.g-phong-tt b{font-size:1.7rem;letter-spacing:.12em;color:#805fa9;line-height:1.2}
.g-phong-link{color:#443B5C;font-size:.85rem;font-weight:600;overflow-wrap:break-word}
.g-phong-mo{color:#6E6584;font-size:.82rem}
.g-phong-qr{flex:none;border:1px solid #E8E2F2;border-radius:10px;background:#fff;padding:4px}
.g-sanh-trong{
  text-align:center;padding:18px 12px;border:1px dashed #C9B8E0;border-radius:14px;
  background:#FAF8FF;
}
/* Vach "hoac nhap ma phong" */
.g-sanh-cach{
  display:flex;align-items:center;gap:12px;margin:18px 0 12px;
  color:#6E6584;font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
}
.g-sanh-cach::before,.g-sanh-cach::after{content:"";flex:1;height:1px;background:#E8E2F2}
#g-sanh-form{display:grid;gap:12px}
#g-sanh-form input{
  border:2px solid #E8E2F2;border-radius:14px;padding:14px 16px;
  font:400 16px "Baloo 2","Be Vietnam Pro",sans-serif; /* 16px: chong iOS tu zoom */
}
#g-sanh-form input:focus{outline:0;border-color:#805fa9}

/* Phong cho */
.g-xoay{
  width:52px;height:52px;margin:6px auto 18px;border-radius:50%;
  border:5px solid #EDE5F4;border-top-color:#805fa9;
  animation:gXoay 1s linear infinite;
}
@keyframes gXoay{to{transform:rotate(360deg)}}
#g-cho{text-align:center}

/* Chuyen vui doc trong luc cho */
.g-truyen{
  margin:16px 0;padding:16px 18px;text-align:left;
  background:#FAF8FF;border:1px dashed #C9B8E0;border-radius:14px;
}
.g-truyen span{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9a7cc0}
.g-truyen p{margin-top:8px;color:#443B5C;line-height:1.65}

/* Danh sach nguoi cung cho — o to hon, co avatar, nguoi moi vao nay len */
.g-cho-ds{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-height:220px;overflow:auto}
.g-cho-ds span{
  background:#F1EAF8;color:#4b3670;border-radius:999px;padding:8px 15px;
  font-size:.95rem;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;
}
.g-cho-ds span .avt{font-style:normal;font-size:1.2rem;line-height:1}
.g-cho-ds span.la-toi{background:#805fa9;color:#fff}
.g-cho-ds span.moi{animation:gChipNay .7s cubic-bezier(.2,1.5,.4,1)}
@keyframes gChipNay{
  0%{opacity:0;transform:translateY(14px) scale(.6)}
  55%{opacity:1;transform:translateY(-6px) scale(1.08)}
  100%{transform:none}
}
@keyframes gHien{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* Man choi */
.g-tien-do{display:flex;align-items:center;gap:12px;margin-bottom:10px}
#g-so-cau{font-weight:700;color:#805fa9;white-space:nowrap}
.g-vach{flex:1;height:8px;background:#EDE5F4;border-radius:99px;overflow:hidden}
.g-vach i{display:block;height:100%;background:#805fa9;border-radius:99px;transition:width .3s}
/* Dong ho dem nguoc: SO GIAY TO + thanh chay, sap het gio chuyen do */
.g-gio{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.g-gio-so{
  flex:none;min-width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;font-size:1.5rem;
  background:#FDF3E3;color:#B45309;border:3px solid #F59E0B;
  font-variant-numeric:tabular-nums;
}
.g-gio-vach{flex:1;height:12px;background:#FDF3E3;border-radius:99px;overflow:hidden}
.g-gio-vach i{display:block;height:100%;background:#F59E0B;border-radius:99px}
.g-gio.sap-het .g-gio-so{background:#FDE7EC;color:#E11D48;border-color:#E11D48;animation:gNhay .5s ease-in-out infinite}
.g-gio.sap-het .g-gio-vach i{background:#E11D48}
@keyframes gNhay{50%{transform:scale(1.12)}}
.g-choi h1{font-size:1.25rem;margin:6px 0 18px}
.g-dapan{display:grid;gap:10px}
.g-da{
  display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  border:2px solid transparent;border-radius:16px;padding:13px 14px;
  font:600 1rem "Baloo 2","Be Vietnam Pro",sans-serif;
  box-shadow:0 4px 0 rgba(28,20,48,.09); /* "day" 3D kieu game */
  transition:transform .1s,border-color .12s,box-shadow .12s;
  animation:gDapVao .32s cubic-bezier(.2,.9,.3,1) both; /* hien lan luot, delay dat trong JS */
}
.g-da:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(28,20,48,.09)}
.g-da b{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-size:1rem;font-weight:700;
}
/* Dang chon: vien tim dam + vong sang — nhin phat biet ngay o nao */
.g-da.is-chon{
  border-color:#805fa9;
  box-shadow:0 0 0 3px rgba(128,95,169,.22),0 4px 0 rgba(28,20,48,.09);
}
/* Cham vao o nao thi o do nay nhe len mot cai */
.g-da.nay{animation:gNayO .3s cubic-bezier(.2,1.6,.4,1)}
@keyframes gNayO{40%{transform:translateY(-5px) scale(1.02)}}
@keyframes gDapVao{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* Nut gui dap an — bam vao day moi tinh, con lai doi lua chon thoai mai */
.g-gui{margin-top:16px;width:100%}
.g-gui:disabled{opacity:.45;cursor:not-allowed}
/* 6 mau PASTEL nhe nhang (do sao nhang, de tap trung doc de) — chu dam cung tong */
.g-da--0{background:#EFE9FA;color:#43355E}
.g-da--0 b{background:#DCCFF2;color:#43355E}
.g-da--1{background:#E4EEFB;color:#2D4468}
.g-da--1 b{background:#C9DDF6;color:#2D4468}
.g-da--2{background:#E0F3EE;color:#1F5548}
.g-da--2 b{background:#C2E6DD;color:#1F5548}
.g-da--3{background:#FCF0DE;color:#6B4A14}
.g-da--3 b{background:#F6DFB9;color:#6B4A14}
.g-da--4{background:#FBE8F1;color:#6B2E4F}
.g-da--4 b{background:#F4CCE1;color:#6B2E4F}
.g-da--5{background:#FDEAE6;color:#6E3128}
.g-da--5 b{background:#F6CFC7;color:#6E3128}

/* Cau nhieu dap an dung (kiem tra) */
.g-nhieu{
  margin:-8px 0 12px;padding:8px 12px;border-radius:10px;
  background:#FDF3E3;color:#B45309;font-size:.88rem;font-weight:600;
}
/* O dien cho trong (kiem tra) */
.g-dien{
  width:100%;border:2px solid #E8E2F2;border-radius:14px;padding:14px 16px;
  font:400 16px "Baloo 2","Be Vietnam Pro",sans-serif; /* 16px: chong iOS tu zoom */
}
.g-dien:focus{outline:0;border-color:#805fa9}

/* Ket qua rieng */
.g-xong-logo{display:block;height:40px;width:auto;margin:0 auto 10px}
/* Tieu de bai kiem tra: hang rieng duoi logo, dai may cung xuong dong gon */
.g-xong-ten{
  text-align:center;font-weight:700;color:#805fa9;font-size:1.05rem;
  line-height:1.45;margin:0 0 14px;text-wrap:balance;overflow-wrap:break-word;
}
#g-xong h1{text-align:center}
.g-kq-bar{display:flex;align-items:center;gap:10px;margin:9px 0}
.g-kq-bar b{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:#805fa9;color:#fff;
}
.g-kq-bar i{height:22px;background:#9a7cc0;border-radius:8px;transition:width .5s}
.g-kq-bar span{font-weight:600;color:#4b3670;white-space:nowrap}
.g-danh-gia{
  margin:18px 0 8px;padding:16px;border-radius:14px;
  background:#F1EAF8;border:1px solid #E8E2F2;
}
.g-danh-gia b{color:#4b3670}
.g-danh-gia p{margin-top:6px;color:#443B5C;line-height:1.6}

/* Thanh tha emoji (sanh cho / man ket qua) — to, da mat, bay len man chieu */
.g-emoji{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:40;
  display:flex;gap:2px;padding:8px 10px;border-radius:999px;
  background:rgba(255,255,255,.96);box-shadow:0 10px 34px rgba(28,20,48,.35);
}
.g-emoji button{
  border:0;background:none;cursor:pointer;font-size:3rem;line-height:1;
  padding:5px;border-radius:50%;transition:transform .12s;
}
.g-emoji button:active{transform:scale(1.2)}
.g-emoji button.nay{animation:gEmojiNay .5s ease}
@keyframes gEmojiNay{40%{transform:scale(1.35) rotate(-10deg)}}
@media (max-width:400px){.g-emoji button{font-size:2.6rem;padding:4px}}
/* Chua cho thanh emoji khoi de len noi dung cuoi trang */
body.co-emoji .g{padding-bottom:120px}

/* Dai bao mang chap chon — noi tren cung, khong chan thao tac */
#g-mang{
  position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:60;
  background:#B45309;color:#fff;font-weight:700;font-size:.85rem;
  border-radius:999px;padding:8px 16px;box-shadow:0 8px 24px rgba(0,0,0,.35);
  white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis;
}

/* Emoji bay tai cho tren may nguoi choi khi vua bam tha */
#g-bay{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:41}
#g-bay span{
  position:absolute;font-size:2.6rem;transform:translateX(-50%);
  animation:gBayLen 1.5s ease-out forwards;
}
@keyframes gBayLen{
  0%{opacity:0;transform:translate(-50%,0) scale(.5)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--lech,0px)),-46vh) scale(1.5)}
}

/* Ket qua KIEM TRA: diem to + hang + xem lai tung cau */
#g-nop{text-align:center}
#g-het{text-align:center}
.g-diem-to{
  display:flex;align-items:baseline;justify-content:center;gap:8px;
  margin:6px 0 2px;color:#805fa9;
}
.g-diem-to b{font-size:3rem;font-variant-numeric:tabular-nums;line-height:1.1}
.g-diem-to span{font-weight:700;color:#9a7cc0}
.g-hang{
  text-align:center;font-weight:700;color:#B45309;background:#FDF3E3;
  border-radius:999px;padding:8px 16px;width:fit-content;margin:6px auto 16px;
}
.g-diem-h2{font-size:1.05rem;color:#4b3670;margin:14px 0 8px}
.g-kq-cau{
  margin:10px 0;padding:12px 14px;border-radius:14px;border:1px solid #E8E2F2;
  background:#FAF8FF;
}
.g-kq-cau.la-dung{border-color:#BBE7CB;background:#F2FBF5}
.g-kq-cau.la-sai{border-color:#F6CBD3;background:#FDF5F6}
.g-kq-cau-hoi{font-weight:700;color:#1C1430;line-height:1.5}
.g-kq-cau-minh{margin-top:6px;color:#443B5C;line-height:1.5}
.g-kq-cau-dung{margin-top:4px;color:#0D7A3F;font-weight:600;line-height:1.5}
.g-kq-cau-diem{margin-top:4px;font-weight:700;color:#B45309;font-variant-numeric:tabular-nums}

@media (min-width:700px){
  .g{padding-top:36px}
  .g-the{padding:36px 34px}
  .g-the h1{font-size:1.5rem}
}