/* =====================================================================
   GIAO DIỆN GÓC ÔN TẬP DÙNG CHUNG
   Dùng cho mục /game của trang gia phả và trang Góc ôn tập.
   Bám theo ảnh mẫu: banner ảnh ở đầu trang, tấm trắng bo góc chứa ba
   khối (Học tập xanh, Trò chơi tư duy cam, Thư viện sách xanh lá),
   footer ảnh có nút liên hệ đặt đè. Trang con "Xem thêm" dùng màu khối.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap&subset=vietnamese');

.gc-trang{
  --gc-xanh:#1b78f2; --gc-xanh-2:#4fb6fb; --gc-xanh-nhat:#e9f5ff; --gc-xanh-vien:#a9d4fb;
  --gc-cam:#f08a12; --gc-cam-2:#fbb63c; --gc-cam-nhat:#fff8ef; --gc-cam-vien:#f7cf98;
  --gc-la:#1fae84; --gc-la-2:#a9e8c4; --gc-la-nhat:#f2fbf6; --gc-la-vien:#9edcc0;
  --gc-dam:#13338a; --gc-chu:#26385c; --gc-mo:#5f6d86;
  min-height:100%;background:#dff1ff;color:var(--gc-chu);
  font-family:'Be Vietnam Pro',system-ui,sans-serif}
.gc-trang *{box-sizing:border-box}
.gc-trang h1,.gc-trang h2{font-family:'Baloo 2',system-ui,sans-serif;margin:0}
.gc-an{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Đầu trang: ảnh banner ---------- */
.gc-hero{position:relative;background:#cdeaff;line-height:0}
.gc-banner{display:block;width:100%;height:auto;aspect-ratio:1755/184;object-fit:cover}

/* ---------- Tấm trắng chứa các khối ---------- */
.gc-than{position:relative;z-index:1;margin:-14px 0 0;padding:24px 2.6% 26px;
  background:#fff;border-radius:28px 28px 0 0;box-shadow:0 -4px 18px rgba(20,90,170,.08)}
.gc-hai{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px}

/* Khối: viền màu, thân nhạt */
.gc-khoi{--m1:var(--gc-xanh);--m2:var(--gc-xanh-2);--nhat:var(--gc-xanh-nhat);--vien:var(--gc-xanh-vien);
  border-radius:20px;border:2px solid var(--vien);background:var(--nhat);overflow:hidden;
  box-shadow:0 6px 18px rgba(20,90,170,.06)}
.gc-khoi.cam{--m1:var(--gc-cam);--m2:var(--gc-cam-2);--nhat:var(--gc-cam-nhat);--vien:var(--gc-cam-vien)}
.gc-khoi.la{--m1:var(--gc-la);--m2:var(--gc-la-2);--nhat:var(--gc-la-nhat);--vien:var(--gc-la-vien)}

/* Thanh đầu khối: nền nhạt, tab đậm vát mép phải chứa biểu tượng và tên */
.gc-dau{display:flex;align-items:center;gap:14px;min-height:58px;padding-right:14px;color:#fff;
  background:linear-gradient(90deg,var(--m2),color-mix(in srgb,var(--m2) 70%,#fff))}
.gc-tab{flex:none;display:flex;align-items:center;gap:12px;align-self:stretch;
  padding:6px 34px 6px 12px;background:linear-gradient(90deg,var(--m1),color-mix(in srgb,var(--m1) 70%,var(--m2)));
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%)}
.gc-bieu{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#e6f3ff 70%);font-size:25px;
  box-shadow:0 2px 0 rgba(0,0,0,.08),inset 0 0 0 2px rgba(255,255,255,.7)}
.gc-dau h2{font-size:28px;font-weight:800;line-height:1;white-space:nowrap;text-shadow:0 2px 0 rgba(0,0,0,.12)}
.gc-khau{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.35;text-shadow:0 1px 1px rgba(0,0,0,.08)}
.gc-xem{flex:none;display:inline-flex;align-items:center;gap:4px;padding:7px 12px 7px 14px;border:0;
  border-radius:999px;background:#fff;color:var(--m1);cursor:pointer;
  font:700 13px/1 'Be Vietnam Pro',sans-serif;box-shadow:0 2px 6px rgba(0,0,0,.1);transition:transform .15s ease}
.gc-xem:hover{transform:translateX(2px)}
.gc-xem svg,.gc-mui svg,.gc-choi svg,.gc-lui svg{width:14px;height:14px}

/* Lưới thẻ: ba cột như ảnh mẫu */
.gc-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:14px}
.gc-the{display:flex;flex-direction:column;align-items:flex-start;text-align:left;cursor:pointer;
  padding:18px 18px 16px;border-radius:16px;border:1px solid #e3ecf8;background:#fff;font-family:inherit;
  box-shadow:0 4px 12px rgba(20,90,170,.07);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.gc-the:not(.sap):hover{transform:translateY(-3px);border-color:var(--m1);box-shadow:0 14px 26px rgba(20,90,170,.14)}
.gc-hinh{flex:none;align-self:center;width:78px;height:78px;margin-bottom:14px;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,var(--n1),var(--n2));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 6px 12px rgba(20,60,140,.22)}
.gc-hinh svg{width:100%;height:100%;display:block}
.gc-noi{display:block;min-width:0;width:100%}
.gc-noi b{display:block;font-family:'Baloo 2',sans-serif;font-size:19px;font-weight:800;color:var(--gc-dam);line-height:1.25}
.gc-noi small{display:block;margin-top:6px;font-size:13.5px;color:var(--gc-chu);line-height:1.55}
.gc-noi em{display:inline-block;margin-top:12px;padding:4px 12px;border-radius:999px;font-style:normal;
  font-size:12px;font-weight:700;background:#f6ebc9;color:#7a5a12}
.gc-the.sap{cursor:default}
.gc-the.sap .gc-hinh{filter:grayscale(.5);opacity:.75}
.gc-the.sap .gc-noi em{background:#eceff5;color:var(--gc-mo)}

/* Trò chơi tư duy: thẻ nền hồng đào, chữ canh giữa, nhãn hồng chữ đỏ */
.gc-khoi.cam .gc-the{align-items:center;text-align:center;background:#fffaf4;border-color:#fbe3c8}
.gc-khoi.cam .gc-noi em{background:#fde3dc;color:#cf3a22}

/* Thư viện sách: tranh áp mép trái, bốn ô một hàng */
.gc-than-sach{display:flex;align-items:stretch;background:#fff}
/* Tranh rộng đúng bằng tab tên khối phía trên (--rong-tab do game-chung.js đo),
   mép phải tranh thẳng với mũi nhọn của tab, chừa chỗ cho các ô sách */
.gc-tranh{flex:none;width:var(--rong-tab,200px);object-fit:cover;object-position:left center}
.gc-luoi-sach{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 14px;padding:20px 16px 16px}
.gc-sach{position:relative;display:flex;align-items:center;gap:12px;text-align:left;padding:16px 12px 16px 16px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--mau) 14%,#fff);background:var(--nen,#fff);font-family:inherit;
  cursor:pointer;transition:transform .15s ease}
.gc-sach:not(.sap):hover{transform:translateY(-2px)}
.gc-sach.sap{cursor:default}
.gc-sach-bieu{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--nen-bieu,#fff);font-size:28px}
.gc-sach .gc-noi{flex:1}
.gc-sach .gc-noi b{font-family:'Be Vietnam Pro',sans-serif;font-size:15px;font-weight:700;color:var(--gc-dam)}
.gc-sach .gc-noi small{margin-top:3px;font-size:12.5px;color:var(--gc-mo);line-height:1.45}
.gc-mui{flex:none;color:var(--mau)}
.gc-mui svg{width:18px;height:18px}
/* Nhãn "Sắp ra mắt" gắn ở mép trên ô, không chiếm chỗ của chữ */
.gc-sap{position:absolute;top:-9px;right:12px;padding:2px 9px;border-radius:999px;font-style:normal;white-space:nowrap;
  font-size:10.5px;font-weight:700;background:#fff;color:var(--mau);border:1px solid color-mix(in srgb,var(--mau) 40%,#fff);
  box-shadow:0 2px 6px rgba(20,60,140,.08)}
.gc-sach.sap .gc-mui{opacity:.55}

/* ---------- Chân trang: ảnh footer, nút liên hệ đặt đè ---------- */
.gc-chan{position:relative;line-height:0;background:#0d55c6}
.gc-footer{display:block;width:100%;height:auto;aspect-ratio:1755/154;object-fit:cover}
.gc-lien{position:absolute;left:68%;top:56%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:12px;padding:8px 22px 8px 9px;border-radius:999px;line-height:1.2;
  background:rgba(8,40,120,.55);border:1px solid rgba(255,255,255,.25);color:#fff;text-decoration:none;
  backdrop-filter:blur(2px);transition:background .15s ease}
.gc-lien:hover{background:rgba(8,40,120,.75)}
.gc-lien i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:#1767d8}
.gc-lien i svg{width:19px;height:19px}
.gc-lien span{display:flex;flex-direction:column}
.gc-lien small{font-size:12.5px;opacity:.9}
.gc-lien b{font-size:17px;letter-spacing:.02em}

/* ---------- Trang con "Xem thêm" ---------- */
.gc-trang-con{padding-bottom:30px}
.gc-con-dau{--m1:var(--gc-xanh);--m2:var(--gc-xanh-2);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 18px;
  padding:16px max(18px,calc((100% - 1180px)/2)) 34px;color:#fff;background:linear-gradient(110deg,var(--m1),var(--m2))}
.gc-con-dau.cam{--m1:var(--gc-cam);--m2:var(--gc-cam-2)}
.gc-con-dau.la{--m1:var(--gc-la);--m2:var(--gc-la-2)}
.gc-lui{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px 6px 9px;border:0;border-radius:999px;background:rgba(255,255,255,.24);color:#fff;
  cursor:pointer;font:700 13px/1 'Be Vietnam Pro',sans-serif}
.gc-lui:hover{background:rgba(255,255,255,.36)}
.gc-con-tieu{display:flex;align-items:center;gap:14px;min-width:0}
.gc-con-tieu .gc-bieu{width:60px;height:60px;font-size:32px}
.gc-con-tieu h1{font-size:clamp(30px,5vw,42px);font-weight:800;line-height:1.05;text-shadow:0 2px 0 rgba(0,0,0,.12)}
.gc-con-tieu p{margin:4px 0 0;font-size:14px;font-weight:600;opacity:.95}
.gc-dem{padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.24);font-size:13px;font-weight:700}
.gc-con-than{max-width:1180px;margin:-18px auto 0;padding:0 18px;position:relative}
.gc-luoi.rong{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;padding:0}
.gc-the.rong{flex-direction:row;align-items:flex-start;text-align:left;padding:18px;gap:16px;
  --m1:var(--gc-xanh);--m2:var(--gc-xanh-2)}
.gc-con-dau.cam ~ .gc-con-than .gc-the.rong{--m1:var(--gc-cam);--m2:var(--gc-cam-2)}
.gc-the.rong .gc-hinh{width:96px;height:96px;margin:0;border-radius:20px}
.gc-choi{display:inline-flex;align-items:center;gap:4px;margin:12px 0 0 10px;padding:7px 14px;border-radius:999px;
  font-style:normal;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(90deg,var(--m1),var(--m2))}
.gc-the.sap .gc-choi{background:#e3e9f2;color:var(--gc-mo)}
.gc-luoi-sach.rong{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));padding:0}
.gc-luoi-sach.rong .gc-sach{padding:18px;box-shadow:0 4px 12px rgba(20,90,170,.06)}

/* ---------- Khung chơi ----------
   Thanh trên cùng thay cho nút nổi. Nút nổi đè lên nút quay lại
   và tiêu đề của chính trò chơi, nhất là trên điện thoại. */
.khung-game{position:absolute;inset:0;background:#0b1f4d;display:flex;flex-direction:column}
#khungGame{display:block;width:100%;flex:1;border:0;min-height:0}
/* Thanh kéo để thoát: rãnh bo tròn, núm tròn ở mép phải, kéo sang trái */
.ve-game{flex:none;display:flex;align-items:center;padding:7px 10px;width:100%;
  border-bottom:1px solid rgba(255,255,255,.14);background:rgba(10,29,71,.95)}
.vg-ray{--tien:0;position:relative;width:min(340px,100%);height:40px;border-radius:999px;
  background:rgba(255,255,255,.1);box-shadow:inset 0 1px 3px rgba(0,0,0,.35);overflow:hidden;
  user-select:none;-webkit-user-select:none}
.vg-chu{position:absolute;inset:0;display:flex;align-items:center;gap:3px;padding:0 54px 0 14px;
  color:rgba(255,255,255,.8);font:600 13px/1 'Be Vietnam Pro',sans-serif;white-space:nowrap;
  opacity:calc(1 - var(--tien) * 1.4);pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.35),#fff 40%,rgba(255,255,255,.35)) 0 0/200% 100%;
  -webkit-background-clip:text;background-clip:text;animation:vg-anh 2.4s linear infinite}
.vg-chu b{font-weight:800;color:#ffd77a;-webkit-text-fill-color:#ffd77a}
.vg-chu svg{width:13px;height:13px;flex:none;color:#ffd77a}
.vg-chu svg + svg{margin-left:-8px}
@keyframes vg-anh{to{background-position:-200% 0}}
.vg-day{position:absolute;top:0;bottom:0;right:0;width:0;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,215,122,.55),rgba(255,215,122,.15));pointer-events:none}
.vg-num{position:absolute;top:4px;right:4px;width:32px;height:32px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:grab;touch-action:none;color:#0b2a6b;
  background:radial-gradient(circle at 35% 30%,#fff,#ffe9a8 70%,#ffd04d);
  box-shadow:0 2px 6px rgba(0,0,0,.35)}
.vg-num:active{cursor:grabbing}
.vg-num svg{width:16px;height:16px}
.vg-num.rung{animation:vg-rung .45s ease}
@keyframes vg-rung{20%{margin-right:10px}40%{margin-right:0}60%{margin-right:6px}80%{margin-right:0}}
@media (prefers-reduced-motion:reduce){.vg-chu{animation:none}.vg-num.rung{animation:none}}

/* ---------- Màn vừa (laptop) ----------
   Hai khối đứng cạnh nhau chỉ đủ chỗ trên màn rộng như ảnh mẫu; hẹp hơn
   thì xếp chồng để thẻ và khẩu hiệu không bị dồn dòng */
@media (max-width:1360px){
  .gc-hai{grid-template-columns:1fr}
  .gc-luoi-sach{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1180px) and (min-width:721px){
  .gc-lien{left:auto;right:3%}
}
/* ---------- Điện thoại ----------
   Banner và footer quá dẹt nên cắt lấy phần giữa có chữ, không thu nhỏ cả tấm */
@media (max-width:720px){
  .gc-banner{aspect-ratio:auto;height:128px}
  .gc-footer{aspect-ratio:auto;height:104px;object-position:38% center}
  .gc-lien{position:static;transform:none;display:flex;width:max-content;margin:0 auto;
    background:rgba(255,255,255,.12)}
  .gc-chan{padding-bottom:18px}
  .gc-than{margin-top:-12px;padding:14px 12px 18px;border-radius:22px 22px 0 0}
  .gc-hai{gap:16px;margin-bottom:16px}
  .gc-dau{flex-wrap:wrap;gap:8px 10px;padding:0 10px 10px 0}
  .gc-tab{padding:6px 28px 6px 10px}
  .gc-bieu{width:40px;height:40px;font-size:21px}
  .gc-dau h2{font-size:22px}
  .gc-xem{margin-left:auto;padding:6px 10px 6px 12px;font-size:12.5px}
  .gc-khau{order:3;flex-basis:100%;padding-left:12px;font-size:12.5px}
  .gc-luoi{grid-template-columns:1fr;padding:12px;gap:10px}
  .gc-the,.gc-khoi.cam .gc-the{flex-direction:row;align-items:flex-start;text-align:left;padding:13px;gap:13px}
  .gc-hinh{width:64px;height:64px;margin:0}
  .gc-noi b{font-size:17px}
  .gc-noi em{margin-top:8px}
  .gc-than-sach{flex-direction:column}
  .gc-tranh{width:100%;min-width:0;height:120px}
  .gc-luoi-sach{grid-template-columns:1fr;padding:18px 12px 12px;gap:18px}
  .gc-luoi.rong{grid-template-columns:1fr}
  .gc-the.rong .gc-hinh{width:72px;height:72px}
  .gc-choi{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .gc-the,.gc-sach,.gc-xem{transition:none}
}

/* =====================================================================
   THƯ VIỆN SÁCH GIÁO KHOA
   Danh sách: hàng chọn lớp 1–12 (ba cấp ba màu), cột môn học bên trái,
   lưới bìa sách bên phải. Đọc sách: thông tin ở trên, khung PDF ở dưới.
   ===================================================================== */
.gc-con-dau.do{--m1:#e5484d;--m2:#ff9a8b}
.sgk-than{max-width:1240px;margin:-18px auto 0;padding:0 18px 30px;position:relative}

/* Hàng chọn lớp */
.sgk-hang-lop{display:flex;align-items:center;gap:10px;padding:16px 18px 18px;margin-bottom:18px;
  background:#fff;border-radius:20px;box-shadow:0 6px 18px rgba(20,90,170,.08);overflow-x:auto;scrollbar-width:thin}
.sgk-nhan{flex:none;margin-right:4px;font-family:'Baloo 2',sans-serif;font-size:22px;font-weight:800;color:#5b6e8c}
.sgk-lop{--n:#fde4d6;--c:#e8672a;flex:none;position:relative;min-width:48px;height:46px;padding:0 14px;border:0;border-radius:14px;
  background:var(--n);color:var(--c);cursor:pointer;font:800 19px/1 'Baloo 2',sans-serif;
  transition:transform .12s ease,box-shadow .12s ease}
.sgk-lop.c2{--n:#d8f5e5;--c:#21a565}
.sgk-lop.c3{--n:#e1e5ff;--c:#3d4fd6}
.sgk-lop.tat{--n:#ece6ff;--c:#6a4fd8;padding:0 18px}
.sgk-lop:hover{transform:translateY(-2px)}
.sgk-lop.chon{box-shadow:0 0 0 3px #fff,0 0 0 5.5px #4f5bd5}
.sgk-lop.chon::after{content:'';position:absolute;left:18%;right:18%;bottom:-11px;height:4px;border-radius:4px;background:#4f5bd5}

.sgk-bo{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}

/* Cột môn học */
.sgk-mon{position:sticky;top:12px;background:#fff;border:1px solid #e3ebf6;border-radius:18px;overflow:hidden;
  box-shadow:0 4px 14px rgba(20,90,170,.06)}
.sgk-mon h3{margin:0;padding:15px 18px;border-bottom:1px solid #e9eef6;font:700 17px/1.2 'Be Vietnam Pro',sans-serif;color:#1d2b45}
.sgk-mon > div{padding:8px 8px 10px}
.sgk-chon{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;cursor:pointer;
  font-size:15px;color:#26385c;transition:background .12s ease}
.sgk-chon:hover{background:#f3f7fd}
.sgk-chon input{flex:none;width:20px;height:20px;margin:0;accent-color:#4f5bd5;cursor:pointer}
.sgk-chon span{flex:1}
.sgk-chon em{font-style:normal;font-size:12px;font-weight:700;color:#8a97ad}
.sgk-chon.rong{opacity:.45}
.sgk-cho{margin:8px 10px;color:#8a97ad;font-size:14px}

/* Lưới bìa sách */
.sgk-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.sgk-the{display:flex;flex-direction:column;gap:4px;padding:0 0 14px;border:1px solid #e3ebf6;border-radius:18px;
  background:#fff;cursor:pointer;overflow:hidden;text-align:center;font-family:inherit;
  box-shadow:0 4px 14px rgba(20,90,170,.07);transition:transform .15s ease,box-shadow .15s ease}
.sgk-the:not(.sgk-xuong):hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(20,90,170,.16)}
.sgk-the b{display:block;margin-top:10px;padding:0 12px;font:700 15.5px/1.35 'Be Vietnam Pro',sans-serif;color:#1d2b45}
.sgk-the small{display:block;padding:0 12px;font-size:12.5px;color:#7a879c}
.sgk-bia{--n1:#fde4d6;--n2:#f6b38f;position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  background:linear-gradient(160deg,var(--n1),var(--n2))}
.sgk-bia.c2{--n1:#d8f5e5;--n2:#8fd9b3}
.sgk-bia.c3{--n1:#e1e5ff;--n2:#9aa6f2}
.sgk-bia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* Chưa có ảnh bìa: hiện tên sách trên nền màu theo cấp */
.sgk-bia i{position:absolute;inset:0;display:grid;place-items:center;padding:18px;font-style:normal;
  font:800 20px/1.25 'Baloo 2',sans-serif;color:rgba(20,40,90,.75);text-align:center}
.sgk-so{position:absolute;z-index:2;top:10px;left:10px;padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.92);color:#26385c;font-size:11.5px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.12)}
/* Khung xương khi đang tải */
.sgk-xuong .sgk-bia,.sgk-xuong b{background:linear-gradient(90deg,#eef2f8 25%,#f7f9fc 50%,#eef2f8 75%) 0 0/200% 100%;
  animation:sgk-sang 1.2s linear infinite}
.sgk-xuong b{height:16px;margin:12px 20px 0;border-radius:6px}
@keyframes sgk-sang{to{background-position:-200% 0}}
.sgk-trong{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 18px;
  background:#fff;border:1px dashed #cdd8e8;border-radius:18px;text-align:center}
.sgk-trong b{font-size:16px;color:#26385c}
.sgk-trong small{font-size:13.5px;color:#7a879c}

/* Nút chung */
.sgk-nut{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:10px 18px;border-radius:999px;
  border:1px solid #d5deeb;background:#fff;color:#26385c;font:700 14px/1 'Be Vietnam Pro',sans-serif;
  text-decoration:none;cursor:pointer}
.sgk-nut:hover{border-color:#4f5bd5;color:#4f5bd5}
.sgk-nut.chinh{border-color:transparent;background:linear-gradient(90deg,#e5484d,#ff8a72);color:#fff}
.sgk-nut.chinh:hover{color:#fff;filter:brightness(1.05)}

/* Đọc sách */
.sgk-doc{max-width:1240px;margin:-18px auto 0;padding:0 18px 24px;position:relative}
.sgk-tt{display:flex;gap:20px;align-items:flex-start;padding:18px;margin-bottom:16px;background:#fff;
  border-radius:20px;box-shadow:0 6px 18px rgba(20,90,170,.08)}
.sgk-tt.sgk-xuong{height:180px;background:linear-gradient(90deg,#eef2f8 25%,#f7f9fc 50%,#eef2f8 75%) 0 0/200% 100%;
  animation:sgk-sang 1.2s linear infinite}
.sgk-bia.nho{flex:none;width:120px;border-radius:12px;box-shadow:0 6px 14px rgba(20,60,140,.18)}
.sgk-bia.nho i{font-size:14px;padding:10px}
.sgk-tt-noi{flex:1;min-width:0}
.sgk-tt-noi h2{margin:2px 0 10px;font:800 26px/1.15 'Baloo 2',sans-serif;color:#13338a}
.sgk-the-nho{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.sgk-the-nho span{padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:700;background:#fde4d6;color:#c2541c}
.sgk-the-nho span.c2{background:#d8f5e5;color:#1b8a54}
.sgk-the-nho span.c3{background:#e1e5ff;color:#3442b8}
.sgk-the-nho span.mon{background:#ece6ff;color:#5a40c4}
.sgk-the-nho span.bo{background:#eef2f8;color:#4a5872}
.sgk-tt-noi p{margin:6px 0 0;font-size:14px;line-height:1.55;color:#4a5872}
.sgk-tt-noi p.nxb{font-size:12.5px;color:#8a97ad}
.sgk-nut-hang{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sgk-xem{position:relative;height:calc(100vh - 120px);min-height:520px;background:#525659;border-radius:18px;overflow:hidden;
  box-shadow:0 6px 18px rgba(20,90,170,.12)}
.sgk-xem iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sgk-cho-pdf{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;color:#e8ecf3;font-size:14px}
.sgk-xoay{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;
  animation:sgk-xoay .8s linear infinite}
@keyframes sgk-xoay{to{transform:rotate(360deg)}}

@media (max-width:860px){
  .sgk-bo{grid-template-columns:1fr}
  /* Môn học thành hàng chip cuộn ngang */
  .sgk-mon{position:static;border-radius:16px}
  .sgk-mon h3{display:none}
  .sgk-mon > div{display:flex;gap:8px;padding:10px;overflow-x:auto}
  .sgk-chon{flex:none;gap:8px;padding:8px 14px;border:1px solid #dfe6f1;border-radius:999px;font-size:14px}
  .sgk-chon:has(input:checked){border-color:#4f5bd5;background:#eef0ff;color:#3442b8}
  .sgk-chon input{width:16px;height:16px}
  .sgk-luoi{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
}
@media (max-width:720px){
  .sgk-than,.sgk-doc{padding:0 12px 24px}
  .sgk-hang-lop{gap:8px;padding:12px 12px 16px;border-radius:16px}
  .sgk-nhan{font-size:18px}
  .sgk-lop{min-width:42px;height:40px;font-size:17px;border-radius:12px}
  .sgk-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sgk-the b{font-size:14px}
  .sgk-tt{gap:14px;padding:14px}
  .sgk-bia.nho{width:86px}
  .sgk-tt-noi h2{font-size:21px}
  .sgk-xem{height:calc(100vh - 90px);min-height:420px;border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  .sgk-xuong .sgk-bia,.sgk-xuong b,.sgk-tt.sgk-xuong,.sgk-xoay{animation:none}
}

/* =====================================================================
   SÁCH GIÁO KHOA: GIAO DIỆN THEO ẢNH MẪU
   Banner ảnh ở đầu (nút quay lại và nhãn số cuốn đặt khít lên chỗ in sẵn),
   nền trời xanh nhạt, footer đồi cỏ lâu đài ở cuối. Phần này ghi đè một số
   kiểu ở mục THƯ VIỆN SÁCH GIÁO KHOA phía trên.
   Vị trí trên banner tính theo cqw (1cqw = 1% bề rộng banner), nên khớp
   với ảnh ở mọi bề rộng màn.
   ===================================================================== */
.gc-trang-con.sgk-nen{display:flex;flex-direction:column;padding-bottom:0;
  background:
    radial-gradient(420px 160px at 4% 46%,rgba(255,255,255,.85),transparent 70%),
    radial-gradient(520px 180px at 97% 58%,rgba(255,255,255,.8),transparent 70%),
    radial-gradient(380px 140px at 55% 82%,rgba(255,255,255,.55),transparent 70%),
    linear-gradient(180deg,#bfe7ff 0,#dcf2fe 300px,#e6f6ff 70%,#d9f0fd 100%)}

/* Đầu trang */
.sgk-dau{position:relative;line-height:0;container-type:inline-size}
.sgk-banner{display:block;width:100%;height:auto;aspect-ratio:1757/170}
.sgk-ve{position:absolute;left:13.7cqw;top:1.05cqw;min-width:8.25cqw;height:2.1cqw;padding:0 .9cqw 0 .7cqw;
  display:inline-flex;align-items:center;gap:.45cqw;border:0;border-radius:999px;cursor:pointer;
  background:#307de9;color:#fff;font:700 .98cqw/1 'Be Vietnam Pro',sans-serif;white-space:nowrap;
  box-shadow:0 .15cqw .4cqw rgba(20,70,160,.25);transition:filter .15s ease}
.sgk-ve:hover{filter:brightness(1.08)}
.sgk-ve svg{width:.95cqw;height:.95cqw;flex:none}
.sgk-dem{position:absolute;left:87.3cqw;top:5.45cqw;min-width:4.8cqw;height:2.15cqw;padding:0 .8cqw;
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;white-space:nowrap;
  background:#5fbcfe;color:#fff;font:800 .95cqw/1 'Be Vietnam Pro',sans-serif;
  box-shadow:inset 0 0 0 .08cqw rgba(255,255,255,.35)}
/* Tiêu đề chữ thật: máy tính đã có trên ảnh nên ẩn (vẫn đọc được bằng trình đọc màn hình) */
.sgk-dau-chu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Thân trang ngay dưới banner, rộng như ảnh mẫu (cách mỗi mép khoảng 8%) */
.sgk-than,.sgk-doc{box-sizing:border-box;width:100%;max-width:none;margin:0;padding:0 8.3% 10px}
.sgk-bo{grid-template-columns:clamp(240px,19%,320px) minmax(0,1fr)}
.sgk-luoi{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.sgk-hang-lop{background:rgba(255,255,255,.94);border:1px solid #e1edfa;border-radius:22px;
  box-shadow:0 8px 22px rgba(30,100,190,.12)}
.sgk-nhan{color:#1f4fa0;font-size:26px}
.sgk-lop.chon{background:#cfe4ff;color:#245fd6;box-shadow:inset 0 0 0 3px #2f7bf0}
.sgk-lop.chon::after{background:#2f7bf0;bottom:-12px}

/* Cột môn học: thanh đầu xanh, biểu tượng từng môn */
.sgk-mon{border:0;border-radius:20px;box-shadow:0 8px 22px rgba(30,100,190,.1)}
.sgk-mon h3{display:flex;align-items:center;gap:10px;padding:12px 16px;border:0;color:#fff;font-size:18px;
  background:linear-gradient(90deg,#2f8df3,#62b8fb)}
.sgk-mon h3 span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;font-size:17px;
  box-shadow:0 2px 0 rgba(0,0,0,.08)}
.sgk-chon{gap:11px;color:#1f4fa0;font-weight:600}
.sgk-chon input{accent-color:#2f7bf0}
.sgk-chon i{flex:none;width:24px;text-align:center;font-style:normal;font-size:19px;line-height:1}
.sgk-chon em{color:#2f7bf0;font-size:13px}
.sgk-chon.rong{opacity:1}

/* Thẻ sách: tên đậm xanh, nút mũi tên tròn ở góc */
.sgk-the{position:relative;border:0;border-radius:18px;box-shadow:0 8px 20px rgba(30,100,190,.12)}
.sgk-the b{padding:0 44px;font-family:'Baloo 2',sans-serif;font-size:18px;font-weight:800;color:#13338a;line-height:1.25}
.sgk-the small{padding:0 44px}
.sgk-di{position:absolute;right:12px;bottom:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  color:#fff;background:linear-gradient(160deg,#5fb2ff,#2f7bf0);box-shadow:0 3px 8px rgba(47,123,240,.35)}
.sgk-di svg{width:15px;height:15px}
.sgk-the:hover .sgk-di{filter:brightness(1.08)}

/* Khung thông tin trang đọc sách cùng tông */
.sgk-tt{border:0;box-shadow:0 8px 22px rgba(30,100,190,.12)}
.sgk-nut.chinh{background:linear-gradient(90deg,#2f7bf0,#5fb2ff)}
.sgk-nut:hover{border-color:#2f7bf0;color:#2f7bf0}

/* Chân trang: ảnh đồi cỏ nền trong suốt, nằm cuối trang */
.sgk-chan{position:relative;margin-top:auto;padding-top:34px;line-height:0;pointer-events:none;container-type:inline-size}
.sgk-chan img{display:block;width:100%;height:auto;aspect-ratio:1643/277}
/* Nút liên hệ trên dải xanh, giữa máy bay giấy và lâu đài. Cỡ tính theo cqw
   (1cqw = 1% bề rộng footer) để luôn vừa khoảng trống đó ở mọi bề rộng */
.sgk-chan .gc-lien{left:auto;right:16.5cqw;top:auto;bottom:2.6cqw;transform:none;pointer-events:auto;
  gap:.7cqw;padding:.5cqw 1.3cqw .5cqw .55cqw}
.sgk-chan .gc-lien i{width:2.3cqw;height:2.3cqw}
.sgk-chan .gc-lien i svg{width:1.1cqw;height:1.1cqw}
.sgk-chan .gc-lien small{font-size:.75cqw}
.sgk-chan .gc-lien b{font-size:1.02cqw}
/* Màn dưới 1100px: nút co theo footer sẽ quá nhỏ, đặt xuống dưới ảnh */
@media (max-width:1100px){
  /* Nền xanh bắt đầu đúng mép dưới ảnh (--anh = khoảng trên + chiều cao ảnh),
     chồng lên ảnh 5px để không hở vạch sáng. Màu trùng mép dưới ảnh. */
  .sgk-chan{--anh:calc(34px + 100vw * 277 / 1643 - 5px);padding-bottom:16px;
    background:linear-gradient(#0055be,#0055be) left bottom / 100% calc(100% - var(--anh)) no-repeat}
  .sgk-chan .gc-lien{position:static;display:flex;width:max-content;margin:6px auto 0;gap:12px;padding:8px 22px 8px 9px}
  .sgk-chan .gc-lien i{width:40px;height:40px}
  .sgk-chan .gc-lien i svg{width:19px;height:19px}
  .sgk-chan .gc-lien small{font-size:12.5px}
  .sgk-chan .gc-lien b{font-size:17px}
}

/* Màn hẹp: cột môn học lên trên thành hàng chip, lưới sách bên dưới */
@media (max-width:860px){
  .sgk-bo{grid-template-columns:1fr}
  .sgk-luoi{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}
/* Màn dưới 1000px: banner co nhỏ làm nút và chữ quá bé, dùng đầu trang
   chữ thật trên nền trời cùng tông */
@media (max-width:1000px){
  .sgk-banner{display:none}
  .sgk-dau{line-height:1.3;padding:14px 14px 44px;
    background:radial-gradient(160px 60px at 85% 30%,rgba(255,255,255,.8),transparent 70%),
      radial-gradient(200px 70px at 10% 90%,rgba(255,255,255,.7),transparent 70%),
      linear-gradient(180deg,#7fd0ff,#bfe7ff)}
  .sgk-ve{position:static;min-width:0;height:32px;padding:0 13px 0 10px;gap:6px;font-size:13px}
  .sgk-ve svg{width:14px;height:14px}
  .sgk-dem{left:auto;right:14px;top:14px;min-width:0;height:30px;padding:0 13px;font-size:13px}
  .sgk-dau-chu{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;
    display:flex;align-items:center;gap:12px;margin-top:12px}
  .sgk-dau-bieu{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:27px;
    background:linear-gradient(160deg,#4ea6ff,#1f6fe0);box-shadow:0 4px 10px rgba(20,90,200,.3)}
  .sgk-dau-chu h1{margin:0;font:800 30px/1.05 'Baloo 2',sans-serif;color:#fff;
    text-shadow:0 2px 0 #1f5fd0,2px 0 0 #1f5fd0,-2px 0 0 #1f5fd0,0 -2px 0 #1f5fd0,0 5px 10px rgba(20,70,170,.3)}
  .sgk-dau-chu p{margin:4px 0 0;font-size:13px;font-weight:700;color:#1347b8}
  .sgk-than,.sgk-doc{margin:-24px 0 0}
}
@media (max-width:720px){
  .sgk-than,.sgk-doc{padding:0 12px 10px}
  .sgk-luoi{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sgk-nhan{font-size:20px}
  .sgk-mon h3{display:none}
  .sgk-the b{padding:0 36px 0 12px;font-size:15.5px;text-align:left}
  .sgk-the small{padding:0 36px 0 12px;text-align:left}
  .sgk-di{width:26px;height:26px;right:10px;bottom:12px}
  .sgk-chan{padding-top:24px;--anh:calc(24px + 96px - 5px)}
  .sgk-chan img{aspect-ratio:auto;height:96px;object-fit:cover;object-position:42% bottom}
}

/* =====================================================================
   BỘ ĐỌC SÁCH LẬT TRANG
   Thanh công cụ ở trên, sách ở giữa trên nền tối, lời nhắc ở dưới.
   Toàn màn hình: chế độ của trình duyệt (.dang-toan) hoặc phủ kín trang
   khi trình duyệt không có (.toan-ao, như iPhone).
   ===================================================================== */
.doc-khung{position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%,#3b4a6b 0%,#1f2a44 55%,#151d33 100%);
  box-shadow:0 10px 26px rgba(20,50,110,.22)}
.doc-thanh{display:flex;align-items:center;gap:6px;padding:10px 12px;flex-wrap:wrap;
  background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.08)}
.doc-nut{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:40px;height:40px;padding:0 10px;
  border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#e9efff;cursor:pointer;
  font:700 13px/1 'Be Vietnam Pro',sans-serif;transition:background .15s ease,transform .1s ease}
.doc-nut:hover{background:rgba(255,255,255,.2)}
.doc-nut:active{transform:scale(.95)}
.doc-nut svg{width:20px;height:20px;flex:none}
.doc-nut-toan{background:linear-gradient(90deg,#2f7bf0,#5fb2ff);color:#fff;padding:0 14px}
.doc-nut-toan:hover{background:linear-gradient(90deg,#3d86f5,#72bdff)}
.doc-so{display:inline-flex;align-items:center;gap:6px;padding:0 6px;color:#c7d3ef;font:700 14px/1 'Be Vietnam Pro',sans-serif}
.doc-so input{width:52px;height:36px;border:1px solid rgba(255,255,255,.18);border-radius:10px;text-align:center;
  background:rgba(0,0,0,.25);color:#fff;font:800 15px/1 'Be Vietnam Pro',sans-serif}
.doc-so input:focus{outline:none;border-color:#5fb2ff}
.doc-so em{font-style:normal}
.doc-cach{flex:1}
.doc-san{position:relative;height:calc(100vh - 150px);min-height:440px;padding:18px 14px 6px;
  display:flex;align-items:center;justify-content:center}
.doc-sach{width:100%;height:100%;margin:0 auto}
.doc-trang{background:#fff;overflow:hidden}
.doc-trang canvas{display:block;width:100%;height:100%}
.doc-trang:not(.xong){background:linear-gradient(90deg,#f1f4f9 25%,#fafbfd 50%,#f1f4f9 75%) 0 0/200% 100%;
  animation:sgk-sang 1.2s linear infinite}
.doc-trang-so{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);padding:1px 8px;border-radius:999px;
  background:rgba(0,0,0,.35);color:#fff;font:700 11px/1.6 'Be Vietnam Pro',sans-serif;opacity:.7;pointer-events:none}
.doc-meo{margin:0;padding:6px 12px 12px;text-align:center;color:#9fb0d4;font-size:12.5px}

/* Màn chờ tải: chồng sách nhấp nháy và thanh tiến độ */
.doc-tai{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:420px;color:#e9efff}
.doc-tai b{font:800 20px/1.2 'Baloo 2',sans-serif}
.doc-tai small{color:#9fb0d4;font-size:13px}
.doc-tai-sach{display:flex;gap:6px;align-items:flex-end;height:54px}
.doc-tai-sach span{width:16px;border-radius:4px;animation:doc-nhay 1s ease-in-out infinite}
.doc-tai-sach span:nth-child(1){height:40px;background:#ff8a65}
.doc-tai-sach span:nth-child(2){height:52px;background:#5fb2ff;animation-delay:.15s}
.doc-tai-sach span:nth-child(3){height:34px;background:#7ed39a;animation-delay:.3s}
@keyframes doc-nhay{50%{transform:translateY(-10px)}}
.doc-tai-thanh{width:min(320px,70%);height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.doc-tai-thanh i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#5fb2ff,#7ed39a);
  transition:width .25s ease}

/* Toàn màn hình */
.doc-khung.dang-toan{border-radius:0}
.doc-khung.dang-toan .doc-san{height:auto;flex:1;min-height:0}
.doc-khung:fullscreen{width:100vw;height:100vh}
.doc-khung.toan-ao{position:fixed;inset:0;z-index:2147483000;border-radius:0;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}

@media (max-width:720px){
  .doc-thanh{gap:4px;padding:8px}
  .doc-nut{min-width:36px;height:36px;padding:0 8px}
  .doc-nut-toan span{display:none}
  .doc-nut[data-d="dau"],.doc-nut[data-d="cuoi"]{display:none}
  .doc-so input{width:44px;height:34px}
  .doc-san{height:calc(100vh - 130px);min-height:380px;padding:10px 6px 4px}
  .doc-khung{border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  .doc-tai-sach span,.doc-trang:not(.xong){animation:none}
}

/* Phân trang danh sách sách giáo khoa */
.sgk-cot-phai{min-width:0}
.sgk-pt{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;
  margin-top:20px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.92);
  box-shadow:0 6px 18px rgba(30,100,190,.1)}
.sgk-pt-chu{font-size:13.5px;font-weight:600;color:#5f6d86}
.sgk-pt-so{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sgk-pt-nut{min-width:40px;height:40px;padding:0 10px;border:0;border-radius:12px;cursor:pointer;
  display:inline-grid;place-items:center;background:#eef4fd;color:#1f4fa0;
  font:800 16px/1 'Baloo 2',sans-serif;transition:background .15s ease,transform .1s ease}
.sgk-pt-nut:hover:not(:disabled){background:#d9e8fd}
.sgk-pt-nut:active:not(:disabled){transform:scale(.95)}
.sgk-pt-nut.chon{background:linear-gradient(160deg,#5fb2ff,#2f7bf0);color:#fff;box-shadow:0 4px 10px rgba(47,123,240,.3)}
.sgk-pt-nut:disabled{opacity:.4;cursor:default}
.sgk-pt-nut svg{width:16px;height:16px}
.sgk-pt-cham{min-width:20px;text-align:center;color:#8a97ad;font-weight:800}
@media (max-width:720px){
  .sgk-pt{justify-content:center;padding:10px;margin-top:14px}
  .sgk-pt-chu{width:100%;text-align:center;font-size:12.5px}
  .sgk-pt-nut{min-width:36px;height:36px;font-size:15px;padding:0 8px}
}