/* =====================================================================================================
 * flow-video.css — trang Flow Video (/flow-video → kho-flow.php) theo khuôn "Tạp chí sống": TỜ PHIM LIÊN HOÀN
 * (đợt 2 · làn lan ra 1, 26/09/2026). Cần ari-tokens.css + ari-chung.css + trang-phu.css nạp trước.
 * Đầu trang sáng (tên lớn, ô tìm, chip mục). Kho video nằm trên một "tờ phim" đen có lỗ răng cưa hai mép; mỗi thẻ là một khung phim
 * đánh số (12A, 13A… đếm bằng CSS counter nên lọc / tìm tới đâu số chạy lại tới đó); thẻ đầu tiên của kho là khung lớn.
 * HTML + PHP: flow_page.py. Không backdrop-filter trên thẻ lặp lại (UX.md: 251 lớp làm mờ ở bản cũ).
 * ===================================================================================================== */

/* ---------- 1. Đầu trang ---------- */
.fvt-hang { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.fvt-td { font: 800 clamp(4.2rem, 13vw, 12.5rem)/.84 var(--f-hien); font-stretch: 75%; letter-spacing: -.035em; margin-left: -.03em; }
.fvt-td span { display: block; color: var(--c-text-accent); }
.kfdem { flex: none; text-align: right; font-size: .95rem; line-height: 1.4; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.kfdem b { display: block; font: 800 clamp(2.6rem, 5vw, 4rem)/.9 var(--f-hien); font-stretch: 80%; color: var(--c-text); }
.fvt-dau .dan { margin-top: 18px; }

/* tìm, chọn mục, xếp: chỉ hiện khi có JavaScript */
.kfcong { display: none; }
.kf-js .kfcong { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tim xep" "chip chip"; gap: 12px 10px; margin-top: 28px; }
@media (min-width: 1180px) {
  .kf-js .kfcong { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr) auto; grid-template-areas: "tim chip xep"; align-items: center; }
}
.kftim, .kfxep { display: flex; align-items: center; min-height: 52px; border-radius: var(--r-pill); background: rgb(255 255 255 / .8); border: 1px solid var(--c-line-strong); box-shadow: var(--sh-1); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.kftim { grid-area: tim; min-width: 0; padding-left: 18px; }
.kfxep { grid-area: xep; padding-left: 16px; }
.kftim:focus-within, .kfxep:focus-within { border-color: var(--c-focus); box-shadow: 0 0 0 4px rgb(168 48 94 / .18); }
.kftim label, .kfxep label { flex: none; margin-right: 10px; font: 600 .9rem var(--f-doc); color: var(--c-text-accent-sm); cursor: pointer; }
.kftim input { flex: 1; min-width: 0; height: 50px; border: 0; background: transparent; padding: 0 16px 0 0; color: var(--c-text); font: 400 16px var(--f-doc); }
.kftim input::placeholder { color: var(--c-text-3); }
.kftim input:focus, .kfxep select:focus { outline: none; }
.kfxep select { height: 50px; border: 0; border-radius: 0 999px 999px 0; cursor: pointer; appearance: none; -webkit-appearance: none; padding: 0 38px 0 0; color: var(--c-text); font: 500 .95rem var(--f-doc);
  background: transparent no-repeat right 18px center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8305E' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.kfchips { grid-area: chip; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 3px var(--gutter); scroll-padding-inline: var(--gutter); }
.kfchips::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .kfchips { margin: 0; padding: 3px 2px; flex-wrap: wrap; } }
.kfchip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--c-line-strong); background: rgb(255 255 255 / .7);
  color: var(--c-text); font: 600 .9rem var(--f-doc); cursor: pointer; transition: background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-press); }
.kfchip span { font: 600 .8125rem var(--f-hien); font-variant-numeric: tabular-nums; color: var(--c-text-accent-sm); }
.kfchip:hover { border-color: var(--c-brand); background: #fff; }
.kfchip[aria-pressed="true"] { background: var(--p-ink-900); border-color: var(--p-ink-900); color: var(--c-text-invert); }
.kfchip[aria-pressed="true"] span { color: var(--p-pink-400); }
.kfchip:active { transform: scale(.97); }
.kfkq { margin-top: 0; font-size: .95rem; color: var(--c-text-2); }
.kfkq:not(:empty) { margin-top: 14px; }

/* ---------- 2. Tờ phim ---------- */
.fvt-phim { position: relative; margin: clamp(28px, 4vw, 48px) 12px 0; padding-block: clamp(56px, 6vw, 80px); border-radius: var(--r-xl); background: var(--p-ink-950); color: var(--c-text-invert); box-shadow: var(--sh-ink); }
.fvt-phim::before, .fvt-phim::after {                     /* hai hàng lỗ răng cưa của cuộn phim */
  content: ""; position: absolute; left: 28px; right: 28px; height: 12px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgb(255 245 248 / .14) 0 16px, transparent 16px 30px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.fvt-phim::before { top: 20px; } .fvt-phim::after { bottom: 20px; }
.fvt-phim :focus-visible { outline-color: var(--p-pink-400); }
.kfmuc[hidden] { display: none; }
.kfmuc + .kfmuc { margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid rgb(255 255 255 / .12); content-visibility: auto; contain-intrinsic-size: auto 1100px; }
.kfmuc-dau { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.kfmuc-dau h2 { font: 700 clamp(1.6rem, 3vw, 2.5rem)/1.08 var(--f-hien); font-stretch: 94%; letter-spacing: -.02em; text-wrap: balance; }
.kfmuc-dem { flex: none; font: 600 .95rem var(--f-hien); font-variant-numeric: tabular-nums; color: var(--p-pink-400); }

.kfluoi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 22px 12px; counter-reset: khung; }
@media (min-width: 700px) { .kfluoi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; } }
@media (min-width: 1024px) { .kfluoi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; } }
.kf-js .kf-sau, .kft.kf-an { display: none; }
.kft { position: relative; min-width: 0; counter-increment: khung; display: flex; flex-direction: column; }

/* khung phim: 4:3 cố định; ảnh ngang phủ kín, ảnh dọc/vuông đặt trọn trên nền mờ của chính nó */
.kfanh { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--p-ink-700); outline: 1px solid rgb(255 255 255 / .08); outline-offset: 3px; }
.kfanh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-flow); }
.kf-js .kfanh img { opacity: 0; }
.kf-js .kfanh.on img { opacity: 1; }
html:not(.kf-js) .kfanh img[data-src] { display: none; }
.kfanh.doc img { object-fit: contain; transform: scale(1.02); }
.kfanh.doc::before { content: ""; position: absolute; inset: -14%; background: var(--bg) center / cover no-repeat; filter: blur(16px) brightness(.4) saturate(1.2); }
.kf-js .kfanh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 22%, rgb(242 132 181 / .12) 48%, transparent 76%); transform: translateX(-100%); animation: kf-sang 1.7s var(--ease-breath) infinite; }
.kf-js .kfanh.on::after, .dung-het .kfanh::after { animation: none; display: none; }
@keyframes kf-sang { to { transform: translateX(100%); } }
.kfanh.hong { background: linear-gradient(150deg, var(--p-pink-800), var(--p-ink-900) 70%); }
.kfanh.hong img, .kfanh.hong::before { display: none; }
.kf-js .kfanh.hong::after { content: attr(data-ten); display: block; animation: none; transform: none; background: none; padding: 14px 14px 0; font: 650 1.05rem/1.22 var(--f-hien); color: var(--c-text-invert); overflow: hidden; max-height: calc(100% - 56px); }
.kft:hover .kfanh img, .kft:focus-within .kfanh img { transform: scale(1.1); }
.kft:hover .kfanh.doc img, .kft:focus-within .kfanh.doc img { transform: scale(1.05); }
.kfnut { position: absolute; left: 10px; bottom: 10px; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c-brand); box-shadow: 0 6px 20px rgb(18 12 15 / .45); transition: transform var(--dur-base) var(--ease-spring); }
.kfnut::after { content: ""; margin-left: 3px; border-left: 12px solid var(--c-text-on-brand); border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent; }
.kft:hover .kfnut, .kft:focus-within .kfnut { transform: scale(1.1); }
.kfdai { position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 3px 8px; border-radius: 8px; background: rgb(18 12 15 / .86); color: #fff; font: 600 .8125rem var(--f-hien); font-variant-numeric: tabular-nums; }

/* chữ dưới khung: số khung + tên (2 dòng) + nhãn */
.kfchu { padding-top: 12px; }
.kfchu::before { content: counter(khung, decimal-leading-zero) "A"; display: block; margin-bottom: 3px; font: 650 .8125rem var(--f-hien); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--p-pink-400); }
.kfh { margin: 0; font: 600 .98rem/1.38 var(--f-doc); }
.kfb { display: block; width: 100%; min-height: 44px; padding: 0; margin: 0; border: 0; background: none; color: var(--c-text-invert); font: inherit; text-align: left; cursor: pointer; }
.kfb::after { content: ""; position: absolute; inset: -6px; z-index: 2; border-radius: 16px; }        /* bấm đâu trên thẻ cũng mở */
.kfb:focus-visible { outline: none; }
.kfb:focus-visible::after { outline: 2px solid var(--p-pink-400); outline-offset: 0; }
.kften { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: 2.76em; }
.kfnhan { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.kfnhan:empty { display: none; }
.kfnhan span { font: 500 .8125rem/1 var(--f-doc); padding: 6px 10px; border-radius: var(--r-pill); color: var(--c-text-invert-2); background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); white-space: nowrap; }

/* khung lớn: thẻ đầu tiên của kho */
#kho .kfmuc:first-of-type .kfluoi > .kft:first-child { grid-column: span 2; grid-row: span 2; }
#kho .kfmuc:first-of-type .kfluoi > .kft:first-child .kfanh { flex: 1 1 auto; aspect-ratio: auto; min-height: 220px; }
#kho .kfmuc:first-of-type .kfluoi > .kft:first-child .kfh { font: 700 clamp(1.2rem, 2vw, 1.6rem)/1.2 var(--f-hien); }
#kho .kfmuc:first-of-type .kfluoi > .kft:first-child .kfnut { width: 64px; height: 64px; left: 16px; bottom: 16px; }
@media (max-width: 699px) {
  #kho .kfmuc:first-of-type .kfluoi > .kft:first-child { grid-row: span 1; }
  #kho .kfmuc:first-of-type .kfluoi > .kft:first-child .kfanh { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
}

.kfthem { display: none; }
.kf-js .kfthem { display: flex; justify-content: center; margin-top: 36px; }
.kf-js .kfthem[hidden] { display: none; }
.kfthem .nut span { color: var(--c-text-invert-2); font-weight: 400; margin-left: 4px; }
.kfrong { margin-top: 8px; padding: 36px 24px; border-radius: var(--r-lg); text-align: center; background: rgb(255 255 255 / .05); border: 1px dashed rgb(255 255 255 / .22); }
.kfrong p { color: var(--c-text-invert-2); }
.kfrong .kfrong-to { font: 650 1.3rem/1.3 var(--f-hien); color: var(--c-text-invert); margin-bottom: 8px; overflow-wrap: anywhere; }
.kfrong .nut { margin-top: 18px; }
.kfsoon, .kfcanh { padding: 28px 24px; border-radius: var(--r-lg); background: rgb(255 255 255 / .05); border: 1px dashed rgb(255 255 255 / .22); color: var(--c-text-invert-2); }
.kfsoon .kicker { font: 650 1rem var(--f-hien); color: var(--p-pink-400); margin-bottom: 8px; }
.kfcanh { margin-bottom: 22px; padding: 14px 18px; font-size: .95rem; }

/* ---------- 3. Dải ảnh lớp học (CH-148 A: ảnh kho Drive của cô) ---------- */
.fvt-anh-ray { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-top: clamp(24px, 3vw, 36px); padding: 16px; border-radius: var(--r-lg);
  background: var(--p-ink-900); scrollbar-width: thin; scrollbar-color: var(--p-pink-600) transparent; }
.fvt-anh-ray .o-anh { flex: 0 0 auto; width: min(64vw, 280px); border-radius: 8px; scroll-snap-align: start; }
.fvt-anh-ray:focus-visible { outline-offset: 4px; }

/* ---------- 4. Hộp xem video (<dialog>, lớp trên cùng) ---------- */
.kfxem { --r: 1.3333; --chrome: 136px; --fw: min(100vw, calc(max(300px, 88vh - var(--chrome)) * var(--r)));
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--c-text-invert); overflow: auto; overscroll-behavior: contain; }
@supports (height: 1dvh) { .kfxem { --fw: min(100vw, calc(max(300px, 88dvh - var(--chrome)) * var(--r))); } }
.kfxem[open] { display: flex; }
.kfxem::backdrop { background: rgb(18 12 15 / .9); }
.kfxem-hop { width: 100vw; margin: auto; display: flex; flex-direction: column; background: var(--p-ink-900); }
@media (prefers-reduced-motion: no-preference) { .kfxem[open] .kfxem-hop { animation: kf-vao var(--dur-base) var(--ease-out); } }
@keyframes kf-vao { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.kfxem-dau { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 18px; }
.kfxem-chu { flex: 1; min-width: 0; padding-top: 4px; }
.kfxem-ten { margin: 0; font: 700 clamp(1.1rem, 2vw, 1.4rem)/1.25 var(--f-hien); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kfxem-phu { margin-top: 4px; color: var(--c-text-invert-2); font-size: .875rem; line-height: 1.4; }
.kfxem-mo { margin-top: 6px; color: var(--c-text-invert-2); font-size: .9rem; line-height: 1.5; }
.kfxem-mo[hidden] { display: none; }
.kfxem-dong { flex: none; position: relative; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 1px solid rgb(255 255 255 / .3); background: rgb(255 255 255 / .08); color: var(--c-text-invert); transition: background-color var(--dur-fast), color var(--dur-fast); }
.kfxem-dong::before, .kfxem-dong::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.kfxem-dong::after { transform: translate(-50%, -50%) rotate(-45deg); }
.kfxem-dong:hover { background: var(--c-brand); color: var(--c-text-on-brand); }
.kfxem-khung { position: relative; width: var(--fw); aspect-ratio: var(--r); min-height: 300px; margin-inline: auto; overflow: hidden; background: #0e0a0c center / contain no-repeat; }
.kfxem-khung::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 25%, rgb(242 132 181 / .1) 50%, transparent 75%); transform: translateX(-100%); animation: kf-sang 1.7s var(--ease-breath) infinite; }
.kfxem-khung.xong::after { display: none; }
.kfxem-khung iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.kfxem-khung.xong iframe { opacity: 1; }
.kfxem-chan { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 12px; }
.kfxem-nut { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); cursor: pointer; border: 1px solid rgb(255 255 255 / .3); background: transparent; color: var(--c-text-invert); font: 600 .9rem var(--f-doc); transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.kfxem-nut .ic { width: 18px; height: 18px; }
.kfxem-nut:hover:not(:disabled) { background: rgb(242 132 181 / .16); border-color: var(--p-pink-400); }
.kfxem-nut:disabled { opacity: .38; cursor: default; }
.kfxem-drive { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-text-invert-2); font-size: .875rem; text-align: center; text-underline-offset: 3px; text-decoration-color: rgb(242 132 181 / .6); }
.kfxem-drive:hover { color: var(--c-text-invert); }
.kfxem :focus-visible { outline-color: var(--p-pink-400); }
@media (min-width: 700px) {
  .kfxem { padding: 24px; --fw: min(960px, calc(100vw - 48px), calc(max(300px, 88vh - var(--chrome)) * var(--r))); }
  @supports (height: 1dvh) { .kfxem { --fw: min(960px, calc(100vw - 48px), calc(max(300px, 88dvh - var(--chrome)) * var(--r))); } }
  .kfxem-hop { width: max(var(--fw), min(440px, calc(100vw - 48px))); border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgb(255 255 255 / .12); box-shadow: var(--sh-ink); }
  .kfxem-dau { padding: 14px 14px 12px 22px; }
  .kfxem-chan { padding: 12px 14px 14px; }
}
@media (max-height: 520px) {
  .kfxem { --chrome: 104px; padding-block: 0; }
  .kfxem-phu, .kfxem-mo { display: none; }
  .kfxem-dau { padding-block: 8px; }
  .kfxem-chan { padding-block: 6px; }
}
html.kf-khoa { overflow: hidden; }

@media (max-width: 767px) {
  .fvt-phim { margin-inline: 8px; border-radius: var(--r-lg); }
  .fvt-phim::before, .fvt-phim::after { left: 16px; right: 16px; height: 10px; }
  .kfdem { text-align: left; }
  #kho .kfmuc:first-of-type .kfluoi > .kft:first-child .kfnut { width: 52px; height: 52px; left: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .kf-js .kfanh::after, .kfxem-khung::after { animation: none; transform: none; background: rgb(255 255 255 / .03); }
  .kft:hover .kfanh img, .kft:focus-within .kfanh img { transform: scale(1.06); }
  .kft:hover .kfnut { transform: none; }
}