/* =====================================================================
   GIAO DIỆN — "Góc thầy cô tiểu học" · Thầy Bùi Duy Phương
   Tách nguyên từ bản vẽ đã duyệt (02 - BAN VE 3 MAN HINH.html).
   Màu, cỡ chữ, khoảng cách: chỉ dùng biến ở :root.
   Phần THÊM so với bản vẽ ghi rõ "THÊM" ở đầu khối.
   ===================================================================== */

:root{
  /* --- Màu thương hiệu (cau-hinh.js có thể ghi đè --navy, --cam) --- */
  --navy:#1E3565;        /* nền đầu trang, tiêu đề */
  --navy-dam:#14233F;    /* chữ trên nền cam (5,6:1), chữ tiêu đề đậm */
  --navy-nhat:#E8ECF5;   /* nền phụ */
  --cam:#EE7B1D;         /* nút chính, điểm nhấn. KHÔNG dùng làm màu chữ trên nền sáng */
  --cam-dam:#A8500A;     /* chữ/biểu tượng cam trên nền sáng (5,5:1) */
  --cam-nhat:#FDF0E3;    /* nền dải nhắc */
  --cam-vien:#F3B985;    /* viền dải nhắc */

  /* --- Nền và chữ --- */
  --nen:#FFFFFF;
  --nen-kem:#FBF8F3;
  --chu:#14233F;
  --chu-phu:#4A5670;
  --chu-goi-y:#5F6B85;
  --vien:#C9D1E0;
  --vien-o:#7C89A6;

  /* --- Trạng thái --- */
  --loi:#B3261E;
  --loi-nhat:#FDECEA;
  --xong:#1B6E3C;
  --xong-nhat:#E6F4EA;
  --nut-mo-nen:#E3E6EC;
  --nut-mo-chu:#505A6B;

  /* --- Chữ --- */
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --co-nhan:16px;
  --co-than:18px;        /* thân bài — không nhỏ hơn */
  --co-nhan-o:20px;      /* nhãn ô nhập, chữ trên nút */
  --co-tieu-de:24px;     /* tiêu đề — không nhỏ hơn */
  --co-ten-cua:28px;
  --dong-than:1.5;
  --dong-tieu-de:1.35;   /* không dưới 1.3 để dấu Ế, Ồ, Ẫ không chạm dòng trên */

  /* --- Khoảng cách (bội số 4) --- */
  --k1:4px; --k2:8px; --k3:12px; --k4:16px; --k5:20px; --k6:24px; --k8:32px;

  /* --- Hình khối --- */
  --bo:14px;
  --bo-nho:10px;
  --cao-nut:56px;
  --cao-chon:52px;

  /* THÊM: vùng tai thỏ / thanh vuốt của điện thoại */
  --tren:env(safe-area-inset-top,0px);
  --duoi:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  color:var(--chu);
  background:var(--nen-kem);
}
button,input{font:inherit;color:inherit;margin:0}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--navy-dam);outline-offset:3px}
.i{width:24px;height:24px;flex:none;display:inline-block;vertical-align:middle}

/* THÊM: mỗi màn chiếm cả màn hình điện thoại; máy tính thì canh giữa */
.man{
  min-height:100vh;
  min-height:100dvh;
  max-width:560px;
  margin:0 auto;
  padding-bottom:var(--duoi);
  background:var(--nen-kem);
  font-size:var(--co-than);
  line-height:var(--dong-than);
  color:var(--chu);
  overflow-wrap:anywhere;        /* chữ luôn tự xuống dòng trong ô */
}
@media (min-width:600px){
  body{background:#EEF1F6}
  .man{box-shadow:0 0 0 1px var(--vien)}
}

/* --- Đầu trang --- */
.app-dau{
  position:relative;              /* THÊM: giữ hoạ tiết trong khung */
  overflow:hidden;
  background:var(--navy);color:#fff;
  padding:calc(var(--k6) + var(--tren)) var(--k5) var(--k6);
  border-bottom:4px solid var(--cam);
}
.app-ten{margin:0;font-size:var(--co-ten-cua);font-weight:700;line-height:var(--dong-tieu-de)}
.app-chao{margin:var(--k2) 0 0;color:#fff}
.app-ten-nho{margin:0;font-size:var(--co-than);font-weight:500;color:#DCE3F2;line-height:1.4}
.app-tieu-de{margin:var(--k1) 0 0;font-size:var(--co-tieu-de);font-weight:700;line-height:var(--dong-tieu-de)}

/* THÊM: đầu màn đăng kí có ảnh Thầy.
   Hàng 1: tên cửa (cả bề ngang). Hàng 2: lời chào bên trái, ảnh bên phải.
   Ảnh đứng sát vạch cam (chỉ cắt mép dưới, ngay dưới gấu áo), không chạm mép trên/phải,
   không nằm dưới chữ. */
.app-dau--anh{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(120px,44%,190px);
  grid-template-areas:"ten ten" "chao anh";
  column-gap:var(--k3);
  padding-bottom:0;
}
.app-dau--anh .app-ten{grid-area:ten;position:relative;z-index:1}
.app-dau--anh .app-chao{grid-area:chao;margin:var(--k3) 0 0;padding-bottom:var(--k6);position:relative;z-index:1}
.anh-o{grid-area:anh;position:relative;align-self:end;margin-top:var(--k3)}
.anh-thay{display:block;position:relative;z-index:1;width:100%;height:auto}

/* THÊM: hoạ tiết đồ vật (bút chì, sách, ngôi sao, chuông) — mờ, chỉ để trang trí */
.hoa-tiet{position:absolute;pointer-events:none;color:#fff;opacity:.2}
.anh-o .hoa-tiet{top:0;right:-6px;width:78%;height:auto;z-index:0}
.app-dau--hoa{padding-right:112px}           /* chừa chỗ: chữ không bao giờ đè hoạ tiết */
.app-dau--hoa .hoa-tiet{right:14px;top:calc(50% + var(--tren) / 2);transform:translateY(-50%);width:84px;height:auto}

/* --- Thân trang --- */
.app-than{padding:var(--k5)}
.man .app-than > * + *{margin-top:var(--k5)}      /* nhịp dọc 20px giữa các khối */
.man .app-than > .goi-y{margin-top:var(--k2)}      /* dòng ghi chú bám sát khối phía trên */
.dan{margin:0}
.muc{margin:var(--k6) 0 0;font-size:var(--co-tieu-de);font-weight:700;line-height:var(--dong-tieu-de);color:var(--navy)}
.goi-y{margin:var(--k2) 0 0;color:var(--chu-phu)}

/* --- Nút --- */
.nut{
  display:flex;align-items:center;justify-content:center;gap:var(--k2);
  width:100%;min-height:var(--cao-nut);
  padding:var(--k3) var(--k5);
  border:2px solid transparent;border-radius:var(--bo);
  font-size:var(--co-nhan-o);font-weight:700;line-height:1.3;text-align:center;
  text-decoration:none;
}
.nut-chinh{background:var(--cam);color:var(--navy-dam)}
.nut-chinh[aria-disabled="true"]{background:var(--nut-mo-nen);color:var(--nut-mo-chu)}
.nut-phu{background:#fff;border-color:var(--navy);color:var(--navy)}
.nut-xoa{background:#fff;border-color:var(--loi);color:var(--loi)}   /* THÊM */

/* --- Ô nhập --- */
.o{margin:0;padding:0;border:0;min-width:0}
.o > * + *{margin-top:var(--k2)}
.o label,.o legend{
  display:block;width:100%;padding:0;
  font-size:var(--co-nhan-o);font-weight:700;line-height:1.4;color:var(--navy);
}
.phu{font-size:var(--co-than);font-weight:400;color:var(--chu-phu)}
.o input[type="text"],.o input[type="tel"]{
  display:block;width:100%;min-height:var(--cao-nut);
  padding:var(--k3) 14px;
  border:2px solid var(--vien-o);border-radius:12px;
  background:#fff;color:var(--chu);
  font-size:var(--co-nhan-o);line-height:1.4;
}
.o input::placeholder{color:var(--chu-goi-y);opacity:1}
.co-loi input[type="text"],.co-loi input[type="tel"]{border-color:var(--loi)}

/* --- Nút chọn lớp (chọn được nhiều) --- */
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k2)}
.chip{
  display:flex;align-items:center;justify-content:center;
  min-height:var(--cao-chon);padding:var(--k2) 6px;
  border:2px solid var(--vien-o);border-radius:12px;
  background:#fff;color:var(--navy-dam);
  font-size:var(--co-than);font-weight:600;line-height:1.3;text-align:center;
}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.chip[aria-pressed="true"]::before{
  content:"";flex:none;width:8px;height:14px;margin:-3px 9px 0 2px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);
}

/* --- Ô tích đồng ý --- */
.tich{
  display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start;
  padding:14px;border:2px solid var(--vien);border-radius:var(--bo);
  background:#fff;cursor:pointer;
}
.tich input{
  -webkit-appearance:none;appearance:none;
  width:32px;height:32px;margin:0;
  border:2px solid var(--vien-o);border-radius:8px;background:#fff;cursor:pointer;
}
.tich input:checked{
  border-color:var(--navy);
  background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;
}
.tich-loai{display:block;font-weight:700;color:var(--navy);margin-bottom:var(--k1)}
.tich-van{display:block}
.tich.co-loi{border-color:var(--loi)}
.nhom-tich > * + *{margin-top:var(--k2)}

/* --- Báo lỗi --- */
.loi{
  display:flex;align-items:flex-start;gap:var(--k2);
  margin:var(--k2) 0 0;color:var(--loi);font-weight:600;
}
.loi::before{
  content:"!";flex:none;width:24px;height:24px;margin-top:2px;border-radius:50%;
  background:var(--loi);color:#fff;
  display:grid;place-items:center;font-size:16px;font-weight:700;line-height:1.3;
}
.loi-tong{
  margin:0;padding:14px;border:2px solid var(--loi);border-radius:var(--bo);
  background:var(--loi-nhat);color:var(--loi);font-weight:600;
}

/* --- Dải nhắc bật thông báo --- */
.nhac{
  padding:var(--k4);border:1px solid var(--cam-vien);border-radius:var(--bo);
  background:var(--cam-nhat);
}
.nhac-chu{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--k3);align-items:start;
  margin:0 0 var(--k3);font-weight:600;color:var(--navy-dam);
}
.nhac-chu .i{width:28px;height:28px;color:var(--cam-dam)}
.da-bat{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--k3);align-items:start;
  margin:0;padding:var(--k3) var(--k4);border-radius:var(--bo);
  background:var(--xong-nhat);color:var(--xong);font-weight:600;
}
.da-bat .i{width:28px;height:28px}

/* --- Ô bìa video (ô màu navy có nút phát, không dùng ảnh) --- */
.bia{
  display:grid;place-items:center;width:100%;aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--navy),var(--navy-dam));
  background-size:cover;background-position:center;
}
.bia-nut{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--cam);color:var(--navy-dam);
}
.bia-nut .i{width:32px;height:32px}
.bia--nho{border-radius:8px}
.bia--trong{
  background:
    radial-gradient(circle at 18% 22%,rgba(240,125,30,.28) 0 14%,transparent 15%),
    radial-gradient(circle at 84% 78%,rgba(255,255,255,.10) 0 18%,transparent 19%),
    linear-gradient(135deg,var(--navy),var(--navy-dam));
}
.bia--nho .bia-nut{width:32px;height:32px}
.bia--nho .bia-nut .i{width:18px;height:18px}

/* --- Video mới nhất --- */
.the-moi{
  display:block;width:100%;padding:0;text-align:left;
  border:1px solid var(--vien);border-radius:16px;background:#fff;
}
.the-moi .bia{border-radius:15px 15px 0 0}
.the-moi-chu{display:block;padding:var(--k4)}
.the-moi-dong{display:flex;flex-wrap:wrap;align-items:center;gap:var(--k2) var(--k3)}
.nhan-moi{
  padding:2px 10px;border-radius:6px;background:var(--cam);color:var(--navy-dam);
  font-size:var(--co-nhan);font-weight:700;line-height:1.4;letter-spacing:.04em;
}
.ngay{color:var(--chu-phu)}
.the-moi-ten{
  display:block;margin-top:var(--k2);
  font-size:var(--co-tieu-de);font-weight:700;line-height:var(--dong-tieu-de);color:var(--navy-dam);
}

/* --- Danh sách video cũ hơn --- */
.ds{list-style:none;margin:var(--k3) 0 0;padding:0}
.ds li + li{margin-top:var(--k3)}
.hang{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--k3);align-items:center;
  width:100%;min-height:var(--cao-chon);padding:10px;text-align:left;
  border:1px solid var(--vien);border-radius:var(--bo);background:#fff;
}
.hang-chu{display:block;min-width:0}
.hang-ten{display:block;font-weight:600;line-height:var(--dong-tieu-de);color:var(--navy-dam)}
.hang .ngay{display:block;margin-top:2px}

/* --- Đang xem một video --- */
/* THÊM: khung phát thật (thay ô "Trình phát YouTube" của bản vẽ), tỉ lệ 16:9 */
.khung-phat{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--bo);background:var(--navy-dam);
}
.khung-phat iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.xem-ten{margin:0;font-size:var(--co-tieu-de);font-weight:700;line-height:var(--dong-tieu-de);color:var(--navy-dam)}
.xem-ten:focus{outline:none}
.xem-ngay{margin:var(--k1) 0 0}
.lien-ket{                               /* THÊM: link "Mở trên YouTube" */
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px;
}

/* --- Hai thẻ iPhone / Android --- */
.the{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--k1);
  padding:var(--k1);border:2px solid var(--navy);border-radius:var(--bo);background:#fff;
}
.the button{
  min-height:var(--cao-chon);padding:var(--k2);
  border:0;border-radius:var(--bo-nho);background:transparent;color:var(--navy);
  font-size:var(--co-nhan-o);font-weight:700;line-height:1.3;
}
.the button[aria-selected="true"]{background:var(--navy);color:#fff}

/* --- Các bước đánh số to --- */
.buoc{list-style:none;margin:0;padding:0}
.buoc li{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;
  padding:14px;border:1px solid var(--vien);border-radius:var(--bo);background:#fff;
}
.buoc li + li{margin-top:var(--k3)}
.so{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:28px;font-weight:700;line-height:1.3;
}
.buoc p{margin:0;padding-top:var(--k2)}
.buoc b{color:var(--navy-dam)}
.bieu{
  display:inline-grid;place-items:center;width:34px;height:34px;margin:0 2px;
  border:2px solid var(--navy);border-radius:8px;color:var(--navy);vertical-align:middle;
}
.bieu .i{width:22px;height:22px}

/* --- Thông báo mẫu trên màn hình khoá --- */
.khoa{
  margin-top:var(--k3);padding:var(--k4);border-radius:20px;
  background:linear-gradient(160deg,var(--navy),var(--navy-dam));
}
.tb{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--k3);align-items:start;
  padding:var(--k3);border-radius:16px;background:#F4F6FB;color:var(--chu);
}
.tb-icon{
  display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
  background:var(--cam);color:var(--navy-dam);
}
.tb-dau{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 var(--k3);margin:0}
.tb-dau b{color:var(--navy-dam)}
.tb-gio{font-size:var(--co-nhan);color:var(--chu-phu)}
.tb-loi{margin:2px 0 0}
.tran-an{margin:var(--k4) 0 0;color:var(--chu-phu)}
.xong{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--k3);align-items:start;
  margin:0;padding:14px;border-radius:var(--bo);
  background:var(--xong-nhat);color:var(--xong);font-weight:600;
}
.xong .i{width:28px;height:28px}

/* THÊM: hộp báo tin ngắn (chế độ thử, máy chặn thông báo…) */
.bao{
  margin:0;padding:14px;border:2px solid var(--navy);border-radius:var(--bo);
  background:var(--navy-nhat);color:var(--navy-dam);font-weight:600;
}

/* THÊM: dòng nhỏ "Thông tin của tôi" cuối màn danh sách */
.toi{margin-top:var(--k8);border-top:1px solid var(--vien);padding-top:var(--k3)}
.toi summary{
  display:inline-flex;align-items:center;min-height:44px;cursor:pointer;
  color:var(--chu-phu);text-decoration:underline;text-underline-offset:3px;
}
.toi summary::-webkit-details-marker{display:none}
.toi summary{list-style:none}
.toi-bang{margin:var(--k3) 0 0;padding:14px;border:1px solid var(--vien);border-radius:var(--bo);background:#fff}
.toi-bang dt{font-weight:700;color:var(--navy)}
.toi-bang dd{margin:0 0 var(--k2)}
.toi-bang dd:last-child{margin-bottom:0}
.toi .nut-xoa{margin-top:var(--k3)}
/* THÊM 03/10: sửa thông tin */
.nut-sua,.nut-huy{background:#fff;border-color:var(--navy);color:var(--navy)}
.toi .nut-sua,.nut-huy{margin-top:var(--k3)}

/* ============================ CO GIÃN ============================ */
@media (max-width:359px){
  .chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-dau,.app-than{padding-left:var(--k4);padding-right:var(--k4)}
  .app-dau--hoa{padding-right:96px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}

/* nút phát trên ảnh bìa thật: có viền mờ cho nổi */
.bia-nut{box-shadow:0 2px 10px rgba(0,0,0,.35)}
/* Nút phát nằm góc phải dưới để không che chữ trên ảnh bìa video */
.bia{place-items:end;padding:10px}
.bia .bia-nut{width:52px;height:52px}
.bia .bia-nut .i{width:26px;height:26px}
.bia--nho{padding:4px}
.bia--nho .bia-nut{width:26px;height:26px}
.bia--nho .bia-nut .i{width:14px;height:14px}

/* =====================================================================
   THÊM 03/10 — thanh nút đáy (Trang chủ · Thông báo), danh sách thông báo, dải báo
   ===================================================================== */
body.co-thanh .man{padding-bottom:calc(76px + var(--duoi))}
.thanh-duoi{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--k2);
  max-width:560px;margin:0 auto;
  padding:6px var(--k3) calc(6px + var(--duoi));
  background:#fff;border-top:1px solid var(--vien);
  box-shadow:0 -2px 10px rgba(20,35,63,.08);
}
.thanh-nut{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:var(--cao-chon);padding:4px;border:0;border-radius:var(--bo-nho);background:none;
  font-size:var(--co-nhan);font-weight:600;line-height:1.3;color:var(--chu-phu);
}
.thanh-nut .i{width:28px;height:28px}
.thanh-nut[aria-current="page"]{color:var(--navy);background:var(--navy-nhat)}
.thanh-nut[aria-current="page"] .i{color:var(--cam-dam)}
.thanh-bieu{position:relative;display:inline-block}
.cham{position:absolute;top:0;right:-2px;width:11px;height:11px;border-radius:50%;background:var(--cam);border:2px solid #fff}

.muc-dau{margin-top:0}
.khu-cai-tb > * + *{margin-top:var(--k5)}
.khu-cai-tb > .goi-y{margin-top:var(--k2)}

.dai-den{
  position:fixed;left:var(--k3);right:var(--k3);top:calc(var(--k3) + var(--tren));z-index:30;
  max-width:536px;margin:0 auto;display:block;
  padding:var(--k3) var(--k4);border:0;border-radius:var(--bo);text-align:left;
  background:var(--navy-dam);color:#fff;font-size:var(--co-than);font-weight:600;line-height:1.4;
  box-shadow:0 6px 20px rgba(20,35,63,.3);
}
.dai-den small{display:block;margin-top:2px;font-size:var(--co-nhan);font-weight:500;color:#DCE3F2}

/* THÊM 03/10: hàng chọn cấp (4 ô, 2 cột) · dải "Đã chuyển sang …" có nút quay lại */
.chips--cap{grid-template-columns:repeat(2,minmax(0,1fr))}
.dai-chuyen{display:flex;align-items:center;gap:var(--k3);justify-content:space-between}
.dai-nut{
  flex:none;min-height:40px;padding:6px 12px;border:2px solid #fff;border-radius:10px;
  background:transparent;color:#fff;font-size:var(--co-nhan);font-weight:700;line-height:1.2;
}

/* =====================================================================
   THÊM 03/10 (v13) — mời mở bằng Chrome/Safari khi đang ở trong Zalo/Facebook (#mo-ngoai)
   · hướng dẫn cài iPhone có mũi tên chỉ nút Chia sẻ (#hd-ios) · dải "Thầy cô dùng iPhone?" (#dai-ios)
   ===================================================================== */
.phu-kin{
  position:fixed;inset:0;z-index:60;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(64px + var(--tren)) var(--k4) calc(var(--k6) + var(--duoi));
  background:rgba(20,35,63,.82);
}
.phu-kin--duoi{justify-content:flex-start;padding-top:calc(var(--k6) + var(--tren));padding-bottom:calc(112px + var(--duoi))}
.phu-the{
  width:100%;max-width:480px;padding:var(--k5);border-radius:var(--bo);
  background:var(--nen);color:var(--chu);font-size:var(--co-than);line-height:var(--dong-than);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.phu-the > * + *{margin-top:var(--k4)}
.phu-the p{margin:0}
.phu-the > .phu-hoac{margin-top:var(--k5);font-weight:700;color:var(--navy)}
.phu-ten{font-size:var(--co-nhan);font-weight:600;color:var(--cam-dam)}
.phu-tieu-de{margin:0;font-size:var(--co-tieu-de);font-weight:700;line-height:var(--dong-tieu-de);color:var(--navy)}
.phu-buoc{margin:0;padding-left:1.4em}
.phu-buoc li + li{margin-top:var(--k2)}
.phu-buoc b{color:var(--navy-dam)}
.phu-buoc .bieu{display:inline-flex;vertical-align:-4px;color:var(--navy)}
.phu-buoc .bieu .i{width:22px;height:22px}
.phu-buoc--so{list-style:none;padding:0;counter-reset:b}
.phu-buoc--so li{position:relative;padding-left:44px;min-height:32px;counter-increment:b}
.phu-buoc--so li::before{
  content:counter(b);position:absolute;left:0;top:-2px;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--cam);color:var(--navy-dam);font-weight:700;
}
.phu-buoc--so li + li{margin-top:var(--k3)}
.phu-link{width:100%;min-height:var(--cao-chon);padding:var(--k2) var(--k3);border:2px solid var(--vien-o);border-radius:var(--bo-nho);font:inherit;font-size:var(--co-nhan)}
.phu-tam{
  display:block;width:100%;min-height:44px;margin-top:var(--k5);padding:var(--k2);
  border:0;background:none;font:inherit;font-size:var(--co-nhan);color:var(--chu-phu);
  text-decoration:underline;text-underline-offset:3px;
}
/* mũi tên cam, nhấp nhô */
.mui-ten{position:fixed;z-index:61;width:64px;height:64px;color:var(--cam);filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));animation:nhun 1.1s ease-in-out infinite}
.mui-ten--goc{top:calc(4px + var(--tren));right:10px;animation-name:nhun-goc}
#hd-mui{bottom:calc(10px + var(--duoi));left:50%;margin-left:-32px}
#hd-mui.o-phai{left:auto;right:10px;margin-left:0}
#hd-mui.o-tren{bottom:auto;top:calc(4px + var(--tren));right:10px;left:auto;margin-left:0;transform:rotate(180deg);animation-name:nhun-tren}
@keyframes nhun{0%,100%{translate:0 0}50%{translate:0 12px}}
@keyframes nhun-tren{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes nhun-goc{0%,100%{translate:0 0}50%{translate:8px -8px}}
@media (prefers-reduced-motion:reduce){.mui-ten{animation:none}}
body.khoa-cuon{overflow:hidden}

.dai-ios{padding:var(--k4);border:2px solid var(--cam-vien);border-radius:var(--bo);background:var(--cam-nhat)}
.dai-ios p{margin:0}
.dai-ios .nut{margin-top:var(--k3)}

/* =====================================================================
   THÊM 03/10/2026 — riêng "Góc bố mẹ tiểu học" (phiếu PH-01)
   ===================================================================== */
.khung-phat--doc{aspect-ratio:9/16;width:min(100%,calc(70vh * 9 / 16));margin-inline:auto}   /* video ngắn dọc (Shorts) */
.nhan-ngan{display:inline-block;margin-left:var(--k2);padding:1px 8px;border-radius:999px;background:var(--navy-nhat);color:var(--navy-dam);font-size:13px;font-weight:700}
.nut-chu{display:block;width:100%;margin-top:var(--k2);padding:12px 8px;min-height:44px;border:0;background:none;color:var(--navy);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.nhac .nut + .nut,.nhac .nut + .nut-chu{margin-top:var(--k2)}
.ks-cau{margin-top:var(--k5)}
.chips--mot{grid-template-columns:repeat(2,minmax(0,1fr))}
.chip[aria-disabled="true"]{opacity:.45}
.tl-hang{display:block;padding:var(--k3);border:1px solid var(--vien);border-radius:var(--bo);background:#fff;text-decoration:none;color:var(--navy-dam)}
.tl-hang b{display:block;font-weight:700}
.tl-hang span{display:block;color:var(--chu-phu)}

/* THÊM 04/10/2026 (PH-22): chia sẻ video + khách xem ngay qua link chia sẻ */
.chia-se{margin-top:var(--k4)}
.chia-se > * + *{margin-top:var(--k2)}
.chia-se .phu-link{width:100%;box-sizing:border-box;padding:12px;border:2px solid var(--vien);border-radius:var(--bo);font:inherit;background:#fff;color:var(--navy-dam)}
#khu-xem > .nhac{margin-top:var(--k4)}

/* --- THÊM 04/10 (PH-25): số Zalo (chỉ hiện khi CAU_HINH.BAT_O_ZALO = true) --- */
#khu-zalo > * + *{margin-top:var(--k3)}
.toi-zalo{margin-top:var(--k4)}
.toi-zalo > * + *{margin-top:var(--k3)}

/* --- THÊM 04/10 (PH-36): chế độ nền tảng + link chính sách --- */
/* cau-hinh.js đặt data-che-do (web | ios | android) trên <html>; phần tử gắn data-an-ios / data-an-android thì ẩn ở chế độ đó. web: không ẩn gì. */
html[data-che-do="ios"] [data-an-ios],html[data-che-do="android"] [data-an-android]{display:none !important}
.toi-lk{margin-top:var(--k3)}
.toi-lk a{display:inline-flex;align-items:center;min-height:44px;color:var(--chu-phu);text-decoration:underline;text-underline-offset:3px}