/* Lolool — tab "Album ảnh" trong mục Dành cho các mẹ tại phòng khám (11/09/2026).
   Khung mẫu 1055×1491 thu theo bề ngang; ô ảnh và ô số tuần định vị bằng % từ js/album-mau.js.
   Màu chữ gắn tường minh var(--text-primary) như css/kham-pk.css (theme mặc định là TỐI,
   css/nen-toi.css) — không dựa vào kế thừa. */
.kpk-tabs { display: flex; gap: 6px; background: var(--surface, #fff); border: 1px solid var(--border, #ddd);
  border-radius: 999px; padding: 4px; margin: 0 0 14px; }
.kpk-tabs button { flex: 1; appearance: none; border: 0; background: none; padding: 9px 0; border-radius: 999px;
  font: inherit; font-size: 14px; color: var(--text-primary); cursor: pointer; }
.kpk-tabs button[aria-selected="true"] { background: var(--primary, #1E5A3C); color: #fff; font-weight: 700; }

/* ───── Dải tuần đã khám (12/09/2026) — js/album-pk.js daiTuanHtml/daiTuan ─────
   Hàng chip cuộn ngang, DÍNH ngay dưới header cố định (.app-header cao 70px + safe-area, css/style.css)
   khi trang cao hơn màn hình; nền = nền mục (--bg-main, theme tối #05211A) nên không thành
   thanh nổi lạc lõng. Một chip = một trang có thật, không mốc tự sinh. 13/09: dải là bộ điều hướng
   của album lật trang (có từ 1 trang), bấm chip lật tới trang. Chip trang đang xem: đầy bạc hà. */
.apk-dai { position: sticky; top: calc(70px + env(safe-area-inset-top, 0px)); z-index: 5; display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 6px 2px 10px; margin: 0 0 8px;
  background: var(--bg-main, #05211A); }
.apk-dai::-webkit-scrollbar { display: none; }
.apk-dai-o { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 40px; min-width: 56px; padding: 4px 14px; border-radius: 999px; border: 1px solid #8FD3B0;
  color: var(--text-primary, inherit); text-decoration: none; line-height: 1.1; -webkit-tap-highlight-color: transparent; }
.apk-dai-o b { font-size: 15px; font-weight: 700; }
.apk-dai-o span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
.apk-dai-o[aria-current="true"] { background: #8FD3B0; color: #1E5A3C; }
.apk-dai-o[aria-current="true"] span { opacity: .85; }
/* ───── Album lật trang (13/09/2026, bác Tú: "xem lần lượt / lật mở như album") ─────
   .apk-cuon: băng cuộn ngang, mỗi con là một slide rộng 100%, scroll-snap bắt buộc → khung chỉ
   hiện MỘT trang, vuốt/bấm chip/mũi tên để lật. CSS thuần nên bản chép ở telesale (không script)
   vẫn lật bằng neo #trang-<id>. Thanh cuộn ẩn (dải chip + "Trang i/n" đã cho biết vị trí). */
.apk-album { position: relative; }
.apk-cuon { position: relative; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 0 26px; /* chỗ cho bóng đổ của trang, overflow-y hidden cắt mất */
  margin: 0; outline: none; }
.apk-cuon::-webkit-scrollbar { display: none; }
.apk-cuon:focus-visible { outline: 2px solid #8FD3B0; outline-offset: 2px; border-radius: 14px; }
.apk-cuon > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
/* Hàng mũi tên + đếm trang, ngay dưới dải tuần. */
.apk-dieu-huong { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 10px; }
.apk-lat { appearance: none; font: inherit; font-size: 18px; line-height: 1; width: 40px; height: 36px; border-radius: 999px;
  border: 1px solid #8FD3B0; background: none; color: var(--text-primary, inherit); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.apk-lat:hover { background: rgba(143, 211, 176, .16); }
.apk-lat:disabled { opacity: .3; cursor: default; background: none; }
.apk-vi-tri { min-width: 84px; text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.apk-trang { background: var(--surface, #fff); color: var(--text-primary, inherit); border-radius: 14px; overflow: hidden; margin: 0;
  box-shadow: 0 6px 20px rgba(30, 90, 60, .14);
  /* Neo #trang-<id> (telesale, không script) cuộn dọc tới trang: chừa header cố định + dải tuần dính (~58px). */
  scroll-margin-top: calc(70px + env(safe-area-inset-top, 0px) + 58px); }
.apk-khung { position: relative; width: 100%; padding-top: 141.327%; /* 1491/1055 */ overflow: hidden;
  container-type: inline-size; } /* fix #5: chữ pill tính theo bề ngang khung, không theo viewport */
.apk-nen { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.apk-o { position: absolute; overflow: hidden; border-radius: 8px; background: #15110f; }
/* Ảnh trong ô: JS (napMotO → viTriAnhTrongO, cùng vungCover với bản PNG) đặt left/top/width/height
   theo % của ô rồi gắn .da-cat — cắt dải trên CAT_TREN (9%: tên mẹ + SĐT máy siêu âm) trên NGUỒN
   rồi cover neo đáy, đúng từng px với drawImage của PNG. Dòng dưới chỉ là dự phòng trước khi
   ảnh nạp xong / không có JS: cover neo đáy, KHÔNG cắt 9% (cách cũ clip-path + scale(1.099) cắt
   trên ảnh ĐÃ cover nên ô rộng hơn ảnh bị zoom hơn PNG ~10% — đã bỏ, fix round 1). */
.apk-o img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
.apk-o img.da-cat { position: absolute; max-width: none; max-height: none; object-fit: fill; }
/* Ảnh không tải được (js/album-pk.js napMotO): dấu "?" mờ giữa ô thay vì ô đen im lặng. */
.apk-o-loi::after { content: "?"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.35); font-size: 1.6rem; font-weight: 700; pointer-events: none; }
.apk-tuan { position: absolute; display: flex; align-items: center; justify-content: center; background: #fff;
  border: 2px solid #1E5A3C; border-radius: 999px; font-family: "Playfair Display", Georgia, serif; font-weight: 700;
  font-size: clamp(13px, 4.4vw, 19px); /* dự phòng cho trình duyệt chưa hỗ trợ cqi */
  font-size: 2.9cqi;
  color: #1E5A3C; white-space: nowrap; }
/* Trang không có tuần: thẻ trắng trống, không viền, chỉ để che chữ "Thai … tuần" in sẵn trong mẫu. */
.apk-tuan-trong { border-color: transparent; }
.apk-duoi { padding: 12px 16px 14px; }
.apk-nhan { margin: 0 0 4px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.apk-so { margin: 0 0 10px; font-size: 13px; opacity: .85; }
.apk-nut { display: flex; gap: 8px; }
.apk-nut button { flex: 1; appearance: none; font: inherit; font-size: 13px; padding: 9px 0; border-radius: 999px;
  border: 1px solid var(--primary, #1E5A3C); background: none; color: var(--primary, #1E5A3C); cursor: pointer; }
.apk-nut button:disabled { opacity: .45; cursor: default; }
.apk-trong { padding: .9rem 1rem; border: 1px dashed var(--border, #ddd); border-radius: 14px; font-size: .95rem;
  line-height: 1.5; color: var(--text-primary, inherit); }
.apk-trong button { appearance: none; font: inherit; font-size: .9rem; padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid var(--primary, #1E5A3C); background: none; color: var(--primary, #1E5A3C); cursor: pointer; }
/* ───── Màn hình chờ (12/09/2026, theo mockup của bác Tú) — album rỗng & chưa đăng nhập ─────
   Thẻ bo góc trên nền tối của mục, minh hoạ ba polaroid + thỏ, tiêu đề serif hai dòng, nút viên.
   Bạc hà #8FD3B0 lấy thẳng từ mockup (app chưa có biến cho màu này). Điện thoại < 480px: nút xếp dọc.
   ≥ 900px: thêm hai chú thích nhỏ hai bên + dòng chữ nghiêng góc trên phải bằng pseudo-element. */
.apk-cho { position: relative; text-align: center; padding: clamp(22px, 5vw, 44px) clamp(16px, 4vw, 40px) clamp(24px, 5vw, 40px);
  /* Nền thẻ = đúng dải xanh trong mockup 12/09 (lấy mẫu từ img/album-cho.webp, ảnh đã làm mờ
     viền 28px nên hoà thẳng vào nền này). Đổi nền thì phải cắt lại ảnh. */
  border-radius: 18px; background: linear-gradient(180deg, #1B442F 0%, #143529 100%); color: #ECF5EF;
  border: 1px solid rgba(143, 211, 176, .2); /* bạc hà 20% */
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); overflow: hidden; }
.apk-cho-ghi { display: none; }
.apk-cho-anh { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto 18px; }
.apk-cho-tieu-de { margin: 0 0 12px; font: 700 clamp(22px, 6vw, 34px)/1.25 "Playfair Display", Georgia, serif;
  color: #ECF5EF; letter-spacing: -.01em; }   /* thẻ luôn nền xanh đậm → chữ sáng cố định, không theo theme */
.apk-cho-dan { margin: 0 auto 22px; max-width: 560px; font-family: "Playfair Display", Georgia, serif; font-weight: 400;
  font-size: 15px; line-height: 1.6; color: #ECF5EF; opacity: .9; }
.apk-cho-dan a { color: #8FD3B0; text-decoration: underline; text-underline-offset: 3px; }
.apk-cho-nut { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.apk-nut-day, .apk-nut-vien { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  appearance: none; font: inherit; font-size: 15px; font-weight: 600; padding: 12px 24px; border-radius: 999px;
  cursor: pointer; text-decoration: none; line-height: 1.2; min-height: 46px; }
.apk-nut-day { background: #8FD3B0; color: #1E5A3C; border: 1px solid #8FD3B0; }
.apk-nut-day:hover { background: #a3ddc0; }
.apk-nut-vien { background: none; color: #8FD3B0; border: 1px solid #8FD3B0; }
.apk-nut-vien:hover { background: rgba(143, 211, 176, .12); }
.apk-nut-day svg, .apk-nut-vien svg { flex: 0 0 auto; }
@media (max-width: 479px) {
  .apk-cho-nut { flex-direction: column; align-items: stretch; }
  .apk-nut-day, .apk-nut-vien { width: 100%; }
}
@media (min-width: 900px) {
  .apk-cho { padding-left: 96px; padding-right: 96px; }
  /* Chú thích nhỏ hai mép (mockup đặt ngoài thẻ; trong app không có chỗ nên xoay dọc, ôm hai mép thẻ):
     chữ hoa, giãn chữ, vạch bạc hà ngắn ở phía quay vào thẻ. */
  .apk-cho::before, .apk-cho::after { position: absolute; top: 50%; font-size: 10px; letter-spacing: .22em;
    text-transform: uppercase; white-space: nowrap; color: rgba(236, 245, 239, .55); pointer-events: none;
    writing-mode: vertical-rl; padding-left: 8px; border-left: 2px solid #8FD3B0; }
  .apk-cho::before { content: "Mỗi khoảnh khắc đều là yêu thương"; left: 26px; transform: translateY(-50%) rotate(180deg); }
  .apk-cho::after { content: "Lớn lên cùng con mỗi ngày"; right: 26px; transform: translateY(-50%); }
  /* "Những điều tuyệt vời đang chờ…" — chữ nghiêng bạc hà góc trên phải (chỉ màn rộng). */
  .apk-cho-ghi { display: block; position: absolute; top: 16px; right: 30px; font: italic 500 17px/1.2 "Playfair Display", Georgia, serif;
    color: #8FD3B0; pointer-events: none; }
}

/* Lớp phủ "bấm giữ để lưu" — iOS không cho <a download> với blob. */
.apk-luu-lop { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 20px; background: rgba(0, 0, 0, .82); }
.apk-luu-lop img { max-width: 100%; max-height: 74svh; border-radius: 6px; }
.apk-luu-lop p, .apk-luu-lop button { color: #fff; font: inherit; }
.apk-luu-lop button { appearance: none; background: none; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 8px 18px; }