/* =====================================================================
   tri-an.css — chiến dịch Tri ân 20/11 (/tri-an/ và /tri-an/<slug>/)
   Trong khuôn design system (theme.css): token màu, font, thẻ trắng viền đen 1.5px. Riêng chiến dịch: nền giấy
   kem, bộ hình giấy cắt (hướng dương, phượng, đồ học trò) và mép giấy xé giữa các hồi.
   ===================================================================== */

/* =====================================================================
   Trang thầy cô: câu chuyện 5 hồi theo "một năm hoa học trò"
   Hệ hình giấy cắt (assets/images/tri-an/): hướng dương = học trò hướng về thầy cô, phượng = ký ức tuổi học trò.
   Nền đi một vòng giấy kem → vàng nắng → giấy kem → đỏ phượng → giấy kem; mép trên mỗi hồi là mép giấy xé đè
   lên hồi trước, hình giấy cắt đặt vắt qua ranh giới để hai hồi liền nhau. Thẻ nội dung cùng một chiều cao,
   chữ dài cắt bớt + "Đọc tiếp" mở hộp đọc trọn (tri-an.js).
   ===================================================================== */
.page-tri-an .subnav { background: var(--white); backdrop-filter: none; }
.page-tri-an .subnav .btn { font-weight: 700; }
.page-tri-an { --env-x: 31%; --env-top: 7%; --env-h: 44%; --paper: #FBF6EC; --paper-line: #E9DDC6; --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28 L0 13.3 L36 8.5 L57 9.3 L73 10.5 L94 7.9 L113 4.7 L128 9.8 L165 20.4 L193 6.0 L214 15.4 L243 7.0 L277 19.9 L304 9.4 L333 19.6 L353 17.6 L390 14.6 L418 18.0 L436 6.2 L461 14.6 L497 17.2 L523 10.9 L542 4.1 L575 20.1 L593 16.5 L625 12.7 L658 11.2 L694 8.4 L731 13.7 L750 5.8 L773 19.7 L797 15.5 L817 13.8 L848 19.0 L879 11.5 L909 5.5 L943 9.6 L980 14.3 L1003 21.2 L1033 22.0 L1057 6.8 L1090 4.1 L1118 8.6 L1136 8.5 L1153 21.8 L1178 11.8 L1200 6.4 L1200 28Z'/%3E%3C/svg%3E"); }

/* Hình giấy cắt: trang trí, không bắt sự kiện; vị trí theo từng hồi ở dưới */
.ta-deco { position: absolute; z-index: 3; height: auto; pointer-events: none; user-select: none; }

/* ---------- Banner ---------- */
.ta-kv { position: relative; overflow: hidden; background: var(--yellow); }
.ta-kv__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); min-height: clamp(540px, 46vw, 680px); }
.ta-kv__text { position: relative; z-index: 2; padding-block: clamp(48px, 6vw, 88px); }
.ta-kv h1 { margin-top: 22px; letter-spacing: -.04em; }
.ta-kv__pre { display: block; font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 600; letter-spacing: -.02em; color: var(--black); }
.ta-kv__name { display: block; font-size: clamp(3.2rem, 7.4vw, 6.8rem); font-weight: 800; line-height: 1.05; color: var(--black); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: .07em; text-underline-offset: .16em; text-decoration-skip-ink: none; }
.ta-kv .lead { max-width: 44ch; margin-top: 24px; color: rgba(9, 11, 12, .75); }
.ta-kv__media { position: relative; align-self: end; display: flex; justify-content: center; align-items: flex-end; min-height: 100%; }
.ta-kv__person { position: relative; z-index: 1; width: auto; max-height: clamp(420px, 40vw, 600px); }
/* Trang tổng quan: banner là một ảnh thiết kế hoàn chỉnh (chữ nằm trong ảnh), tràn khung */

.ta-kv__person--photo { width: min(360px, 76%); aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 18%; border: 10px solid var(--white); transform: rotate(2deg); }
@media (max-width: 900px) {
  .ta-kv__grid { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .ta-kv__text { padding-bottom: 12px; }
  .ta-kv__media { min-height: 400px; }
  .ta-kv__person { max-height: 400px; }   /* vòng 500px cao hơn khung 400px, trồi lên đè câu mô tả */

}

/* ---------- Hồi ---------- */
.ta-act { --act-bg: var(--paper); --ink: var(--black); --soft: var(--gray); --accent: var(--red); --hl: var(--yellow);
  position: relative; padding-block: clamp(80px, 9vw, 136px) clamp(64px, 7vw, 104px); background: var(--act-bg); color: var(--ink); }
/* Mép giấy xé: dải cùng màu hồi này, răng cưa ngẫu nhiên, đè lên đáy hồi trước */
.ta-act + .ta-act::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 28px; z-index: 2; background: var(--act-bg); -webkit-mask: var(--torn) bottom / 100% 100% no-repeat; mask: var(--torn) bottom / 100% 100% no-repeat; }
.ta-act:nth-child(even)::before { transform: scaleX(-1); }
.ta-act--last { padding-bottom: clamp(80px, 9vw, 136px); }
.ta-act :is(h2, h3) { color: var(--ink); }
.ta-act__head { position: relative; z-index: 4; max-width: 760px; }
/* Đầu trang lưu bút: nhãn băng keo bên trái, số trang bên phải, gạch mảnh như lề trên của trang */
/* Nhãn trang: mẩu băng keo dán ngay trên tiêu đề, theo canh lề của tiêu đề (không số trang, không đường kẻ: khách bỏ 30/10) */
.ta-page__tab { display: inline-block; margin: 0 0 18px -6px; padding: 9px 24px; background: url("../images/tri-an/tape-yellow.webp") center / 100% 100% no-repeat; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--black); transform: rotate(-2deg); }
.ta-act__head .ta-page__tab + h2 { margin-top: 0; }
.ta-act__head h2 { margin-top: 0; font-size: clamp(1.9rem, 4.6vw, 3.8rem); overflow-wrap: break-word; line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.ta-act__head .lead { margin-top: 16px; color: var(--soft); }
.ta-act mark { color: inherit; background: none; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: .09em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.ta-act:is( .ta-act--board) mark { text-decoration-color: var(--yellow); }
.ta-act__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.ta-act__grid .ta-act__head { position: sticky; top: calc(var(--nav-h, 72px) + 80px); }
@media (max-width: 900px) { .ta-act__grid { grid-template-columns: 1fr; } .ta-act__grid .ta-act__head { position: static; } }
.ta-part { margin-top: clamp(56px, 6vw, 88px); }
.ta-sub h3 { font-size: var(--fs-h3); letter-spacing: -.02em; }
.ta-sub p { max-width: 60ch; margin-top: 8px; color: var(--soft); }

/* Sticker dán trang: một món ở góc trên phải mỗi trang, vắt qua mép giấy xé; trang nền tối thêm cánh phượng rơi góc dưới trái */
.ta-deco--corner { right: clamp(16px, 4vw, 72px); top: -58px; width: clamp(130px, 13vw, 210px); transform: rotate(-8deg); }
.ta-deco--corner-sm { width: clamp(90px, 8vw, 130px); top: -40px; transform: rotate(-18deg); }
@media (max-width: 760px) {
  .ta-deco--corner { width: 100px; top: -36px; right: 12px; }
  .ta-deco--corner-sm { width: 72px; top: -26px; }
}

/* Ảnh polaroid: viền trắng, nghiêng nhẹ, dán băng keo */

/* ---------- Hồi 1 · Gặp gỡ ---------- */

/* Thông tin hồ sơ: sticker giấy, xen trắng / vàng, nghiêng nhẹ */

[data-readmore].is-clamped { max-height: 13.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
/* Lớp giấy lót: thẻ = mặt giấy trắng (::before) + tấm màu lệch & nghiêng phía sau (::after), giống các lớp
   giấy cắt chồng nhau trong bộ hình. Nền & viền phải nằm ở ::before chứ không ở chính thẻ: trong stacking context
   riêng (isolation), con z-index âm vẫn vẽ ĐÈ lên nền của thẻ */
:is( .ta-review, .ta-write) { position: relative; isolation: isolate; border: 0 !important; background: none !important; }
:is( .ta-review, .ta-write)::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1.5px solid var(--black); border-radius: inherit; background: var(--white); }
:is( .ta-review, .ta-write)::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; }

/* ---------- Hồi 2 · Gieo hạt (nền navy): mỗi mốc năm là một mẩu giấy dán băng keo, xếp so le hai cột ---------- */

/* ---------- Thẻ cắt chữ dùng chung: cùng chiều cao, chữ dài mờ dần + "Đọc tiếp" ---------- */
.ta-clip { --lines: 5; max-height: calc(var(--lines) * 1.6em); overflow: hidden; line-height: 1.6; }
.ta-clip.is-cut { -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.ta-clip p + p { margin-top: .7em; }
.ta-more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 10px; padding: 0; font-size: .88rem; font-weight: 700; color: var(--red-700); border-bottom: 1.5px solid currentColor; }
.ta-more .ic { width: 16px; height: 16px; }
.ta-more .ic use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }
/* Thẻ không bị cắt chữ vẫn giữ chỗ nút để các thẻ cùng hàng thẳng nhau */
.ta-more[hidden] { display: inline-flex; visibility: hidden; }

/* ---------- Hồi 3 · Nảy mầm: thư tay + bức tường cảm ơn ---------- */
.slider--letters { --per: 2; }
.slider--letters .slider__track, .slider--notes .slider__track { padding-top: 22px; }
.ta-paper { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 440px; padding: 30px 26px 24px; background: var(--white); border: 1px solid var(--paper-line); user-select: none;
}
.ta-paper::before { content: ""; position: absolute; top: -16px; left: 50%; width: 110px; height: 34px; background: url("../images/tri-an/tape-red.webp") center / contain no-repeat; transform: translateX(-50%) rotate(-3deg); }
.ta-paper__who { display: flex; align-items: center; gap: 12px; }
.ta-paper__who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ta-paper__who b { display: block; color: var(--black); }
.ta-paper__who span { display: block; font-size: .82rem; color: var(--gray); }
.ta-paper__body { --lines: 9; --rule: 1.8em; margin-top: 20px; font-size: .98rem; line-height: var(--rule); min-height: calc(var(--lines) * var(--rule)); max-height: calc(var(--lines) * var(--rule)); color: var(--black);
  background: repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), color-mix(in srgb, var(--paper-line) 55%, var(--white)) calc(var(--rule) - 1px) var(--rule)); }
.ta-paper__body p + p { margin-top: 0; text-indent: 1.4em; }
.ta-paper__dear { font-weight: 700; }
.ta-paper .ta-more { margin-top: auto; padding-top: 14px; border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; }
/* Điểm trung bình trong một mặt trời giấy vàng */

/* Huy hiệu điểm thu nhỏ (review 02/11): để lời kể của học trò nổi hơn con số */

.ta-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 28px; }
.ta-wall > .is-more { display: none; }
.ta-review { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r); }
.ta-review::after { background: var(--paper-line); transform: translate(8px, 8px) rotate(.8deg); }
.ta-review:nth-child(3n+2)::after { background: var(--navy); transform: translate(8px, 8px) rotate(-.8deg); }
.ta-review .ta-clip { --lines: 5; font-size: 1rem; color: var(--black); }
.ta-review .ta-more { margin-top: 0; }
.ta-review .testi-card__who { margin-top: auto; }
.ta-review__imgs { display: flex; gap: 8px; }
.ta-review__imgs button { width: 80px; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border-radius: var(--r-sm); }
.ta-review__imgs img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1000px) { .ta-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .slider--letters { --per: 1.1; } .ta-paper { min-height: 420px; } }
/* Mobile: 1 cột 6 cảm nhận dài hơn 3.000px, nên chuyển thành hàng vuốt ngang; hiện hết, bỏ nút "Xem thêm". */
@media (max-width: 640px) {
  .ta-wall { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; grid-auto-rows: auto; gap: 18px;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 20px; scroll-padding-inline: var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ta-wall::-webkit-scrollbar { display: none; }
  .ta-wall > * { scroll-snap-align: start; }
  .ta-wall > .is-more { display: flex; }
  .ta-wall + .section-cta { display: none; }
}

/* ---------- Hồi 4 · Nở hoa: nền đen, ảnh polaroid trắng ---------- */
   /* ảnh khoảnh khắc để thẳng (review 02/11) */
:is( .ta-act--board) .slider__dots i { background: rgba(255, 255, 255, .45); }
:is( .ta-act--board) .slider__dots i.is-on { background: var(--white); }
:is( .ta-act--board) .carousel-nav button { color: var(--white); }
:is( .ta-act--board) .carousel-nav use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }

/* ---------- Video ---------- */
.ta-video { max-width: 960px; }
.ta-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 10px solid var(--white); background: var(--dark-700); }
.ta-video__frame iframe, .ta-video__poster, .ta-video__poster img { width: 100%; height: 100%; border: 0; }
.ta-video__poster { display: block; padding: 0; }
.ta-video__poster img { object-fit: cover; }
.ta-video__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--yellow); color: var(--black); transition: transform var(--dur); }
.ta-video__poster:hover .ta-video__play { transform: scale(1.06); }
.ta-video__play .ic { width: 38px; height: 38px; }
.ta-video__play use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }
.ta-video__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.ta-vitem { display: flex; align-items: center; gap: 14px; width: 100%; height: 100%; padding: 10px; border-radius: var(--r); background: rgba(255, 255, 255, .12); text-align: left; transition: background-color var(--dur); }
.ta-vitem:hover { background: rgba(255, 255, 255, .2); }
.ta-vitem.is-active { background: var(--yellow); }
.ta-vitem b { display: block; color: var(--white); font-size: .95rem; line-height: 1.35; }
.ta-vitem small { color: var(--on-navy); }
.ta-vitem.is-active b, .ta-vitem.is-active small { color: var(--black); }
.ta-vitem__thumb { position: relative; flex: none; width: 112px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-sm); }
.ta-vitem__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ta-vitem__thumb .ic { position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -10px; width: 20px; height: 20px; color: var(--white); }
.ta-vitem__thumb use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }

/* ---------- Hồi 5 · Đáp lời: phong bì, giấy ghi chú lời chúc, form ---------- */
.ta-act--center .ta-act__head { margin-inline: auto; text-align: center; }
/* Căn giữa (review 02/11): tiêu đề phụ, đầu khối cảm nhận và video theo trục giữa như tiêu đề section */
.ta-act--center .ta-sub { text-align: center; }
.ta-act--center .ta-sub p { margin-inline: auto; }
.ta-act--center .ta-video { margin-inline: auto; }
.ta-act--center .ta-video__list { grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; }
/* margin auto thay cho justify-content:center: hàng tab cuộn ngang trên mobile không bị cắt tab đầu */
.ta-act--center .ta-tabs > :first-child { margin-left: auto; }
.ta-act--center .ta-tabs > :last-child { margin-right: auto; }
/* Lá thư GTL: trang giấy trắng (lớp navy lót sau), băng keo vàng ở mép trên, sticker phượng góc trên phải */
.ta-mail { position: relative; isolation: isolate; max-width: 1040px; margin: clamp(40px, 5vw, 64px) auto 0; padding: clamp(44px, 5vw, 64px) clamp(24px, 6vw, 80px) clamp(32px, 4vw, 48px); border-radius: var(--r); }
.ta-mail::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1.5px solid var(--black); border-radius: inherit; background: var(--white); }
.ta-mail::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: var(--navy); transform: translate(12px, 12px); }
/* Sticker góc vắt ra ngoài khung: cắt phần tràn ngang của cả khu nội dung (clip không tạo thanh cuộn,
   không cắt theo chiều dọc nên mép giấy xé và sticker vắt qua ranh giới các trang vẫn hiện) */
.ta-journey { overflow-x: clip; }
.ta-mail__deco { right: -36px; top: -46px; width: clamp(110px, 12vw, 170px); transform: rotate(10deg); }
.ta-mail__from { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red-700); }
.ta-mail__h { margin-top: 8px; font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--black); }
.ta-mail__h span { color: var(--red); }
.ta-mail__greet { margin-top: clamp(24px, 3vw, 32px); font-size: 1.15rem; font-weight: 700; color: var(--black); }
.ta-mail__body { margin-top: 12px; }
.ta-mail__body p { max-width: none; font-size: 1.05rem; line-height: 1.75; color: var(--gray); }
.ta-mail__body p + p { margin-top: 12px; }
.ta-mail__sign { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .95rem; }
.ta-mail__sign img { width: 96px; height: auto; }
.ta-mail__sign b { color: var(--black); }
@media (max-width: 760px) { .ta-mail__deco { right: -8px; top: -40px; width: 96px; } }
.slider--notes { --per: 4; }
.ta-note { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 250px; padding: 28px 22px 20px; background: var(--white); border: 1px solid var(--paper-line); user-select: none; }
.ta-note::before { content: ""; position: absolute; top: -16px; left: 50%; width: 96px; height: 30px; background: url("../images/tri-an/tape-yellow.webp") center / contain no-repeat; transform: translateX(-50%) rotate(3deg); }
.slider--notes .slider__slide:nth-child(3n+2) .ta-note { background: #FFF3C4; border-color: #F2DE8C; }
.ta-note .ta-clip { --lines: 5; font-size: 1rem; font-weight: 500; color: var(--black); }
.ta-note__who { margin-top: auto; padding-top: 12px; font-size: .82rem; line-height: 1.4; color: var(--gray); }
.ta-note__who b { display: block; font-size: .92rem; color: var(--black); }
.ta-note__who a { color: var(--black); font-weight: 600; border-bottom: 1.5px solid var(--red); }
@media (max-width: 1000px) { .slider--notes { --per: 2.2; } }
@media (max-width: 560px) { .slider--notes { --per: 1.15; } }
/* Trang tổng quan: giấy ghi chú trong dải chạy ngang */
.ta-wishes { margin-top: 40px; }
.ta-wishes .marquee__track { padding-top: 22px; animation-duration: 60s; }
.marquee--testi .ta-note { flex: 0 0 min(300px, 78vw); min-height: 250px; margin-right: 20px; }
.ta-write { padding: clamp(28px, 4vw, 56px); border-radius: var(--r); }
.ta-write::after { background: var(--navy); transform: translate(12px, 12px) rotate(.6deg); }
.ta-pick { max-width: 720px; }
.ta-pick form { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ta-pick .field { flex: 1 1 320px; margin: 0; }
/* Trang tổng quan: thẻ thầy cô như ảnh dán trên nền vàng, nghiêng so le */
/* Trong hồi nền tối: thẻ vẫn là thẻ trắng nên chữ thẻ giữ màu mặc định, không ăn màu chữ trắng của hồi */
/* Không dùng :not(:hover): site.js stripHover() gỡ mọi selector có :hover trên mobile/tablet, tên sẽ thành chữ trắng.
   Specificity thấp hơn rule hover của theme.css nên desktop vẫn đổi màu khi rê chuột. */
.ta-act .card :is(h3, h3 a) { color: var(--black); }
/* Tab lọc kiểu gạch chân trên nền tối */
:is( .ta-act--board) .filter-bar--tabs .filter-chip { color: var(--on-navy); }
:is( .ta-act--board) .filter-bar--tabs .filter-chip:hover, :is( .ta-act--board) .filter-bar--tabs .filter-chip.is-active { color: var(--white); border-bottom-color: var(--yellow); }
:is( .ta-act--board) .tabrow { border-color: var(--line-navy); }
/* Ô tìm kiếm đứng tách khỏi đường kẻ dưới hàng tab */
.ta-act .tabrow .ta-finder { margin-bottom: 12px; }
.ta-write__h { font-size: var(--fs-h2); letter-spacing: -.03em; }
.ta-write .form-card { border: 0; padding: 0; }

/* Hộp đọc trọn nội dung (thư, cảm nhận, lời chúc) */
.ta-read { width: min(680px, calc(100vw - 24px)); max-height: 86dvh; margin: auto; padding: clamp(36px, 5vw, 56px) clamp(22px, 4vw, 48px) clamp(28px, 4vw, 44px); border: 0; border-radius: var(--r); background: var(--paper); color: var(--black); }
.ta-read::backdrop { background: rgba(9, 11, 12, .72); }
.ta-read[open] { animation: taRead .3s var(--ease); }
@keyframes taRead { from { opacity: 0; transform: translateY(12px); } }
.ta-read__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--black); }
.ta-read__close .ic { width: 28px; height: 28px; }
.ta-read__close use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }
.ta-read__body { font-size: 1.05rem; line-height: 1.75; }
.ta-read__body p + p { margin-top: .8em; }
.ta-read__body .ta-clip { max-height: none; -webkit-mask-image: none; mask-image: none; }
.ta-read__body :is(.ta-paper__who, .ta-note__who, .testi-card__who) { margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1.5px solid var(--black); }
@media (prefers-reduced-motion: reduce) { .ta-read[open] { animation: none; } }

/* ---------- Lightbox ---------- */
.ta-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(9, 11, 12, .94); color: var(--white); }
.ta-lightbox[open] { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.ta-lightbox::backdrop { background: transparent; }
.ta-lightbox figure { grid-column: 2; margin: 0; text-align: center; }
.ta-lightbox img { max-width: 100%; max-height: 80dvh; margin-inline: auto; border-radius: var(--r-sm); }
.ta-lightbox button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--white); }
.ta-lightbox button:hover { background: rgba(255, 255, 255, .12); }
.ta-lightbox .ic { width: 32px; height: 32px; }
.ta-lightbox use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }
.ta-lightbox__nav { justify-self: center; }
.ta-lightbox__nav--prev .ic { transform: scaleX(-1); }
.ta-lightbox__close { position: absolute; top: 16px; right: 16px; }
@media (max-width: 640px) { .ta-lightbox[open] { grid-template-columns: 0 1fr 0; } .ta-lightbox__nav { display: none !important; } }

/* ---------- Form ---------- */
.ta-count { float: right; font-weight: 400; color: var(--gray-soft); }
.ta-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; line-height: 1.5; }
.ta-check input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--black); }
.ta-check a { color: var(--black); font-weight: 600; border-bottom: 1.5px solid var(--red); }
.field input[type="file"] { padding: 10px; font-size: .88rem; }
.field.is-invalid input[type="checkbox"] { outline: 2px solid var(--red); }
.ta-done { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--dark); color: var(--on-navy); }
.ta-done .ic { width: 36px; height: 36px; }
.ta-done use[href] { --ic-1: var(--yellow); --ic-2: var(--white); --ic-3: transparent; }
.ta-done b { display: block; color: var(--white); }

/* ---------- Tổng quan: ô tìm thầy cô cạnh dải lọc ---------- */
.ta-search { position: relative; flex: 0 0 260px; margin: 0; }
.ta-search input { padding-left: 40px; }
.ta-search .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.ta-search use[href] { --ic-1: var(--gray); --ic-2: var(--gray); --ic-3: transparent; }
/* Ô lọc cơ sở + ô tìm tên nằm cùng hàng bên phải thanh tab môn */
.ta-finder { display: flex; gap: 10px; flex: 0 1 auto; }
.ta-campus { flex: 0 0 200px; margin: 0; }
.ta-finder .ta-search { flex-basis: 240px; }
@media (max-width: 720px) { .ta-finder { flex-basis: 100%; } .ta-campus { flex: 0 0 42%; } .ta-finder .ta-search { flex: 1 1 auto; min-width: 0; } }

/* ===== Mobile ===== */
/* Thanh mục lục: tab cuộn ngang, nút "Viết vài dòng" luôn ghim bên phải thay vì bị cắt. */
@media (max-width: 760px) {
  .page-tri-an .subnav a:not(.btn) { padding-inline: 11px; }
  .page-tri-an .subnav .btn { position: sticky; right: 0; padding: 9px 14px; font-size: .86rem; box-shadow: -18px 0 14px -2px var(--white), 22px 0 0 6px var(--white); }
}
}

/* ===== Bổ sung theo brief (31/10) ===== */
/* 1.2 Nhãn môn dạy dưới mảnh giấy "Sổ lưu bút" */

/* 5.2 / 6.1 Tab lọc cảm nhận, album: thanh tab của site đặt trên nền vàng / navy */
.ta-tabs { margin-top: 24px; }
:is( .ta-act--board) .ta-tabs { border-bottom-color: var(--line-navy); }
/* Chia sẻ: một hàng nhỏ cuối trang, sau form */
.ta-share { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--paper-line); }
.ta-share > b { font-size: 1.05rem; color: var(--ink, var(--black)); }
.ta-share__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ta-share .btn use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }
:is( .ta-act--board) .ta-share { border-top-color: var(--line-navy); }
:is( .ta-act--board) .ta-share .btn--ghost { color: var(--white); background: transparent; border-color: rgba(255, 255, 255, .5); }
:is( .ta-act--board) .ta-share .btn--ghost:hover { color: var(--black); background: var(--white); }
/* Dải Pasal là thẻ sáng: giữ chữ đen dù nằm trong trang nền navy (tiêu đề navy mặc định trắng) */

.ta-pick + .ta-share { margin-top: 28px; }
@media (max-width: 560px) { .ta-share__btns { width: 100%; } .ta-share__btns .btn { flex: 1 1 auto; } }

/* Ẩn cụm nút liên hệ nổi khi form đang chiếm màn hình (tri-an.js bindQuietContact) */
.page-tri-an .group-contact { transition: opacity .25s ease, transform .25s ease; }
.page-tri-an.ta-quiet-contact .group-contact { opacity: 0; transform: translateX(24px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .page-tri-an .group-contact { transition: none; } }

/* Ô chọn ảnh (form tri ân): cùng chiều cao, bo góc với ô nhập; viền nét đứt báo đây là chỗ thả ảnh */
/* Ô trong field-row là grid item: min-width 0 để chữ dài không đẩy cột rộng ra, bóp ô bên cạnh */
.ta-form .field-row > .field { min-width: 0; }
.field .ta-file { position: relative; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 6px 6px 6px 12px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--white); color: var(--gray-soft); font-size: .95rem; font-weight: 400; cursor: pointer; transition: border-color .2s, background .2s; }
.ta-file input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.ta-file:hover, .ta-file.is-drag { border-color: var(--black); background: var(--paper); }
.ta-file:focus-within { border-style: solid; border-color: var(--black); box-shadow: 0 0 0 3px rgba(9, 11, 12, .08); }
.field .ta-file.has-files { color: var(--black); font-weight: 600; }
.ta-file__ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); }
.ta-file__ic use[href] { --ic-1: var(--black); --ic-2: var(--black); --ic-3: transparent; }
.ta-file__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-file__btn { flex: none; padding: 8px 14px; border-radius: var(--r-pill); background: var(--black); color: var(--white); font-size: .82rem; font-weight: 700; pointer-events: none; }
.field.is-invalid .ta-file { border-color: var(--red); }
.ta-file__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.ta-file__list li { position: relative; display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 30px 4px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); font-size: .8rem; color: var(--black); }
.ta-file__list img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.ta-file__list span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-file__del { position: absolute; top: 50%; right: 4px; width: 24px; height: 24px; border-radius: 50%; transform: translateY(-50%); font-size: 1.1rem; line-height: 1; color: var(--gray); }
.ta-file__del:hover, .ta-file__del:focus-visible { background: var(--smoke); color: var(--black); }

/* =====================================================================
   Trang thầy cô, concept BẢNG ĐEN (khách 02/11): nền đen như bảng phấn, chữ phấn trắng là màu chính,
   vàng và đỏ làm điểm nhấn; thư, cảm nhận, ảnh, thẻ là giấy dán lên bảng. Cả trang là MỘT tấm bảng liền
   (không đổi nền giữa các phần), các phần nối nhau bằng nét phấn đứt có mũi tên.
   ===================================================================== */
.page-tri-an { --board: #17191A; --chalk: #F3F1EA; --chalk-soft: rgba(243, 241, 234, .74); --chalk-line: rgba(243, 241, 234, .3);
  /* bụi phấn: nhiễu mịn + vài vệt lau mờ, vẽ bằng CSS để khỏi tải ảnh nền lớn */
  /* đường kẻ bảng: ô caro nhỏ 28px, rất nhạt, đọc như vân bảng chứ không thành lưới (khách 02/11: ô to bị rối) */
  --board-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M0 27.5H28' stroke='%23F3F1EA' stroke-opacity='.034'/%3E%3Cpath d='M27.5 0V28' stroke='%23F3F1EA' stroke-opacity='.022'/%3E%3C/svg%3E");
  --board-bg: var(--board-lines), radial-gradient(ellipse 60% 40% at 18% 12%, rgba(255, 255, 255, .055), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 48%, rgba(255, 255, 255, .045), transparent 70%),
    radial-gradient(ellipse 70% 30% at 30% 88%, rgba(255, 255, 255, .04), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), var(--board); }
/* Một tấm bảng duy nhất cho cả banner + nội dung: vẽ lưới một lần trên main để đường kẻ liền, đều giữa các phần
   (trước đây banner và thân trang mỗi bên một lớp nền, lưới lệch nhau ở chỗ nối) */
.page-tri-an main:is(:has(.ta-kv--board), :has(.ta-act--board)) { background: var(--board-bg); }   /* trang tổng quan cũng là bảng (02/11), banner ảnh nằm trên */
.ta-kv--board, .ta-journey:has(.ta-act--board) { background: none; }
.ta-act--board { --act-bg: transparent; --ink: var(--chalk); --soft: var(--chalk-soft); --accent: var(--yellow); --hl: var(--yellow); }
.ta-act--board :is(h2, .ta-sub h3) { text-shadow: 0 0 1px rgba(255, 255, 255, .35); }   /* mép chữ hơi nhoè như phấn */

/* Nét phấn nối các phần: đứt khúc, uốn cong, có mũi tên; đổi chiều xen kẽ để mắt đi zíc zắc xuống */
.ta-act--board + .ta-act--board::before { content: ""; top: -54px; left: 50%; right: auto; width: 150px; height: 118px; z-index: 3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 118' fill='none' stroke='%23F3F1EA' stroke-linecap='round' stroke-linejoin='round' opacity='.62'%3E%3Cpath d='M30 4 C 10 40, 130 50, 108 96' stroke-width='3' stroke-dasharray='7 9'/%3E%3Cpath d='M94 88 L108 104 L120 86' stroke-width='3.2'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: none; mask: none; transform: translateX(-50%); }
.ta-act--board:nth-child(even)::before { transform: translateX(-50%) scaleX(-1); }

/* ---------- Banner trên bảng ---------- */
.ta-kv--board { color: var(--chalk); }
.ta-kv--board :is(.ta-kv__pre, .ta-kv__name) { color: var(--chalk); text-shadow: 0 0 1px rgba(255, 255, 255, .3); }
.ta-kv--board .lead { color: var(--chalk-soft); }
/* nét phấn nối từ banner xuống phần đầu */
.ta-kv--board + .subnav + .ta-journey > .ta-act:first-child::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 64px; transform: translateX(-50%);
  background: repeating-linear-gradient(var(--chalk-line) 0 8px, transparent 8px 16px); }

/* ---------- Thành tích: dải số liệu viết phấn ---------- */
.ta-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);   /* số cột = số chỉ số (3 hoặc 4 tuỳ thầy cô) */
  margin: clamp(32px, 4vw, 48px) 0 0; border-block: 1.5px dashed var(--chalk-line); }
.ta-stats div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 22px 20px; }
.ta-stats div + div { border-left: 1.5px dashed var(--chalk-line); }
.ta-stats dd { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--yellow); text-shadow: 0 0 1px rgba(247, 202, 57, .5); }
.ta-stats dt { font-size: .92rem; color: var(--chalk-soft); }
@media (max-width: 760px) {
  .ta-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ta-stats div:nth-child(3) { border-left: 0; }
  .ta-stats div:nth-child(n+3) { border-top: 1.5px dashed var(--chalk-line); }
}

/* ---------- Lịch dạy & khoá học ---------- */
.ta-courses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.ta-course { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border: 1.5px dashed var(--chalk-line); border-radius: 14px; color: var(--chalk); }
.ta-course__cat { align-self: flex-start; padding: 3px 10px; border-radius: var(--r-pill); background: var(--yellow); color: var(--black); font-size: .72rem; font-weight: 700; }
.ta-course h4 { font-size: 1.15rem; line-height: 1.3; }
.ta-course h4 a { color: var(--chalk); }
.ta-course p { font-size: .9rem; color: var(--chalk-soft); }
.ta-course .ta-course__n { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--chalk); }
.ta-course__act { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.ta-course .link-arrow { color: var(--chalk); }
.ta-course .link-arrow use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }
@media (max-width: 1100px) { .ta-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ta-courses { grid-template-columns: 1fr; } }
/* Lịch tuần: 7 cột ngày kẻ phấn, mỗi lớp là một mẩu giấy ghi chú dán lên */
.ta-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 28px; border: 1.5px dashed var(--chalk-line); border-radius: 14px; }
.ta-week__day { min-height: 150px; padding: 12px 10px; }
.ta-week__day + .ta-week__day { border-left: 1.5px dashed var(--chalk-line); }
.ta-week__name { display: block; margin-bottom: 10px; font-size: .85rem; font-weight: 700; color: var(--yellow); text-align: center; }
.ta-week ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ta-slot { display: grid; gap: 2px; padding: 8px 9px; border-radius: 6px; background: #FFF3C4; color: var(--black); font-size: .8rem; line-height: 1.35; transform: rotate(-1deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.ta-slot:nth-child(even) { transform: rotate(1deg); }
.ta-slot b { font-size: .82rem; }
.ta-slot small { color: rgba(9, 11, 12, .7); font-size: .72rem; }
.ta-slot--full { background: var(--white); }
.ta-slot--full b::after { content: " · Đủ lớp"; color: var(--red-700); }
.ta-slot--none { background: none; box-shadow: none; transform: none; color: rgba(243, 241, 234, .35); text-align: center; font-size: .76rem; }
@media (max-width: 900px) {
  .ta-week { grid-template-columns: 1fr; }
  .ta-week__day { display: grid; grid-template-columns: 70px 1fr; align-items: start; gap: 10px; min-height: 0; }
  .ta-week__day + .ta-week__day { border-left: 0; border-top: 1.5px dashed var(--chalk-line); }
  .ta-week__day.is-empty { display: none; }
  .ta-week__name { margin: 8px 0 0; text-align: left; }
}
.ta-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 64px); padding: 26px 28px; border: 2px dashed var(--yellow); border-radius: 16px; }
.ta-cta b { font-size: 1.3rem; color: var(--chalk); }
.ta-cta p { margin-top: 6px; max-width: 56ch; color: var(--chalk-soft); }
.ta-act--board .ta-video { margin-top: clamp(32px, 4vw, 48px); }
.ta-act--board .ta-sub p { color: var(--chalk-soft); }
/* Giấy dán trên bảng (thư, form, câu nói, thẻ mốc năm, dải Pasal…) giữ chữ mực đen: đặt lại biến màu chữ,
   nếu không tiêu đề bên trong kế thừa phấn trắng và biến mất trên nền giấy */
.ta-act--board :is(.ta-mail, .ta-write, .ta-paper, .ta-review, .ta-note, .honor-card) { --ink: var(--black); --soft: var(--gray); color: var(--black); }
.ta-act--board :is(.ta-mail, .ta-write) :is(h2, h3) { text-shadow: none; }
/* Hình vẽ phấn: không xoay, không đổ bóng như sticker giấy; hơi trong để giống phấn trên bảng */
.ta-chalk.ta-deco--corner { opacity: .92; transform: none; filter: none; }

/* Chữ viết tay (Patrick Hand) cho những chỗ là lời người viết: câu trích dẫn, thư Ban Giám đốc, thư học trò, lời chúc.
   Cỡ chữ lớn hơn chữ thường vì nét viết tay có chiều cao chữ thấp */
.page-tri-an { --hand: 'Playwrite IN', 'Patrick Hand', 'Be Vietnam Pro', cursive; }
:is(.ta-mail__greet, .ta-mail__body p) { font-family: var(--hand); font-size: 1.22rem; line-height: 1.55; color: var(--black); }
.ta-mail__greet { font-size: 1.32rem; }
.ta-paper__body { font-family: var(--hand); font-size: 1.16rem; }
.ta-paper__dear { font-weight: 400; font-size: 1.25rem; }
.ta-note .ta-clip { font-family: var(--hand); font-size: 1.18rem; font-weight: 400; line-height: 1.4; }

/* Hình phấn góc trái: đối xứng với góc phải, vắt qua ranh giới hai phần (nét nối phấn nằm giữa) */
.ta-deco--corner-l { left: clamp(16px, 4vw, 72px); right: auto; top: -48px; width: clamp(96px, 9vw, 150px); }
@media (max-width: 760px) { .ta-deco--corner-l { width: 72px; top: -30px; left: 12px; } }
/* Phần đầu nằm ngay dưới thanh mục lục trắng: hình góc không vắt lên trên, đặt hẳn trong bảng */
.ta-journey > .ta-act--board:first-child :is(.ta-deco--corner, .ta-deco--corner-l) { top: 18px; }
/* Câu phương châm viết thẳng lên bảng bằng phấn: bỏ tờ giấy, chữ viết tay trắng, gạch phấn vàng bên dưới */

/* Mỗi phần chỉ một hình phấn ở góc, xen kẽ phải / trái theo thứ tự phần (khách 02/11: hai hình ngang hàng hai bên trông kì) */
.ta-journey > .ta-act--board:nth-child(odd) .ta-deco--corner-l, .ta-journey > .ta-act--board:nth-child(even) .ta-deco--corner { display: none; }

/* Ô trên bảng có nền đặc (khách 02/11: ô trong suốt lộ đường kẻ caro nên rối) */
.page-tri-an { --board-card: #222527; }
.ta-course, .ta-week, .ta-cta { background: var(--board-card); border-style: solid; border-color: rgba(243, 241, 234, .16); }
.ta-cta { border-color: rgba(247, 202, 57, .55); }
.ta-week__day + .ta-week__day { border-left-style: solid; border-color: rgba(243, 241, 234, .12); }
@media (max-width: 900px) { .ta-week__day + .ta-week__day { border-top-style: solid; } }
/* Playwrite có đuôi chữ dài: giãn dòng, chữ nhỏ lại một chút để các dòng không chạm nhau */
:is(.ta-mail__greet, .ta-mail__body p) { font-size: 1.06rem; line-height: 2; }
.ta-mail__greet { font-size: 1.14rem; }
.ta-mail__body p + p { margin-top: .9em; }
.ta-paper__body { --rule: 2.1em; font-size: .98rem; }
.ta-paper__dear { font-size: 1.04rem; }
.ta-note .ta-clip { font-size: 1rem; line-height: 1.85; }
/* Dưới câu phương châm: vạch thẳng ngắn màu vàng, cùng kiểu gạch chân thẳng của web (bỏ nét lượn sóng) */

/* Dải số liệu: nền đặc, viền liền như các ô khác trên bảng */
.ta-stats { background: var(--board-card); border: 1px solid rgba(243, 241, 234, .16); border-radius: 14px; }
.ta-stats div + div { border-left: 1px solid rgba(243, 241, 234, .12); }
@media (max-width: 760px) { .ta-stats div:nth-child(n+3) { border-top: 1px solid rgba(243, 241, 234, .12); } }

/* Nút chia sẻ: một kiểu viên thuốc cho cả ba (nền đặc, viền mảnh, icon trước chữ), hợp cả nền bảng lẫn nền navy */
.ta-share__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 18px; border: 1px solid rgba(243, 241, 234, .28); border-radius: var(--r-pill); background: var(--board-card, #222527); color: var(--chalk, #F3F1EA); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.ta-share__btn:hover, .ta-share__btn:focus-visible { border-color: var(--yellow); color: var(--yellow); }
.ta-share__btn .ic { flex: none; }
.ta-share__btn use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }
.ta-share__ok { display: none; }
.ta-share__btn.is-done { border-color: var(--yellow); color: var(--yellow); }
.ta-share__btn.is-done .ta-share__copy { display: none; }
.ta-share__btn.is-done .ta-share__ok { display: inline; }
@media (max-width: 560px) { .ta-share__btn { flex: 1 1 auto; justify-content: center; } }
/* Icon nét tự vẽ (không qua hệ .ic của site, vốn tô đặc theo --ic-*) */
.ta-ico { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; }
.ta-share__btn .ta-share__ok { display: none; }
.ta-share__btn.is-done .ta-share__ok { display: inline; }

/* Đồng bộ bo góc theo token của site (khách 02/11): --r 12px cho thẻ/khối, --r-sm 8px cho phần tử nhỏ bên trong */
.ta-course, .ta-week, .ta-cta, .ta-stats, .ta-paper, .ta-note, .ta-mail, .ta-review { border-radius: var(--r); }
.ta-slot, .ta-file__list img { border-radius: var(--r-sm); }

/* Băng keo thư Ban Giám đốc: phần tử riêng dán đè lên mép trên (trước đây là ảnh nền của lớp giấy nên bị cắt mất nửa) */
.ta-mail__tape { position: absolute; z-index: 2; top: -20px; left: 50%; width: 156px; height: 44px; transform: translateX(-50%) rotate(-2deg); background: url("../images/tri-an/tape-yellow.webp") center / 100% 100% no-repeat; pointer-events: none; }
/* Ô trên bảng nổi lên (khách 02/11): nền trắng đồng bộ web (đổi từ giấy ngà 02/11), chữ mực đen, nhãn đỏ; như giấy dán lên bảng */
.ta-stats, .ta-course, .ta-week, .ta-cta { background: var(--white); border: 0; color: var(--black); box-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.ta-week__name, .ta-course__n { color: var(--red-700); }
.ta-course h4 a, .ta-course .link-arrow, .ta-cta b { color: var(--black); }
.ta-course p, .ta-cta p, .ta-stats dt { color: var(--gray); }
.ta-stats dd { color: var(--red); text-shadow: none; }
.ta-stats div + div, .ta-week__day + .ta-week__day { border-color: var(--paper-line); }
@media (max-width: 760px) { .ta-stats div:nth-child(n+3) { border-top-color: var(--paper-line); } }
@media (max-width: 900px) { .ta-week__day + .ta-week__day { border-top-color: var(--paper-line); } }
.ta-slot--none { color: rgba(9, 11, 12, .38); }
.ta-slot { box-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.ta-slot--full { background: var(--white); outline: 1px solid var(--paper-line); }
.ta-cta { outline: 2px solid var(--yellow); outline-offset: -2px; }
.ta-act--board .ta-course .ta-course__n { color: var(--black); }
/* Tiêu đề phụ trong mỗi phần lớn hơn (khách 02/11), vẫn nhỏ hơn rõ so với h2 */
.ta-sub h3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.15; letter-spacing: -.025em; }
.ta-sub p { margin-top: 10px; font-size: 1.05rem; }
/* Ảnh "trên lớp" như polaroid dán hơi nghiêng lên bảng (khách 02/11) */

/* Dòng ký tên dưới câu phương châm: chữ thường của site, không viết tay (khách 02/11) */

/* Khung phấn sau chân dung (ChatGPT vẽ, 02/11), thay vòng giấy navy. Neo theo khung ảnh: mọi ảnh tách nền 836×1254,
   đỉnh đầu ~15% → khung rộng 112% ảnh, mép trên ở 3% chiều cao ảnh, nên đầu nằm trong vòng và hoa ở ngang eo với mọi thầy cô */
.ta-kv__fig { position: relative; display: inline-block; line-height: 0; }
.ta-kv__fig .ta-kv__person { position: relative; z-index: 1; }
/* Ảnh "trên lớp" nghiêng: .reveal.in của site đặt transform:none nên dùng thuộc tính rotate riêng (cộng dồn, không bị ghi đè) */

/* Banner (review 02/11): nhãn dùng chung kiểu băng keo vàng của section; 4 thông tin gộp thành một tấm thẻ trắng
   (không băng keo), mỗi mục có icon tròn vàng và giá trị chữ lớn để nổi trên nền bảng */
.ta-kv__tab { margin-left: 0; }

/* Gạch chân tên ở banner bảng: vàng như gạch chân tiêu đề section (review 02/11) */
.ta-kv--board .ta-kv__name { text-decoration-color: var(--yellow); }
/* Khối số liệu: căn giữa từng ô (review 02/11) */
.ta-stats div { text-align: center; }

/* Học trò tiêu biểu: 4 thẻ một khung để thẻ thứ 5 trượt vào (khách muốn dạng slider 02/11) */
.slider--honors { --per: 4; }
@media (max-width: 1100px) { .slider--honors { --per: 3; } }
@media (max-width: 820px) { .slider--honors { --per: 2; } }
@media (max-width: 560px) { .slider--honors { --per: 1.15; } }
/* Điểm trung bình (02/11): tấm thẻ trắng nằm ngang, khối điểm vàng bên trái, sao + mô tả bên phải */

/* Nút nổi tri ân: icon tròn vàng đặt trần như Zalo, Messenger */
.group-contact .fc-trian { border-radius: 50%; --pulse: rgba(247, 202, 57, .55); }
/* Thẻ cảm nhận đồng bộ thẻ trắng của web (02/11): nền trắng, không viền đen, không lớp giấy lệch phía sau, bóng đổ như thẻ khoá học */
.ta-review { background: var(--white) !important; box-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.ta-review::before, .ta-review::after, .ta-review:nth-child(3n+2)::after { content: none; }

/* Ô "Muốn học cùng" (02/11): nền vàng, bỏ viền */
.ta-cta { outline: 0; background: var(--yellow); }
.ta-cta p { color: rgba(9, 11, 12, .72); }
/* Lịch tuần (02/11): đầu cột đen trên dải vàng, khung lớp nổi hơn (viền đậm + bóng), lớp còn chỗ nền vàng đặc */
.ta-week { overflow: hidden; }
@media (min-width: 901px) { .ta-week__name { margin: -12px -10px 12px; padding: 10px 8px; background: var(--yellow); color: var(--black) !important; font-weight: 800; } }
@media (max-width: 900px) { .ta-week__name { justify-self: start; padding: 4px 10px; border-radius: var(--r-pill); background: var(--yellow); color: var(--black) !important; font-weight: 800; } }
.ta-week__day + .ta-week__day { border-color: rgba(9, 11, 12, .12); }
.ta-slot:not(.ta-slot--none) { border: 1.5px solid var(--black); box-shadow: 0 4px 0 var(--black); transform: none; }
.ta-slot--full { outline: 0; background: var(--white); }
.ta-slot:not(.ta-slot--none):not(.ta-slot--full) { background: var(--yellow); }
.ta-slot--none { box-shadow: none; border: 1.5px dashed rgba(9, 11, 12, .18); background: none; }

/* ===== Vòng góp ý 02/11 (lần 3) ===== */
/* Môn dạy nằm dưới tên */

/* Câu phương châm hiện dần từng chữ (tri-an.js bindWrite) */
.ta-w { opacity: 0; transition: opacity .35s ease; }
.ta-w.is-on { opacity: 1; }
/* Số liệu: bỏ vạch dọc phân cách */
.ta-stats div + div, .ta-stats div:nth-child(n+3) { border: 0 !important; }
/* Nút "Đăng ký học với cô" trắng trên ô vàng */
.ta-cta .ta-cta__btn { background: var(--white); color: var(--black); border: 0; }
.ta-cta .ta-cta__btn:hover { background: var(--black); color: var(--white); }
.ta-cta .ta-cta__btn use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }
/* Thẻ trên bảng: bỏ viền, nổi nhờ nền trắng / kem / vàng / đỏ và bóng đổ */
.ta-act--board :is(.ta-paper, .ta-note, .honor-card, .ta-mail, .ta-write) { border: 0 !important; }
.ta-act--board :is(.ta-mail, .ta-write)::before { border: 0; }
.ta-act--board :is(.ta-mail, .ta-write)::after { content: none; }
.ta-act--board :is(.ta-paper, .ta-note, .honor-card, .ta-mail, .ta-write) { box-shadow: 0 8px 0 rgba(0, 0, 0, .35); }
.ta-act--board .honor-card { overflow: hidden; border-radius: var(--r); }
/* Khoảnh khắc: lưới ảnh kiểu gallery (ảnh lớn bên trái, các ảnh nhỏ ghép quanh), chú thích phủ lên ảnh */
.ta-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 220px); grid-auto-flow: dense; gap: 12px; }
.ta-gallery > .is-more { display: none; }
.ta-gal { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); background: #111; }
.ta-gal:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }   /* mỗi 5 ảnh: 1 lớn + 4 nhỏ lấp kín 4 cột × 2 hàng */
/* Editor ticked "Ảnh lớn" on some photos: those, and only those, take the big cell. */
.ta-gallery.has-big .ta-gal:not(.ta-gal--big):nth-child(5n+1) { grid-column: auto; grid-row: auto; }
.ta-gallery.has-big .ta-gal--big { grid-column: span 2; grid-row: span 2; }
.ta-gal button { display: block; width: 100%; height: 100%; padding: 0; }
.ta-gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ta-gal:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .ta-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; } .ta-gal:nth-child(5n+1), .ta-gallery.has-big .ta-gal--big { grid-column: span 2; grid-row: span 1; } .ta-gallery.has-big .ta-gal:not(.ta-gal--big):nth-child(5n+1) { grid-column: auto; } }
/* Nút nổi "Gửi lời tri ân": nhãn chữ luôn hiện cạnh icon để biết đây là nút gì */
.group-contact > a.fc-trian::after { opacity: 1; visibility: visible; background: var(--yellow); color: var(--black); font-weight: 800; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
@media (max-width: 560px) { .group-contact > a.fc-trian::after { font-size: .74rem; padding: 5px 9px; right: calc(100% + 8px); } }
/* Menu neo: chừa chỗ header + thanh mục lục khi nhảy tới mục */
.page-tri-an [id] { scroll-margin-top: 140px; }
/* Thư tay dạng slider (02/11): desktop 1,5 thư một khung để thấy rõ còn thư kế tiếp; tablet 1,2; mobile 1,08 */
.slider--letters { --per: 1.5; }
@media (max-width: 1100px) { .slider--letters { --per: 1.2; } }
@media (max-width: 640px) { .slider--letters { --per: 1.08; } }

/* ===== Giấy viết thư (ChatGPT vẽ 02/11, assets/images/tri-an/paper/): tờ giấy ngà mép gợn, góc quăn; dòng kẻ vẫn vẽ bằng CSS.
   Mỗi khổ màn hình một tờ có tỉ lệ gần khung nhất để giấy không bị kéo méo: ngang 1,93 (desktop) · gần vuông 1,27 (tablet) · dọc 0,8 (mobile).
   Thư dài thì cắt bớt + "Đọc tiếp" mở hộp đọc trọn ===== */
.ta-act--board .ta-paper { --sheet: var(--paper-l); background: var(--sheet) center / 100% 100% no-repeat !important; border: 0; border-radius: 0; box-shadow: none !important;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35)); padding: 34px 6% 30px; min-height: 0; aspect-ratio: 1.93; }
.ta-act--board .ta-paper::before { top: -10px; }
.ta-act--board .ta-paper__body { --lines: 7; }
.ta-act--board .ta-mail { --sheet: var(--paper-m); }
.ta-act--board .ta-mail::before { background: var(--sheet) center / 100% 100% no-repeat; border: 0; border-radius: 0; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35)); }
.ta-act--board .ta-mail { box-shadow: none !important; padding-inline: clamp(28px, 7%, 96px); }
.ta-mail__clip { --lines: 14; line-height: 2; max-height: calc(var(--lines) * 2em + 3em); }
.ta-mail .ta-more { margin-top: 12px; }
@media (max-width: 1100px) {
  .ta-act--board .ta-paper { --sheet: var(--paper-m); aspect-ratio: 1.41; }
  .ta-act--board .ta-paper__body { --lines: 9; }
}
@media (max-width: 640px) {
  .ta-act--board .ta-paper { --sheet: var(--paper-s); aspect-ratio: .8; padding: 30px 7% 24px; }
  .ta-act--board .ta-paper__body { --lines: 8; }
  .ta-act--board .ta-mail { --sheet: var(--paper-s); }
  .ta-mail__clip { --lines: 12; }
}
/* Thư tay: về lại 2 thư một hàng trên desktop (khách 02/11); tablet 1,15; mobile 1,08 */
.slider--letters { --per: 2; }
@media (max-width: 1100px) { .slider--letters { --per: 1.15; } }
@media (max-width: 640px) { .slider--letters { --per: 1.08; } }
/* Giấy thư 2 cột ~670px: dùng tờ gần vuông (5:4) để đủ chỗ chữ, không trống đáy */
.ta-act--board .ta-paper { --sheet: var(--paper-m); aspect-ratio: 1.41; }
.ta-act--board .ta-paper__body { --lines: 9; }
@media (max-width: 640px) { .ta-act--board .ta-paper { --sheet: var(--paper-s); aspect-ratio: .8; } .ta-act--board .ta-paper__body { --lines: 8; } }
/* Bỏ bóng đen của thẻ trên bảng: đen trên nền đen gần như không thấy (khách 02/11). Thẻ nổi nhờ màu nền */
.ta-act--board :is(.ta-paper, .ta-note, .honor-card, .ta-mail, .ta-write, .ta-review, .ta-course, .ta-week, .ta-cta, .ta-stats, .ta-slot) { box-shadow: none !important; }
.ta-act--board :is(.ta-paper, .ta-mail::before) { filter: none; }
.ta-act--board .ta-mail::before { filter: none; }

/* Banner gọn (khách 02/11: chữ dài, ảnh nhỏ): bỏ dòng môn dạy trùng ô thông tin, bỏ câu mô tả và mũi tên;
   cột chữ hẹp lại, ảnh chân dung to hơn */
@media (min-width: 901px) {
  .ta-kv--board .ta-kv__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: clamp(600px, 50vw, 760px); }
  .ta-kv--board .ta-kv__person { max-height: clamp(520px, 46vw, 720px); }
}
/* Giấy bản 2 (02/11): trắng ngà gần trắng, nét cao, mỗi tờ một file nền trong suốt */

/* =====================================================================
   MOBILE + TABLET thiết kế riêng (khách 02/11: không phải desktop thu nhỏ)
   ===================================================================== */
/* --- Tablet 641–1100px --- */
@media (min-width: 641px) and (max-width: 1100px) {
  /* Banner: chữ trái, ảnh phải vẫn giữ 2 cột nhưng ảnh chiếm nhiều hơn */
  .ta-kv--board .ta-kv__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; padding-top: 24px; align-items: end; }
  .ta-kv--board .ta-kv__text { padding-bottom: 48px; }
  .ta-kv--board .ta-kv__person { max-height: 520px; }
  /* Mốc năm: 2 cột thẳng hàng, không so le */

  /* Khoá học: vuốt ngang, 2 thẻ một khung */
  .ta-courses { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scrollbar-width: none; }
  .ta-courses > * { flex: 0 0 46%; scroll-snap-align: start; }
}

/* --- Mobile ≤640px --- */
@media (max-width: 640px) {
  /* Banner: nhãn + tên, rồi chân dung lớn, rồi thẻ thông tin gọn 2×2 nằm dưới ảnh */
  .ta-kv--board .ta-kv__grid { display: flex; flex-direction: column; gap: 0; }
  .ta-kv--board .ta-kv__text { display: contents; }
  .ta-kv--board .ta-kv__tab { order: 1; align-self: flex-start; margin-top: 28px; }
  .ta-kv--board h1 { order: 2; margin-top: 14px; }
  .ta-kv--board .ta-kv__name { font-size: clamp(3rem, 15vw, 4rem); }
  .ta-kv--board .ta-kv__media { order: 3; min-height: 0; margin-top: 8px; }
  .ta-kv--board .ta-kv__person { max-height: 380px; }
  /* Section: đầu gọn, chữ dẫn ngắn lại */
  .ta-act { padding-block: 72px 56px; }
  .ta-act__head h2 { font-size: clamp(1.75rem, 8vw, 2.2rem); }
  .ta-act__head .lead { font-size: .98rem; }
  .ta-sub h3 { font-size: 1.45rem; }
  /* Mốc năm: dòng thời gian dọc gọn, năm bên trái */

  /* Số liệu 2×2 */
  .ta-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ta-stats div { padding: 16px 10px; }
  /* Khoá học: vuốt ngang từng thẻ */
  .ta-courses { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scrollbar-width: none; }
  .ta-courses > * { flex: 0 0 84%; scroll-snap-align: start; }
  /* CTA đăng ký: nút rộng hết khung */
  .ta-cta { padding: 20px; }
  .ta-cta .ta-cta__btn { width: 100%; justify-content: center; }
  /* Form: 3 gợi ý viết thành một hàng chip ngắn, ẩn phần giải thích dài */
  .ta-write .enroll-points { display: flex; flex-wrap: wrap; gap: 8px; }
  .ta-write .enroll-points li { gap: 6px; padding: 6px 10px 6px 6px; border-radius: var(--r-pill); background: var(--smoke); }
  .ta-write .enroll-points .promise__ic { width: 26px; height: 26px; }
  .ta-write .enroll-points li span:not(.promise__ic) { display: none; }
  .ta-write .enroll-points b { font-size: .82rem; }
  /* Chữ dẫn dưới nút nổi tri ân gọn lại để không đè nội dung */
  .group-contact > a.fc-trian::after { display: none; }
}
/* Nút nổi tri ân: mobile vẫn hiện nhãn (khách muốn luôn biết icon là gì), chữ nhỏ gọn */
@media (max-width: 640px) { .group-contact > a.fc-trian::after { display: block; font-size: .7rem; padding: 4px 8px; right: calc(100% + 6px); } }

/* Giấy bản 5 (02/11): ChatGPT vẽ lại một tờ trắng nét sắc (khách không nhận bản dựng bằng code); bản dọc là tờ ngang xoay + lật */
.page-tri-an { --paper-l: url("../images/tri-an/paper/giay-ngang-5.webp"); --paper-m: url("../images/tri-an/paper/giay-ngang-5.webp"); --paper-s: url("../images/tri-an/paper/giay-doc-5.webp"); }
/* Dòng kẻ trên giấy đậm hơn (khách 02/11) */
.ta-paper__body { background: repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), rgba(70, 110, 160, .28) calc(var(--rule) - 1px) var(--rule)) !important; }
.ta-mail__body p, .ta-mail__greet { background: none; }
.ta-mail__clip { background: repeating-linear-gradient(transparent 0 calc(2em - 1px), rgba(70, 110, 160, .22) calc(2em - 1px) 2em); }
/* Banner ngắn lại (khách 02/11) */
@media (min-width: 901px) {
  .ta-kv--board .ta-kv__grid { min-height: clamp(480px, 38vw, 580px); }
  .ta-kv--board .ta-kv__text { padding-block: 40px 48px; }
  .ta-kv--board .ta-kv__person { max-height: clamp(440px, 36vw, 560px); }
}

/* ===== Landing thầy cô: ẩn header chung, thanh mục lục là menu chính (khách 02/11) ===== */
.page-tri-an--landing :is(.header, .header-mobile, .m-drawer) { display: none !important; }
.page-tri-an--landing .ta-lnav { top: 0; z-index: 90; background: var(--white); border-bottom: 1px solid var(--line); }
.ta-lnav .wrap { display: flex; align-items: center; gap: 20px; overflow: visible; }
.ta-lnav__logo { flex: none; padding: 10px 0 !important; border: 0 !important; }
.ta-lnav__logo img { display: block; height: 38px; width: auto; }
.ta-lnav__links { display: flex; flex: 1; min-width: 0; justify-content: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.ta-lnav__links::-webkit-scrollbar { display: none; }
.ta-lnav__cta { flex: none; margin-left: 0 !important; }
.page-tri-an--landing [id] { scroll-margin-top: 80px; }
@media (max-width: 1100px) { .ta-lnav__links { justify-content: flex-start; } .ta-lnav .wrap { gap: 12px; } }
@media (max-width: 760px) {
  .ta-lnav .wrap { flex-wrap: wrap; gap: 0 10px; padding-top: 8px; }
  .ta-lnav__logo { order: 1; padding: 4px 0 !important; }
  .ta-lnav__logo img { height: 30px; }
  .ta-lnav__cta { order: 2; margin-left: auto !important; position: static; box-shadow: none; }
  .ta-lnav__links { order: 3; flex: 0 0 100%; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .page-tri-an--landing [id] { scroll-margin-top: 112px; }
}

/* =====================================================================
   BẢNG MÀU THỐNG NHẤT (khách 02/11: "mỗi chỗ mỗi màu, rối"): nền bảng đen giữ nguyên;
   chỉ dùng VÀNG, ĐỎ, NAVY brand và MỘT sắc trắng (#FFF). Bỏ kem, ngà, vàng nhạt, đỏ đậm, xám ngà.
   ===================================================================== */
.page-tri-an { --paper: #FFFFFF; --chalk: #FFFFFF; --chalk-soft: rgba(255, 255, 255, .72); --chalk-line: rgba(255, 255, 255, .3);
  --paper-line: rgba(22, 31, 61, .14); --red-700: var(--red); }
/* Mọi bề mặt sáng: trắng */
.ta-act--board :is( .ta-note, .ta-course, .ta-week, .ta-stats, .ta-review, .ta-write, .ta-mail::before), .slider--notes .slider__slide:nth-child(3n+2) .ta-note { background-color: #FFFFFF !important; border-color: transparent !important; }
.ta-slot--full, .ta-slot--none { background: #FFFFFF; }
/* Nhấn NAVY: nhãn nhỏ, liên kết phụ, chữ năm */
.ta-week__name, .ta-course__cat { color: var(--navy) !important; }
.ta-course__cat { background: var(--yellow); }
.ta-more, .ta-paper .ta-more, .ta-course .link-arrow { color: var(--navy) !important; text-decoration-color: var(--navy); }
.ta-act--board .ta-course .link-arrow { color: var(--navy) !important; }   /* số năm đỏ (khách 02/11) */
.ta-stats dd { color: var(--navy); }
.ta-act--board .ta-stats dd { color: var(--red) !important; }
/* Đỏ: một sắc duy nhất */
.ta-act mark { text-decoration-color: var(--yellow); }
.ta-mail__h span, .ta-paper__dear { color: inherit; }
.ta-mail__h span { color: var(--red); }
/* Chữ phấn trên bảng: trắng một sắc */
.ta-act--board :is(h2, .ta-sub h3), .ta-kv--board :is(.ta-kv__pre, .ta-kv__name) { color: #FFFFFF !important; }
/* Câu phương châm: giãn dòng (khách 02/11) vì Playwrite có nét lên xuống dài, dòng sát nhau bị chạm chữ */

/* Mục menu landing: cùng kiểu menu chính của web (theme.css .nav): viên thuốc, hover nền xám nhạt,
   mục đang xem viền đen + vệt vàng dưới; bỏ gạch chân của subnav */
.ta-lnav__links { align-items: center; gap: 4px; padding-block: 10px 12px; }
.ta-lnav__links a { display: inline-flex; align-items: center; min-height: 39px; padding: 0 14px !important; border: 1.5px solid transparent !important; border-radius: var(--r-pill);
  color: var(--gray); font-weight: 600; font-size: .95rem; white-space: nowrap; transition: color .2s, background .2s; }
.ta-lnav__links a:hover { color: var(--black); background: var(--smoke); }
.ta-lnav__links a.is-active { color: var(--black); font-weight: 700; background: none; border-color: var(--black) !important; box-shadow: 0 3px 0 var(--yellow); }
.ta-lnav__links a.is-active:hover { background: none; }
@media (max-width: 760px) { .ta-lnav__links { padding-block: 6px 10px; } .ta-lnav__links a { min-height: 34px; padding: 0 12px !important; font-size: .88rem; } }

/* chỉ ngắt ở dấu phẩy khi đủ rộng; điện thoại thì chữ Playwrite rộng tới mức một cụm ngắn cũng dài hơn màn hình → để tự ngắt */
@media (min-width: 641px) { .ta-ph { white-space: nowrap; } }
/* Hover thẻ trên bảng đen: lấp VÀNG thay vì đen (đen trùng nền bảng, khách 02/11); chữ đen trên vàng */
.page-tri-an--landing :is(.card, .honor-card, .testi-card, .ta-review, .ta-course) { --h-bg: var(--yellow); --h-border: var(--yellow); --h-fg: var(--black); --h-sub: rgba(9, 11, 12, .75); --h-accent: var(--red);
  --h-ic1: var(--black); --h-ic2: var(--red); --h-ic3: rgba(9, 11, 12, .12); }
.page-tri-an--landing .honor-card:hover [class*="__score"], .page-tri-an--landing .honor-card:hover .honor-card__score { color: var(--black) !important; }

/* =====================================================================
   BANNER CHỐT (khách 02/11, PA3 "Sổ lưu bút mở"): một cuốn sổ trắng kẻ dòng mở ra trên bảng,
   trang trái tên + thông tin, trang phải chân dung trên vòm navy. Gáy sổ là vạch giữa.
   ===================================================================== */
.ta-kv__sh { display: none; position: absolute; z-index: 0; pointer-events: none; }
.ta-kv--board .ta-kv__fig .ta-kv__person { position: relative; z-index: 2; }
.ta-kv--board .ta-kv__grid { position: relative; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--maxw) - 2 * var(--gutter)); margin: 44px auto; min-height: 0 !important; padding: 0;
  background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(22, 31, 61, .18) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(transparent 0 35px, rgba(70, 110, 160, .18) 35px 36px), #fff;
  border-radius: 10px; overflow: hidden; }
.ta-kv--board .ta-kv__text { padding: 48px 56px; }
.ta-kv--board :is(.ta-kv__pre, .ta-kv__name) { color: var(--black) !important; text-shadow: none; }
.ta-kv--board .ta-kv__name { text-decoration-color: var(--red); }
.ta-kv--board .ta-kv__media { align-self: stretch; }
.ta-kv--board .ta-kv__fig { align-self: end; }
.ta-kv--board .ta-kv__sh--a { display: block; left: -20%; right: -20%; top: 18%; bottom: 0; background: var(--navy); border-radius: 999px 999px 0 0; }
.ta-kv--board .ta-kv__person { max-height: clamp(400px, 34vw, 500px) !important; }
/* hai trang sổ bằng nhau, gáy sổ (vạch giữa) trùng ranh giới hai cột */
@media (min-width: 641px) { .ta-kv--board .ta-kv__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 0; } }
@media (min-width: 641px) and (max-width: 1100px) { .ta-kv--board .ta-kv__text { padding: 36px 32px; } .ta-kv--board .ta-kv__grid { align-items: stretch; } }
/* mobile: sổ gập lại thành một trang, bỏ gáy; chữ căn trái thẳng hàng với nhãn băng keo */
@media (max-width: 640px) {
  .ta-kv--board .ta-kv__grid { background: repeating-linear-gradient(transparent 0 35px, rgba(70, 110, 160, .18) 35px 36px), #fff; margin-block: 24px 32px; }
  .ta-kv--board .ta-kv__tab { margin-left: 14px; }
  .ta-kv--board h1 { align-self: stretch; padding-inline: 22px; text-align: left; }
}

/* =====================================================================
   BANNER TRANG TỔNG (02/11, cùng mood PA3 "Sổ lưu bút mở" của trang thầy cô): sổ trắng kẻ dòng mở trên bảng,
   trang trái tiêu đề, trang phải nhóm thầy cô đứng trước vòm navy. Vị trí từng người theo % nên co giãn đều.
   ===================================================================== */

/* Nội dung dài/ngắn khác nhau giữa các thầy cô (rà 17 trang, 02/11) */
.ta-kv__name--long { font-size: clamp(2.6rem, 5.4vw, 5rem) !important; }
@media (max-width: 640px) { .ta-kv--board .ta-kv__name--long { font-size: clamp(2.2rem, 11vw, 3rem) !important; } }
@media (max-width: 760px) { .ta-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Ít hơn 4 khoá học (đa số thầy cô): xếp giữa hàng thay vì dồn trái để trống 3/4 hàng; chỉ 1 khoá thì không cần dải vuốt */
@media (min-width: 1101px) { .ta-courses:not(:has(> :nth-child(4))) { display: flex; justify-content: center; } .ta-courses:not(:has(> :nth-child(4))) > * { width: calc(25% - 12px); } }
@media (max-width: 640px) { .ta-courses > :only-child { flex-basis: 100% !important; } }
@media (min-width: 641px) and (max-width: 1100px) { .ta-courses:not(:has(> :nth-child(3))) { justify-content: center; } }

/* =====================================================================
   BANNER THEO BRIEF (02/11): nhãn "Tri ân Nhà giáo Việt Nam 20/11", H1 "Tri ân {Cô}   {Tên}", tagline, 3 chip
   Môn dạy | Kinh nghiệm | Cơ sở, nút [Gửi lời tri ân] [Xem video]. Vòm sau chân dung VÀNG (khách đổi từ navy) { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.ta-kv__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ta-kv__cta .btn--ghost { border-color: var(--black); }
.ta-kv__cta .btn .ic:not(.ic--arrow) { width: 18px; height: 18px; }

/* vòm vàng thay navy (trang thầy cô + trang tổng) */
.ta-kv--board .ta-kv__sh--a { background: var(--yellow); }

/* hoạ tiết phượng, hướng dương quanh vòm */
.ta-kv__deco { position: absolute; z-index: 1; height: auto; pointer-events: none; }
.ta-kv--board .ta-kv__fig .ta-kv__deco { z-index: 3; }
.ta-kv__deco--branch { left: -34%; top: 14%; width: 52%; rotate: -8deg; }
.ta-kv__deco--petals { right: -26%; top: 4%; width: 30%; }
.ta-kv__deco--sun { right: -24%; bottom: 8%; width: 30%; rotate: 10deg; }
.ta-kv--board .ta-kv__fig .ta-kv__deco--branch, .ta-kv--board .ta-kv__fig .ta-kv__deco--petals { z-index: 1; }   /* cành, cánh hoa sau người; hướng dương trước */

/* mobile: tab, H1, chân dung, rồi tagline, chip, nút (trong cùng trang sổ) */
@media (max-width: 640px) {
  .ta-kv--board .ta-kv__cta { order: 6; padding: 0 22px 28px; margin-top: 22px; }
  .ta-kv--board .ta-kv__cta .btn { flex: 1 1 140px; justify-content: center; padding-inline: 14px; }
  .ta-kv--board .ta-kv__media { margin-top: 20px; }
  .ta-kv__deco--branch { left: -14%; width: 44%; }
  .ta-kv__deco--petals { right: -10%; }
  .ta-kv__deco--sun { right: -8%; width: 26%; }
}
/* chip banner viết tay nối nét Playwrite như câu châm ngôn (khách 02/11, mẫu "Tiếng Anh, HSA / 20+ năm đứng lớp") */

/* =====================================================================
   ĐỐI CHIẾU BRIEF (sheet "Mô tả landing page", 02/11)
   ===================================================================== */
/* 1.1 header: logo Pasal nhỏ cạnh logo GTL; điện thoại gom menu vào hamburger */
.ta-lnav__pasal { flex: none; height: 26px; width: auto; padding-left: 14px; border-left: 1px solid var(--line); }
.ta-lnav__burger { display: none; flex: none; width: 42px; height: 42px; padding: 11px 9px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--white); cursor: pointer; }
.ta-lnav__burger span { display: block; height: 2px; margin: 3px 0; border-radius: 2px; background: var(--black); transition: transform .25s, opacity .25s; }
.ta-lnav.is-open .ta-lnav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.ta-lnav.is-open .ta-lnav__burger span:nth-child(2) { opacity: 0; }
.ta-lnav.is-open .ta-lnav__burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 1100px) { .ta-lnav__pasal { display: none; } }
@media (max-width: 760px) {
  .ta-lnav .wrap { flex-wrap: nowrap; gap: 10px; padding-block: 8px; }
  .ta-lnav__logo { order: 1; }
  .ta-lnav__cta { order: 2; margin-left: auto !important; }
  .ta-lnav__burger { order: 3; display: block; }
  .ta-lnav__links { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 10px var(--gutter) 16px !important;
    background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(9, 11, 12, .18); }
  .ta-lnav.is-open .ta-lnav__links { display: flex; }
  .ta-lnav__links a { min-height: 46px; padding: 0 16px !important; font-size: 1rem; }
}

/* 2.3 bốn thẻ thông tin: 4 cột desktop → 2×2 mobile, icon vàng */
.ta-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: clamp(32px, 4vw, 48px) 0 0; }
.ta-info > div { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r); background: #fff; color: var(--black); }
.ta-info__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; background: var(--yellow); }
.ta-info__ic .ic { width: 22px; height: 22px; color: var(--black); }
.ta-info dt { order: 1; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.ta-info dd { order: 2; margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
@media (max-width: 760px) { .ta-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ta-info > div { padding: 16px 14px; } .ta-info dd { font-size: .95rem; } }

/* 2.4 câu nói tâm huyết: icon dấu ngoặc kép */

/* 2.2 nút Đọc thêm của phần giới thiệu trên bảng đen */

/* 5.4 cảm nhận được ghim */
.ta-review--pin { box-shadow: inset 0 0 0 2px var(--yellow); }
.ta-review__pin { align-self: flex-start; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: var(--yellow); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--black); }

/* điện thoại rất hẹp (320–400): logo, nút, hamburger vừa một hàng */
@media (max-width: 400px) {
  .ta-lnav .wrap { gap: 8px; }
  .ta-lnav__logo img { height: 26px; }
  .ta-lnav__cta { padding-inline: 12px !important; font-size: .82rem; }
  .ta-lnav__burger { width: 38px; height: 38px; padding: 9px 8px; }
}

/* Thư Ban Giám đốc: chữ ngồi đúng dòng kẻ trên mọi thiết bị (02/11). Một đơn vị --lh (px) cho dòng kẻ, mọi dòng chữ
   và chiều cao cắt khung; không margin lẻ bên trong khung (lệch vài px mỗi dòng sẽ cộng dồn); đoạn mới thụt đầu dòng.
   --base đẩy dòng kẻ xuống sát chân chữ Playwrite (chữ cao, chân nằm thấp trong hộp dòng) */
.ta-mail__clip { --lh: 36px; --base: 3px; margin-top: clamp(20px, 2.5vw, 28px); line-height: var(--lh);
  max-height: calc(var(--lines) * var(--lh));
  background: repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px), rgba(70, 110, 160, .07) calc(var(--lh) - 1px) var(--lh)) 0 var(--base) / 100% var(--lh) repeat-y; }
.ta-mail__clip :is(.ta-mail__greet, .ta-mail__body, .ta-mail__body p) { margin: 0 !important; line-height: var(--lh) !important; }
.ta-mail__greet { font-size: 1.12rem !important; }
.ta-mail__body p { font-size: 1.04rem !important; }
.ta-mail__body p + p { text-indent: 2em; }
@media (max-width: 1024px) { .ta-mail__clip { --lh: 34px; } }
@media (max-width: 640px) {
  .ta-mail__clip { --lh: 30px; --base: 2px; }
  .ta-mail__greet { font-size: .98rem !important; }
  .ta-mail__body p { font-size: .9rem !important; }
}
/* ảnh phần giới thiệu đứng thẳng (khách 02/11) */

/* icon trên câu châm ngôn: phần đen đổi trắng cho nổi trên bảng (khách 02/11) */

/* đoạn mô tả rộng hơn, không để một chữ lẻ rớt dòng cuối (khách 02/11) */
.ta-act__head { max-width: min(100%, 1000px); }
.ta-act__head .lead, .ta-sub p { max-width: 78ch !important; text-wrap: pretty; }
/* thông tin nhanh trên banner: chữ viết tay trơn, mỗi ý một dòng, không khung không icon (khách 02/11) */

/* Tương phản (rà tự động 02/11, tools/audit-contrast.js): tiêu đề trắng phấn chỉ dành cho chữ nằm thẳng trên bảng;
   tiêu đề nằm trên bề mặt sáng (dải Pasal, thư, form, thẻ) luôn đen */
.ta-act--board :is( .ta-mail, .ta-write .form-card, .card, .ta-info > div, .ta-course, .ta-cta) :is(h2, h3, h4) { color: var(--black) !important; text-shadow: none; }
.ta-slot--none { color: rgba(9, 11, 12, .6); }
/* rê chuột lên thẻ (lấp vàng): mọi số / điểm nhấn vốn màu vàng đổi đen, không chìm vào nền (khách 02/11) */
.page-tri-an--landing :is(.card, .honor-card, .testi-card, .ta-review, .ta-course):hover :is(.teacher-card__stats dd, .teacher-card__stats dd span, .honor-card__score, [class*="__score"]) { color: var(--black) !important; }

/* =====================================================================
   BANNER TRANG TỔNG — thiết kế lại 02/11: một trang lưu bút trắng trải ngang, canh giữa; "Cảm ơn thầy cô" viết tay;
   2 nút (khách bỏ hàng ảnh thầy cô cùng ngày).
   ===================================================================== */
.ta-kv--cover { background: none; }
.ta-cover { position: relative; overflow: hidden; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--maxw) - 2 * var(--gutter)); margin: 40px auto 44px; border-radius: 10px;
  background: repeating-linear-gradient(transparent 0 35px, rgba(70, 110, 160, .14) 35px 36px), #fff; text-align: center; }
.ta-cover__text { position: relative; z-index: 12; padding: clamp(40px, 5vw, 64px) 24px 0; }
.ta-cover h1 { margin-top: 22px; }
.ta-cover__pre { display: block; font-size: clamp(1.15rem, 1.8vw, 1.6rem); font-weight: 600; letter-spacing: -.01em; color: var(--black); }
.ta-cover__name { display: inline-block; margin-top: 6px; padding-bottom: .12em; font-family: var(--hand); font-weight: 400; font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: 1.35; letter-spacing: 0; color: var(--black);
  background: linear-gradient(var(--red), var(--red)) left bottom / 100% .09em no-repeat; }
.ta-cover__lead { max-width: 60ch; margin: 18px auto 0; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; color: rgba(9, 11, 12, .72); text-wrap: pretty; }
.ta-cover__cta { justify-content: center; margin-top: 26px; }
@media (max-width: 760px) {
  .ta-cover { margin-block: 24px 32px; }
  .ta-cover__text { padding-inline: 18px; }
  .ta-cover__cta .btn { flex: 1 1 100%; justify-content: center; }
}
/* banner trang tổng: chữ lớn bớt */
.ta-cover__text { padding-top: clamp(36px, 4vw, 52px); }
.ta-cover__name { font-size: clamp(2.6rem, 5.6vw, 5.2rem); }

/* Thanh lọc thầy cô gọn một hàng (khách 02/11): tab môn trái, ô cơ sở + tìm kiếm nhỏ phải, chung một đường kẻ.
   Tab thiếu chỗ thì cuộn ngang thay vì đẩy ô lọc xuống dòng */
#doi-ngu .tabrow { flex-wrap: nowrap; align-items: center; gap: 16px; }
#doi-ngu .tabrow .filter-bar--tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
#doi-ngu .tabrow .filter-bar--tabs::-webkit-scrollbar { display: none; }
#doi-ngu .tabrow .filter-chip { flex: none; padding-inline: 12px; }
#doi-ngu .ta-finder { flex: none; gap: 8px; margin: 0 !important; }
#doi-ngu .ta-campus { flex: 0 0 160px; }
#doi-ngu .ta-finder .ta-search { flex: 0 0 200px; }
#doi-ngu .ta-finder :is(.select__trigger, input) { height: 42px; min-height: 0; padding-block: 0; font-size: .9rem; border-radius: 999px; }
#doi-ngu .ta-finder .select__trigger { padding-inline: 16px 12px; }
#doi-ngu .ta-finder .ta-search input { padding-left: 38px; }
@media (max-width: 1024px) {
  #doi-ngu .tabrow { flex-wrap: wrap; gap: 0; }
  #doi-ngu .tabrow .filter-bar--tabs { flex: 0 0 100%; }
  #doi-ngu .ta-finder { flex: 0 0 100%; padding-block: 10px 12px; }
  #doi-ngu .ta-campus { flex: 0 0 44%; }
  #doi-ngu .ta-finder .ta-search { flex: 1 1 auto; min-width: 0; }
}
/* banner trang tổng chỉ còn chữ (khách bỏ hàng ảnh 02/11): đệm dưới cân với đệm trên */
.ta-cover__text { padding-bottom: clamp(44px, 5vw, 68px); }
/* banner thầy cô: hướng dương lên góc trên, cánh phượng xuống góc dưới (khách đổi chỗ 02/11) */
.ta-kv--board .ta-kv__deco--sun { top: 4%; bottom: auto; }
.ta-kv--board .ta-kv__deco--petals { top: auto; bottom: 8%; }

/* Nhãn section / banner: kiểu viên thuốc như mục menu đang chọn (khách 02/11), thay băng keo vàng.
   Nền trắng để đọc được cả trên bảng đen lẫn trang giấy trắng */
.ta-page__tab { display: inline-flex; align-items: center; min-height: 39px; margin: 0 0 20px; padding: 0 16px;
  background: #fff; border: 1.5px solid var(--black); border-radius: var(--r-pill); box-shadow: 0 3px 0 var(--yellow);
  font-size: .95rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--black); transform: none; rotate: 0deg; }
.ta-kv__tab { margin-left: 0 !important; }
@media (max-width: 760px) { .ta-page__tab { min-height: 34px; padding: 0 13px; font-size: .88rem; } }
/* thông tin nhanh trên banner: icon tròn vàng + chữ thường IN HOA, mỗi ý một dòng, không khung (khách 02/11, thay chữ viết tay) */

/* Icon nhiều màu: site đặt --ic-* thẳng trên <use>, nên màu riêng phải đặt ở use[href] mới ăn (02/11) */

/* icon dòng thông tin banner: bỏ khung/đệm của kiểu chip cũ, icon nằm gọn trong vòng tròn vàng */

/* nhãn viên thuốc không bóng vàng (khách 02/11) */
.ta-page__tab { box-shadow: none; }

/* =====================================================================
   BANNER: CHỮ NGỒI ĐÚNG DÒNG KẺ TRÊN MỌI THIẾT BỊ (khách 02/11)
   Một đơn vị --lh cho dòng kẻ và mọi khối bên trang chữ: đệm, nhãn, tiêu đề, dòng thông tin, nút đều cao/cách nhau
   đúng bội số --lh, nên không khối nào lệch khỏi vạch. Trên điện thoại ảnh chân dung chen giữa → ảnh cũng cao 12×--lh.
   ===================================================================== */
.ta-kv--board .ta-kv__grid, .ta-cover { --lh: 36px; }
@media (max-width: 640px) { .ta-kv--board .ta-kv__grid, .ta-cover { --lh: 32px; } }
.ta-kv--board .ta-kv__grid {
  background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(22, 31, 61, .18) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px), rgba(70, 110, 160, .18) calc(var(--lh) - 1px) var(--lh)), #fff; }
.ta-kv--board .ta-kv__text { align-self: start; padding: calc(var(--lh) * 2) 56px var(--lh) !important; }
.ta-kv--board .ta-kv__tab { height: var(--lh); min-height: 0; margin: 0 0 var(--lh) !important; box-sizing: border-box; }
.ta-kv--board h1 { margin: 0 !important; padding-inline: 0; }
.ta-kv--board .ta-kv__pre { line-height: var(--lh); }
.ta-kv--board .ta-kv__name { line-height: calc(var(--lh) * 3); text-underline-offset: .12em; }
.ta-kv--board .ta-kv__name--long { line-height: calc(var(--lh) * 2); }
.ta-kv--board .ta-kv__cta { margin-top: var(--lh); gap: 0 12px; }
.ta-kv--board .ta-kv__cta .btn { height: calc(var(--lh) * 1.5); min-height: 0; padding-block: 0; margin-block: calc(var(--lh) * .25); }
@media (min-width: 641px) and (max-width: 1100px) {
  .ta-kv--board .ta-kv__text { padding-inline: 32px !important; }
  .ta-kv--board .ta-kv__name { line-height: calc(var(--lh) * 2); }
}
@media (max-width: 640px) {
  .ta-kv--board .ta-kv__grid { padding-top: var(--lh); background: repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px), rgba(70, 110, 160, .18) calc(var(--lh) - 1px) var(--lh)), #fff; }
  .ta-kv--board .ta-kv__text { padding: 0 !important; }
  .ta-kv--board .ta-kv__tab { margin: 0 0 var(--lh) 22px !important; align-self: flex-start; }
  .ta-kv--board h1 { padding-inline: 22px; }
  .ta-kv--board .ta-kv__name { line-height: calc(var(--lh) * 2); }
  .ta-kv--board .ta-kv__media { height: calc(var(--lh) * 12); min-height: 0; margin: var(--lh) 0 0 !important; padding: 0 !important; overflow: hidden; }
  .ta-kv--board .ta-kv__cta { margin: var(--lh) 0 0 !important; padding: 0 22px !important; }
  .ta-kv--board .ta-kv__cta .btn { flex: 1 1 140px; }
  .ta-kv--board .ta-kv__cta::after { content: ""; flex: 0 0 100%; height: var(--lh); }
}
/* tên dài 2 dòng: chữ nhỏ hơn khoảng dòng 2×--lh để dấu không chạm nhau */
.ta-kv--board .ta-kv__name--long { font-size: clamp(2.4rem, 4.4vw, 4rem) !important; }
@media (max-width: 640px) { .ta-kv--board .ta-kv__name--long { font-size: clamp(2rem, 10vw, 2.6rem) !important; line-height: calc(var(--lh) * 1.5); } }

/* banner trang tổng: cùng cách khoá dòng */
.ta-cover { background: repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px), rgba(70, 110, 160, .14) calc(var(--lh) - 1px) var(--lh)), #fff; }
.ta-cover__text { padding: calc(var(--lh) * 2) 24px calc(var(--lh) * 2) !important; }
.ta-cover .ta-kv__tab { height: var(--lh); min-height: 0; margin: 0 0 var(--lh) !important; box-sizing: border-box; }
.ta-cover h1 { margin: 0 !important; }
.ta-cover__pre { line-height: var(--lh); }
.ta-cover__name { margin: 0 !important; padding: 0 !important; line-height: calc(var(--lh) * 3); background-size: 100% 4px; background-position: left calc(100% - 2px); }
.ta-cover__lead { margin: var(--lh) auto 0 !important; line-height: var(--lh); }
.ta-cover__cta { margin-top: var(--lh) !important; gap: 0 12px; }
.ta-cover__cta .btn { height: calc(var(--lh) * 1.5); min-height: 0; padding-block: 0; margin-block: calc(var(--lh) * .25); }
@media (max-width: 760px) { .ta-cover__name { line-height: calc(var(--lh) * 2); } .ta-cover__lead { line-height: var(--lh); font-size: .95rem; } }
/* nhãn inline-flex nằm trong dòng chữ bị canh theo chân chữ, đẩy xuống ~10px ở màn hẹp → canh đỉnh */
.ta-page__tab { vertical-align: top; }
/* rà 17 trang 02/11: tên dài trên điện thoại chiếm đúng 2 dòng kẻ/dòng (1,5 làm lệch nửa dòng mọi thứ bên dưới) */
@media (max-width: 640px) { .ta-kv--board .ta-kv__name--long { line-height: calc(var(--lh) * 2); } }
/* điện thoại rất hẹp: decor góc của section đầu nhỏ lại, nép sát mép, không chạm tiêu đề */
@media (max-width: 400px) { .ta-journey > .ta-act--board:first-child :is(.ta-deco--corner, .ta-deco--corner-l) { width: 60px; top: 6px; right: 6px; } }
/* nhãn viên thuốc nền vàng (khách 02/11) */
.ta-page__tab { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
/* tiêu đề "Bạn muốn gửi lời cảm ơn tới thầy cô nào?" nhỏ lại (khách 02/11) */
#gui-tri-an .ta-act__head h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }

/* 2 hình phấn nhỏ ở lề trái/phải lưới thầy cô trang tổng (khách khoanh chỗ 02/11): trái cao ~35%, phải thấp ~70% section;
   cách mép nội dung 24px, chỉ hiện khi lề đủ rộng (≥1600px), không bao giờ chạm thẻ */
.ta-act--board > .ta-chalk.ta-side { --edge: calc((100% - min(100%, var(--maxw))) / 2 + var(--gutter)); position: absolute; display: none;
  width: 64px !important; height: auto !important; z-index: 1; opacity: .9; transform: none; }
.ta-act--board > .ta-chalk.ta-side--l { top: 35%; left: calc(var(--edge) - 88px); rotate: -8deg; }
.ta-act--board > .ta-chalk.ta-side--r { top: 70%; right: calc(var(--edge) - 88px); left: auto; rotate: 8deg; }
@media (min-width: 1620px) { .ta-act--board > .ta-chalk.ta-side { display: block; } }

/* Hình nhỏ ghim ở lề (PIN trong tri-an.mjs, chỗ khách khoanh 02/11) */
.ta-pin { position: relative; height: 0; display: none; }
.ta-pin > .ta-chalk { position: absolute; top: var(--y, 0px); bottom: auto; width: 64px !important; height: auto !important; max-width: none; opacity: .9; transform: none; z-index: 1; }
.ta-pin--l > .ta-chalk { left: -88px; right: auto; rotate: -8deg; }
.ta-pin--r > .ta-chalk { right: -88px; left: auto; rotate: 8deg; }
@media (min-width: 1620px) { .ta-pin { display: block; } }
/* hình góc khách chỉ định bên (đổi chỗ 02/11): luôn hiện, bỏ qua luật ẩn xen kẽ */
.ta-journey > .ta-act--board .ta-deco--keep { display: block !important; }
/* mũ tốt nghiệp ở phần Thành tích: to hơn, dịch phải một chút (khách 02/11) */
#thanh-tich > .ta-deco--keep { width: clamp(120px, 11vw, 190px); left: clamp(32px, 7vw, 140px); }
@media (max-width: 760px) { #thanh-tich > .ta-deco--keep { width: 92px; left: 24px; } }

/* CÂN ĐỐI DECOR (khách 02/11): mọi hình phấn đều nghiêng; hình góc nhỏ lại, hình nhỏ ở lề to lên → chênh lệch ít */
.ta-act--board > .ta-chalk.ta-deco--corner { width: clamp(104px, 8.5vw, 140px); rotate: 8deg; }
.ta-act--board > .ta-chalk.ta-deco--corner-l { width: clamp(100px, 8vw, 132px); rotate: -8deg; }
.ta-act--board > .ta-chalk.ta-deco--corner.ta-deco--corner-sm { width: clamp(92px, 7vw, 118px); rotate: 10deg; }
#thanh-tich > .ta-deco--keep { width: clamp(108px, 8.5vw, 140px); left: clamp(32px, 6vw, 120px); rotate: -8deg; }
@media (max-width: 760px) { .ta-act--board > .ta-chalk:is(.ta-deco--corner, .ta-deco--corner-l), #thanh-tich > .ta-deco--keep { width: 80px; } }
.ta-pin > .ta-chalk { width: 84px !important; }
.ta-pin--l > .ta-chalk { left: -104px; rotate: -10deg; }
.ta-pin--r > .ta-chalk { right: -104px; rotate: 10deg; }
.ta-pin { display: none; } @media (min-width: 1640px) { .ta-pin { display: block; } }
.ta-act--board > .ta-chalk.ta-side { width: 84px !important; }
.ta-act--board > .ta-chalk.ta-side--l { left: calc(var(--edge) - 104px); rotate: -10deg; }
.ta-act--board > .ta-chalk.ta-side--r { right: calc(var(--edge) - 104px); rotate: 10deg; }
.ta-act--board > .ta-chalk.ta-side { display: none; } @media (min-width: 1640px) { .ta-act--board > .ta-chalk.ta-side { display: block; } }
/* chênh lệch to/nhỏ ít hơn nữa: hình góc ~120px, hình lề ~90px */
.ta-act--board > .ta-chalk.ta-deco--corner { width: clamp(96px, 7vw, 120px); }
.ta-act--board > .ta-chalk.ta-deco--corner-l { width: clamp(92px, 6.8vw, 116px); }
.ta-act--board > .ta-chalk.ta-deco--corner.ta-deco--corner-sm { width: clamp(88px, 6.2vw, 106px); }
#thanh-tich > .ta-deco--keep { width: clamp(96px, 7vw, 120px); }
.ta-pin > .ta-chalk, .ta-act--board > .ta-chalk.ta-side { width: 90px !important; }
.ta-pin--l > .ta-chalk { left: -110px; } .ta-pin--r > .ta-chalk { right: -110px; }
.ta-act--board > .ta-chalk.ta-side--l { left: calc(var(--edge) - 110px); } .ta-act--board > .ta-chalk.ta-side--r { right: calc(var(--edge) - 110px); }
.ta-pin, .ta-act--board > .ta-chalk.ta-side { display: none; }
@media (min-width: 1660px) { .ta-pin, .ta-act--board > .ta-chalk.ta-side { display: block; } }
@media (max-width: 760px) {
  .ta-act--board > .ta-chalk:is(.ta-deco--corner, .ta-deco--corner-l), .ta-act--board > .ta-chalk.ta-deco--corner.ta-deco--corner-sm, #thanh-tich > .ta-deco--keep { width: 72px; }
}
/* nút "Gửi lời tri ân" trên menu: script menu neo gắn is-active khi cuộn tới form → giữ nguyên nền đỏ chữ trắng (khách 02/11) */
.ta-lnav .ta-lnav__cta, .ta-lnav .ta-lnav__cta.is-active, .ta-lnav .ta-lnav__cta:hover { background: var(--red); color: #fff !important; border-color: var(--red) !important; box-shadow: none; }

/* =====================================================================
   FEEDBACK KHÁCH 03/11 — trang thầy cô
   ===================================================================== */
/* decor góc trang thầy cô: section đầu (Thành tích, mũ) bên trái, sau đó xen kẽ phải / trái */
.ta-journey:has(> #thanh-tich) > .ta-act--board:nth-child(odd) .ta-deco--corner { display: none; }
.ta-journey:has(> #thanh-tich) > .ta-act--board:nth-child(odd) .ta-deco--corner-l,
.ta-journey:has(> #thanh-tich) > .ta-act--board:nth-child(even) .ta-deco--corner { display: block; }
.ta-journey:has(> #thanh-tich) > .ta-act--board:nth-child(even) .ta-deco--corner-l { display: none; }

/* #2 banner = hồ sơ: trái tên + "Về cô", phải ảnh, chân 4 thẻ thông tin. Chữ giới thiệu ngồi trên dòng kẻ (--lh) */
.ta-kv--board .ta-kv__media { align-self: end; }
.ta-kv--board .ta-kv__foot { grid-column: 1 / -1; position: relative; z-index: 2; margin: 0; padding: var(--lh) 56px calc(var(--lh) * 1.5); background: #fff;
  border-top: 1.5px solid rgba(22, 31, 61, .12); }
.ta-kv--board .ta-kv__foot > div { border: 1.5px solid rgba(22, 31, 61, .12); box-shadow: none; }
@media (min-width: 641px) and (max-width: 1100px) { .ta-kv--board .ta-kv__foot { padding-inline: 32px; } }
@media (max-width: 640px) {
  .ta-kv--board .ta-kv__foot { order: 7; padding: var(--lh) 22px; }
}
/* hết section chia cột: bỏ tiêu đề dính */
/* banner hồ sơ gọn hơn: dòng kẻ 30px, đoạn mới thụt đầu dòng thay vì cách 1 dòng trống */
@media (min-width: 641px) { .ta-kv--board .ta-kv__grid { --lh: 30px; } .ta-kv--board .ta-kv__name { line-height: calc(var(--lh) * 4); } .ta-kv--board .ta-kv__name--long { line-height: calc(var(--lh) * 3); } }
@media (min-width: 641px) and (max-width: 1100px) { .ta-kv--board .ta-kv__name { line-height: calc(var(--lh) * 3); } }

/* #1 banner trang tổng tự đổi nội dung (tri-an.js bindCoverRotate): 3 slide chồng trong cùng ô lưới, mờ dần qua lại */
.ta-cover[data-cover-rotate] { display: grid; }
.ta-cover__slide { grid-area: 1 / 1; align-self: start; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
.ta-cover__slide.is-on { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.ta-cover__slide:not(.ta-cover__text) { padding: calc(var(--lh) * 2) clamp(18px, 4vw, 56px) calc(var(--lh) * 2.5); }
.ta-cover__dots { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: flex; gap: 8px; z-index: 5; }
.ta-cover__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(9, 11, 12, .22); cursor: pointer; transition: width .3s, background .3s; }
.ta-cover__dots button.is-on { width: 28px; background: var(--red); }

/* #11 (mobile) danh sách chọn thầy cô bị chữ tiêu đề đè: phần nội dung của section chia cột nằm trên tiêu đề */
.ta-act__grid > .ta-act__body { position: relative; z-index: 6; }
.select.is-open, .select:has(.select__trigger[aria-expanded="true"]) { z-index: 30; }
@media (max-width: 400px) { .ta-act--board > .ta-chalk:is(.ta-deco--corner, .ta-deco--corner-l), .ta-act--board > .ta-chalk.ta-deco--corner.ta-deco--corner-sm, #thanh-tich > .ta-deco--keep { width: 58px; } }
/* "Về cô" trên banner dài quá (khách 03/11): chỉ hiện 6 dòng kẻ, phần còn lại mờ dần + "Đọc tiếp" mở hộp đọc trọn */

/* Nền bảng đen đứng yên, nội dung trượt trên nó (khách 03/11). Dùng lớp position: fixed thay vì background-attachment: fixed
   vì Safari iOS bỏ qua attachment fixed */
.page-tri-an main:is(:has(.ta-kv--board), :has(.ta-act--board)) { background: none; position: relative; isolation: isolate; }
.page-tri-an main:is(:has(.ta-kv--board), :has(.ta-act--board))::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--board-bg); background-color: var(--board); pointer-events: none; }
/* chân banner: bỏ viền trên (đè sát dòng kẻ cuối của trang sổ thành 2 vạch, khách 03/11) */
.ta-kv--board .ta-kv__foot { border-top: 0; }
/* main có position nên lớp nền cố định của nó che mất footer (footer không có position) → đưa footer lên trên */
.page-tri-an main:is(:has(.ta-kv--board), :has(.ta-act--board)) ~ :is(footer, .footer) { position: relative; z-index: 1; }

/* Lenis cuộn mượt: tắt scroll-behavior gốc để không chồng 2 lớp mượt; vùng cuộn riêng (danh sách chọn, hộp đọc) cuộn gốc */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
/* lớp nền bảng cố định lên lớp GPU riêng → không vẽ lại khi cuộn */
.page-tri-an main:is(:has(.ta-kv--board), :has(.ta-act--board))::before { will-change: transform; transform: translateZ(0); }

/* Rà theo luật MONA (03/11): tiêu đề có dấu tiếng Việt chồng cần line-height ≥ 1.2 để không cắt dấu / chân chữ */
.page-tri-an :is(main h2, main h3, .ta-act__head h2, .ta-mail__h, .ta-write__h) { line-height: 1.2; }
.page-tri-an .ta-kv h1, .page-tri-an .ta-cover h1 { line-height: 1.2; }

/* Thanh cuộn trang tri ân: con trượt vàng trên rãnh đen bảng.
   Chrome/Safari dùng ::-webkit-scrollbar (khai báo scrollbar-color làm Chrome 121+ bỏ pseudo, về thanh overlay tự ẩn),
   thuộc tính chuẩn chỉ cấp cho Firefox — cùng cách với .campus__list trong common.css */
@supports not selector(::-webkit-scrollbar) {
  html:has(> body.page-tri-an) { scrollbar-color: var(--yellow) #17191A; }
}
html:has(> body.page-tri-an)::-webkit-scrollbar { width: 10px; height: 10px; }
html:has(> body.page-tri-an)::-webkit-scrollbar-track { background: #17191A; }
html:has(> body.page-tri-an)::-webkit-scrollbar-thumb { background: var(--yellow); border-radius: 10px; border: 2px solid #17191A; }

/* Nội dung theo brief trang tri ân */

.ta-letter-logo { display:block; width:95px; height:auto; margin:0 0 14px; }
.ta-act--board .ta-paper { height:auto; min-height:0; aspect-ratio:auto; }
.ta-act--board .ta-paper__body { min-height:0; max-height:none; }
/* Feedback mobile: đọc hết nội dung trong hộp thư và giữ độ tương phản ô chọn. */
.ta-read__body .ta-mail__clip { max-height:none; overflow:visible; -webkit-mask-image:none; mask-image:none; }
.ta-read { overflow-y:auto; }
.ta-pick select, .ta-pick option { color:#090b0c; background-color:#fff; }
.ta-pick .select__trigger, .ta-pick .select__option { color:#090b0c; }
.ta-pick .select__list { background:#fff; }

/* Thu gọn banner trang tổng. */
.ta-cover__text { padding:var(--lh) 24px !important; }
.ta-cover .ta-kv__tab { margin-bottom:calc(var(--lh) * .5) !important; }
.ta-cover__name { line-height:calc(var(--lh) * 2.5); }
.ta-cover__lead { margin-top:calc(var(--lh) * .5) !important; line-height:1.6; }
.ta-cover__cta { margin-top:calc(var(--lh) * .5) !important; }
@media(max-width:760px) { .ta-cover__text { padding:var(--lh) 18px !important; } .ta-cover__name { line-height:1.3; } }

/* ---- Feedback 06/11 ---- */
@media (max-width: 640px) {
  /* Ảnh thầy cô trên điện thoại: lùi sang trái, không để khoảng trắng lớn bên trái */
}

/* Banner: 2–3 dòng mô tả ngắn (khách 06/11), phần đầy đủ ở section Giới thiệu */
.ta-kv--board .ta-kv__lead { margin: var(--lh) 0 0; max-width: 64ch; font-size: .98rem; line-height: var(--lh); color: rgba(9, 11, 12, .82); }
@media (max-width: 640px) { .ta-kv--board .ta-kv__lead { order: 4; padding-inline: 22px; font-size: .9rem; } }

/* Giới thiệu thầy cô: hàng chữ–ảnh, ảnh–chữ xen kẽ, chữ–chữ khi không có ảnh. Chữ phấn viết thẳng lên bảng, không khung (khách 06/11) */
.ta-about { display: grid; gap: clamp(28px, 4vw, 56px); margin-top: clamp(32px, 4vw, 48px); text-align: left; }
.ta-about__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
.ta-about__row--flip .ta-about__fig { order: -1; }
.ta-about__row--text { align-items: start; }
.ta-about__row--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
.ta-about__text { color: var(--chalk); }
.ta-about__text h3 { color: var(--white); font-size: clamp(1.25rem, 2vw, 1.6rem); }
.ta-about__text h3::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 12px; border-radius: 2px; background: var(--yellow); }
.ta-about__text p { margin-top: 16px; font-size: 1rem; line-height: 1.8; color: var(--chalk-soft); }
.ta-about__list { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.ta-about__list li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; line-height: 1.6; color: var(--chalk-soft); }
.ta-about__list b { color: var(--yellow); }
.ta-about__quote { margin: 20px 0 0; padding: 18px 20px; border-left: 4px solid var(--red); background: rgba(255, 255, 255, .06); color: var(--white); font-size: 1.1rem; font-weight: 600; font-style: italic; line-height: 1.5; }
.ta-about__fig { margin: 0; }
.ta-about__fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg, 20px); }
@media (max-width: 860px) {
  .ta-about__row, .ta-about__row--solo { grid-template-columns: 1fr; }
  .ta-about__row .ta-about__fig { order: -1; }   /* điện thoại: ảnh luôn trên chữ */
}
/* Menu 8 mục: canh giữa "an toàn" để khi tràn không bị cắt mục đầu sau logo; màn vừa thì thu khoảng đệm */
.ta-lnav__links { justify-content: safe center; }
@media (max-width: 1440px) { .ta-lnav__links a { padding: 0 8px !important; font-size: .9rem; } }

/* Đợt 06/11 (2): thẻ thông tin dưới tiêu đề "Về cô", banner gọn, tab sát tiêu đề, lời chúc sát tiêu đề */
.ta-about__facts { margin-top: clamp(24px, 3vw, 36px); text-align: left; }
.ta-about__facts > div { background: var(--white); color: var(--black); }
.ta-act--center .ta-tabs { margin-top: 12px; }
#cam-nhan .ta-act__head + .ta-part, #cam-nhan .ta-part { margin-top: 0; }
#loi-chuc .ta-part--first { margin-top: clamp(20px, 2.5vw, 32px); }
.ta-kv--board .ta-kv__grid { margin-block: 28px; }
@media (min-width: 641px) { .ta-kv--board .ta-kv__text { padding-block: 28px; } }
/* 2 nút banner: cùng chiều cao, cùng viền, không lệch dọc */
.ta-kv--board .ta-kv__cta { align-items: center; }
.ta-kv--board .ta-kv__cta .btn { box-sizing: border-box; height: 48px; margin: 0; padding-block: 0; border: 1.5px solid transparent; line-height: 1; vertical-align: top; }
.ta-kv--board .ta-kv__cta .btn--ghost { border-color: var(--black); }
.ta-kv--board .ta-kv__cta .btn:hover, .ta-kv--board .ta-kv__cta .btn:active { transform: none; }
.ta-kv--board .ta-kv__cta { padding-block: calc((var(--lh) * 2 - 48px) / 2); }
/* Mô tả banner tối đa 3 dòng */
.ta-kv--board .ta-kv__lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* Phụ đề ảnh (khách 06/11): chữ nhỏ, tắt được bằng event.captions = false */
.ta-cap { margin-top: 8px; font-size: .78rem; line-height: 1.4; color: var(--chalk-soft); text-align: center; }
.ta-cap--over { position: absolute; inset: auto 0 0 0; margin: 0; padding: 22px 10px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); color: var(--white); text-align: left; pointer-events: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (max-width: 640px) { .ta-kv--board .ta-kv__cta { row-gap: 10px; } }
/* Banner trang tổng: tách dòng dẫn, chữ viết tay, gạch đỏ và lời dẫn (chữ viết tay có nét "y", "h" dài) */
.ta-cover__pre { margin-bottom: 10px; }
.ta-cover__name { line-height: 1.35 !important; padding-bottom: .1em !important; background-size: 100% 7px !important; background-position: left 100% !important; }
.ta-cover__lead { margin-top: 22px !important; }
@media (max-width: 760px) { .ta-cover__pre { margin-bottom: 6px; } .ta-cover__name { line-height: 1.4 !important; } .ta-cover__lead { margin-top: 16px !important; } }
/* Tên dài 2 dòng: giữ 2 dòng sát nhau ở mọi khổ (trước đó giãn 3 dòng kẻ ở tablet) */
@media (min-width: 641px) { .ta-kv--board .ta-kv__name--long { line-height: calc(var(--lh) * 2.2) !important; } }
/* Thẻ thông tin: tablet 2 cột cho đủ chỗ chữ */
@media (max-width: 1024px) { .ta-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Responsive đợt 06/11 (3) ---- */
/* Header mobile: nút menu tròn đủ viền, 3 vạch canh giữa */
.ta-lnav__burger { flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 0 !important; border-width: 1.5px; }
.ta-lnav__burger span { width: 18px; margin: 0; }
@media (max-width: 1100px) { .ta-lnav__burger { display: flex; } }
@media (max-width: 400px) { .ta-lnav .wrap { padding-inline: 14px; } .ta-lnav__cta { padding-inline: 12px !important; } }
/* Ghim nút đóng của hộp đọc và lightbox khi cuộn nội dung dài */
.ta-read__close { position: sticky; top: 0; z-index: 2; float: right; margin: -24px -12px 0 0; background: var(--paper, #fff); box-shadow: 0 0 0 6px var(--paper, #fff); }
.ta-lightbox__close { position: fixed; z-index: 3; }
/* Banner mobile: ảnh canh giữa, không cắt; chừa khoảng dưới 2 nút */
@media (max-width: 640px) {
  .ta-kv--board .ta-kv__media { align-self: center; justify-content: center; width: 100%; }
  .ta-kv--board .ta-kv__fig { margin-inline: auto; }
  .ta-kv--board .ta-kv__cta::after { height: calc(var(--lh) * 1.5); }
}
/* Thư học trò: desktop luôn 2 lá cạnh nhau (khách 06/11), tablet và điện thoại 1 lá */
.slider--letters { --per: 2 !important; }
@media (max-width: 1024px) { .slider--letters { --per: 1 !important; } #thu-hoc-tro { max-width: 1040px; margin-inline: auto; } }
/* Video mobile: 2 mục nằm ngang, ảnh trên chữ dưới, chữ nhỏ */
@media (max-width: 640px) {
  .ta-act--center .ta-video__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ta-vitem { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; }
  .ta-vitem__thumb { width: 100%; }
  .ta-vitem b { font-size: .8rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .ta-vitem small { font-size: .72rem; }
}
/* Bóng trắng của nút trong subnav chung (dùng để che chữ cuộn) đè lên nút menu tròn: tắt trên thanh tri ân */
.page-tri-an .ta-lnav .btn.ta-lnav__cta { box-shadow: none !important; position: static !important; }
@media (max-width: 640px) { .ta-kv--board .ta-kv__person { max-height: 340px !important; } }
@media (max-width: 640px) { .ta-kv--board .ta-kv__media { height: auto !important; } }
.ta-kv--board .ta-kv__cta { display: flex !important; flex-wrap: wrap; gap: 10px 12px !important; }
/* Thẻ thầy cô mobile (trang tổng): khung ảnh dọc, giữ trọn đầu (common.css đổi sang 5:4 ở ≤560px làm cắt đầu) */
@media (max-width: 560px) {
  .ta-team .teacher-card [class*="teacher-card__media--"] img { object-position: center top; }
}
/* "Cảm ơn thầy cô" xuống 2 dòng: gạch đỏ chạy theo từng dòng chữ, không kéo hết bề ngang khung */
.ta-cover__name { display: inline !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ta-cover h1 { display: block; }
.ta-cover__pre { display: block; }
@media (max-width: 760px) { .ta-cover__name { line-height: 1.95 !important; } .ta-cover h1 { padding-bottom: 6px; } .ta-cover__lead { margin-top: 20px !important; } }
/* Chữ "Cảm ơn thầy cô" chỉ xuống dòng giữa 2 cụm từ */
.ta-nw { white-space: nowrap; }
/* Thẻ thầy cô trang tổng: ảnh cắt bớt phần dưới (giữ đầu, vai) cho thẻ ngắn lại */
.ta-team .teacher-card .card__media { aspect-ratio: 1 / 1 !important; }
.ta-team .teacher-card .card__media img { object-position: center top !important; }
/* Tên giáo viên nhỏ lại (khách 06/11): đa số tên 3 chữ, cần vừa 1–2 dòng gọn */
.ta-kv--board .ta-kv__name { font-size: clamp(2.6rem, 5vw, 4.6rem) !important; }
.ta-kv--board .ta-kv__name--long { font-size: clamp(2.2rem, 3.8vw, 3.6rem) !important; }
@media (max-width: 640px) {
  .ta-kv--board .ta-kv__name { font-size: clamp(2.3rem, 11vw, 3rem) !important; }
  .ta-kv--board .ta-kv__name--long { font-size: clamp(1.9rem, 8.6vw, 2.4rem) !important; }
}
.ta-about__rest { display: grid; gap: clamp(28px, 4vw, 56px); }
.ta-about__rest[hidden] { display: none; }
/* Khoá dòng kẻ banner thầy cô (06/11): mọi khối cao bội số --lh để chữ luôn nằm trên dòng kẻ ở mọi thiết bị.
   Nút 48px: đệm trên dưới (lh − 24px), khe giữa 2 hàng nút (2lh − 48px) → mỗi hàng nút chiếm đúng 2 dòng kẻ */
.ta-kv--board .ta-kv__cta { padding-block: calc(var(--lh) - 24px) !important; row-gap: calc(var(--lh) * 2 - 48px) !important; }
.ta-kv--board .ta-kv__cta .btn { margin: 0 !important; }
.ta-kv--board .ta-kv__lead { margin-top: var(--lh) !important; margin-bottom: 0 !important; line-height: var(--lh) !important; }
@media (max-width: 640px) {
  .ta-kv--board .ta-kv__cta { padding-inline: 22px !important; margin-top: var(--lh) !important; }
  .ta-kv--board .ta-kv__cta::after { height: var(--lh) !important; }
  .ta-kv--board .ta-kv__media { height: calc(var(--lh) * 11) !important; margin-top: var(--lh) !important; overflow: hidden; }
  .ta-kv--board .ta-kv__person { max-height: calc(var(--lh) * 11 - 20px) !important; }
}
@media (max-width: 640px) { .ta-kv--board .ta-kv__cta::after { height: calc(48px - var(--lh)) !important; } }   /* cộng khe hàng (2lh − 48) = đúng 1 dòng kẻ */
/* Video mobile: chỉ còn ảnh nhỏ, bỏ chữ */
@media (max-width: 640px) {
  .ta-act--center .ta-video__list { grid-template-columns: repeat(auto-fill, minmax(96px, 120px)) !important; justify-content: center; gap: 8px; }
  .ta-vitem { padding: 4px !important; }
  .ta-vitem > span:not(.ta-vitem__thumb) { display: none; }
  .ta-vitem__thumb .ic { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
}
/* Banner thầy cô mobile gọn hơn (06/11): bỏ dòng trống giữa nhãn–tên, tên–ảnh, mô tả–nút; ảnh thấp lại 8 dòng kẻ */
@media (max-width: 640px) {
  .ta-kv--board .ta-kv__tab { margin-bottom: 0 !important; }
  .ta-kv--board .ta-kv__media { height: calc(var(--lh) * 8) !important; margin-top: 0 !important; }
  .ta-kv--board .ta-kv__person { max-height: calc(var(--lh) * 8 - 12px) !important; }
  .ta-kv--board .ta-kv__lead { margin-top: 0 !important; }
  .ta-kv--board .ta-kv__cta { margin-top: 0 !important; }
}
@media (max-width: 640px) { .ta-kv--board .ta-kv__cta .btn { flex: 1 1 0 !important; min-width: 0; padding-inline: 10px !important; font-size: .9rem; gap: 6px; } }
@media (max-width: 360px) { .ta-kv--board .ta-kv__cta .btn { flex: 1 1 100% !important; } }
/* Cảm nhận mobile (06/11): lưới 2 thẻ một hàng, cuộn dọc, "Xem thêm" mở thêm 6 như desktop (bỏ hàng vuốt ngang) */
@media (max-width: 640px) {
  .ta-wall { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; gap: 10px !important;
    margin-inline: 0 !important; padding: 0 !important; overflow: visible !important; scroll-snap-type: none !important; }
  .ta-wall > .is-more { display: none !important; }
  .ta-wall + .section-cta { display: flex !important; }
  .ta-review { padding: 14px 12px; gap: 8px; }
  .ta-review .ta-clip { --lines: 6; font-size: .84rem; line-height: 1.5; }
  .ta-review__imgs button { width: 52px; }
  .ta-review .testi-card__who img { width: 32px; height: 32px; }
  .ta-review .testi-card__who b { font-size: .82rem; }
  .ta-review .testi-card__who span { font-size: .7rem; line-height: 1.4; }
}
@media (max-width: 640px) { .ta-act--center .ta-video__list { display: flex !important; flex-wrap: wrap; justify-content: center; } .ta-act--center .ta-video__list > li { width: 120px; } }   /* ảnh video canh giữa */
.ta-review .testi-card__who i { font-style: normal; }
/* Người viết cảm nhận trên điện thoại: tên 1 dòng, dưới là "Phụ huynh · Lớp 9", bỏ cơ sở và ngày cho gọn */
@media (max-width: 640px) {
  .ta-review .testi-card__who { gap: 8px; align-items: center; }
  .ta-review .testi-card__who > div { min-width: 0; }
  .ta-review .testi-card__who b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.3; }
  .ta-review .testi-card__who span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.35 !important; }
  .ta-review :is(.ta-who__date, .ta-who__campus) { display: none; }
}
/* "Cảm ơn thầy cô" là chữ inline (để gạch đỏ theo từng dòng) nên chiều cao dòng lấy theo h1:
   đặt cỡ chữ, font và khoảng dòng ở h1 để dòng đủ cao, không đè lên lời dẫn bên dưới */
.page-tri-an .ta-cover h1 { font-family: var(--hand); font-weight: 400; font-size: clamp(2.6rem, 5.6vw, 5.2rem); line-height: 1.85; }
.ta-cover h1 .ta-cover__pre { font-family: var(--sans, 'Be Vietnam Pro', sans-serif); font-size: clamp(1.15rem, 1.8vw, 1.6rem); font-weight: 600; line-height: 1.5; }
.ta-cover h1 .ta-cover__name { font-size: 1em !important; line-height: inherit !important; }
@media (max-width: 760px) { .page-tri-an .ta-cover h1 { line-height: 1.95; } }

/* ---- Đợt 06/11 (7) ---- */
/* Banner: mô tả tối đa 4 dòng + "Đọc thêm" (mở sẵn phần Giới thiệu); mọi khối vẫn cao bội số dòng kẻ */
.ta-kv--board .ta-kv__lead { -webkit-line-clamp: 4 !important; }
.ta-kv__more { display: inline-flex; align-items: center; gap: 6px; height: var(--lh); align-self: flex-start; font-weight: 700; font-size: .92rem; color: var(--black); text-decoration: underline; text-underline-offset: 4px; }
.ta-kv__more .ic { width: 16px; height: 16px; }
@media (max-width: 640px) { .ta-kv--board .ta-kv__more { order: 5; margin-left: 22px; } .ta-kv--board .ta-kv__lead { -webkit-line-clamp: 4 !important; } }
/* Thư tri ân: thư dài cắt ở 9 dòng kẻ, "Đọc trọn lá thư" mở hộp đọc */
.ta-act--board .ta-paper__body.ta-clip { min-height: calc(var(--lines) * var(--rule)) !important; max-height: calc(var(--lines) * var(--rule)) !important; overflow: hidden; }
.ta-act--board .ta-paper__body.ta-clip.is-cut { -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.ta-read__body .ta-paper__body { max-height: none !important; min-height: 0 !important; -webkit-mask-image: none; mask-image: none; }
/* Lightbox ảnh: chú thích tối đa 2 dòng + dải ảnh nhỏ bên dưới */
.ta-lightbox img { max-height: calc(100dvh - 210px); }
.ta-lightbox__cap { max-width: 720px; margin: 12px auto 0; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .86); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ta-lightbox__thumbs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; justify-content: safe center; padding: 12px max(16px, env(safe-area-inset-left, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)); overflow-x: auto; scrollbar-width: none; }
.ta-lightbox__thumbs::-webkit-scrollbar { display: none; }
.ta-lightbox .ta-lightbox__thumb { flex: none; width: 76px; height: 54px; padding: 0; border-radius: 8px; overflow: hidden; opacity: .5; border: 2px solid transparent; transition: opacity .2s, border-color .2s; }
.ta-lightbox .ta-lightbox__thumb img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; }
.ta-lightbox .ta-lightbox__thumb:hover, .ta-lightbox .ta-lightbox__thumb.is-on { opacity: 1; background: none; }
.ta-lightbox .ta-lightbox__thumb.is-on { border-color: var(--yellow); }
@media (max-width: 640px) { .ta-lightbox .ta-lightbox__thumb { width: 60px; height: 44px; } .ta-lightbox img { max-height: calc(100dvh - 190px); } }
/* Video: khung theo chiều video. Nhiều video: khung trái + danh sách cuộn phải (desktop), dải ảnh nhỏ dưới (điện thoại) */
.ta-act--board .ta-video { max-width: 1120px; }
.ta-video--list { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.ta-video__stage { display: flex; justify-content: center; }
.ta-video__frame { width: 100%; }
.ta-video.is-vertical .ta-video__frame { width: auto; height: min(72vh, 640px); aspect-ratio: 9 / 16; }
.ta-video--list .ta-video__list { display: flex !important; flex-direction: column; gap: 10px; margin: 0; max-height: min(72vh, 600px); overflow-y: auto; scrollbar-width: thin; }
.ta-video--list .ta-vitem { flex-direction: row; align-items: center; }
.ta-video--list .ta-vitem__thumb { width: 116px; }
.ta-vitem__thumb.is-vertical { aspect-ratio: 9 / 16; width: 54px !important; }
.ta-vitem__thumb.is-vertical img { object-fit: cover; }
@media (max-width: 900px) {
  .ta-video--list { grid-template-columns: 1fr; }
  .ta-video--list .ta-video__list { flex-direction: row; justify-content: safe center; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
  .ta-video--list .ta-video__list > li { flex: none; width: 128px; }
  .ta-video--list .ta-vitem { flex-direction: column; padding: 4px !important; }
  .ta-video--list .ta-vitem__thumb { width: 100%; }
  .ta-video--list .ta-vitem > span:not(.ta-vitem__thumb) { display: none; }
  .ta-video.is-vertical .ta-video__frame { height: min(70vh, 560px); }
}
/* Hộp đọc trọn lá thư: giữ đúng nhịp dòng kẻ của tờ thư (hộp đọc đặt cỡ chữ, khoảng dòng và lề đoạn riêng làm lệch dòng) */
.ta-read__body .ta-paper__body { font-size: .98rem; line-height: var(--rule) !important; background-position: 0 0; }
.ta-read__body .ta-paper__body p { margin: 0 !important; font-size: inherit; line-height: inherit !important; }
.ta-read__body .ta-paper__body p + p { text-indent: 1.4em; }
/* "Đọc thêm" nằm cuối dòng thứ 4 của mô tả, đè lên phần chữ bị cắt (nền trắng mờ dần sang trái) */
.ta-kv__leadbox { position: relative; max-width: 64ch; margin-top: var(--lh); }
.ta-kv--board .ta-kv__leadbox .ta-kv__lead { margin: 0 !important; max-width: none; padding: 0 !important; }
.ta-kv__leadbox .ta-kv__more { position: absolute; right: 0; bottom: 0; height: var(--lh); padding-left: 56px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 44px); }
@media (max-width: 640px) { .ta-kv--board .ta-kv__leadbox { order: 4; margin: 0; padding-inline: 22px; } .ta-kv--board .ta-kv__leadbox .ta-kv__more { right: 22px; margin: 0; } }
.ta-kv__leadbox .ta-kv__more.is-static { position: static; padding-left: 0; background: none; }
/* Chú thích trên lưới ảnh: 1 dòng, dài thì "…" (đọc đủ khi mở ảnh lớn) */
.ta-cap--over { display: block !important; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: unset; }
/* Video (06/11): một khung canh giữa, mũi tên trái phải 2 bên, chấm chọn video bên dưới; bỏ danh sách bên cạnh */
.ta-video--list { display: block !important; }
.ta-video--list .ta-video__list { display: none !important; }
.ta-video__stage { position: relative; align-items: center; gap: clamp(12px, 3vw, 40px); max-width: 960px; margin-inline: auto; }
.ta-video:not(.is-vertical) .ta-video__frame { flex: 1 1 auto; max-width: 860px; }
.ta-video__nav { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 50%; color: var(--white); transition: background-color .2s, border-color .2s; }
.ta-video__nav:hover { background: rgba(255, 255, 255, .12); border-color: var(--white); }
.ta-video__nav .ic { width: 22px; height: 22px; }
.ta-video__nav--prev .ic { transform: scaleX(-1); }
.ta-video__nav use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }
.ta-video__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ta-video__dots button { width: 9px; height: 9px; padding: 0; border-radius: 999px; background: rgba(255, 255, 255, .35); transition: width .25s, background-color .25s; }
.ta-video__dots button.is-active { width: 26px; background: var(--yellow); }
@media (max-width: 640px) {
  .ta-video__stage { gap: 0; }
  .ta-video__nav { position: absolute; top: 50%; z-index: 3; width: 38px; height: 38px; margin-top: -19px; background: rgba(9, 11, 12, .55); }
  .ta-video__nav--prev { left: 6px; } .ta-video__nav:not(.ta-video__nav--prev) { right: 6px; }
}
.ta-cover h1 .ta-cover__name { padding-bottom: 0 !important; background-position: left calc(100% - .2em) !important; }   /* gạch đỏ sát chân chữ hơn */
/* Dòng kẻ thư: khoảng dòng số nguyên (2.1em ra 32,93px làm đường kẻ lúc đậm lúc nhạt) */
.ta-paper__body { --rule: 33px !important; }
/* Có cả video dọc và ngang: khung phát giữ một chiều cao cố định (bằng chiều cao video dọc), đổi video không làm trang nhảy */
.ta-video.has-vertical { --vh: min(72vh, 600px); }
.ta-video.has-vertical .ta-video__stage { height: var(--vh); }
.ta-video.has-vertical:not(.is-vertical) .ta-video__frame { width: min(100%, calc(var(--vh) * 16 / 9)); }
.ta-video.has-vertical.is-vertical .ta-video__frame { height: var(--vh); }
@media (max-width: 640px) { .ta-video.has-vertical { --vh: min(68vh, 520px); } }