/* Phần dùng chung 3 concept màn xem · hệ màu A hồng (src/v2/styles/_mau-a-hong.scss) + Be Vietnam Pro */
:root {
  --hong-50: #fff2f7; --hong-100: #ffdeea; --hong-200: #ffbcd7; --hong-300: #ff98c5; --hong-400: #ff489e;
  --hong-500: #f41e92; --hong-600: #ce1e78; --hong-700: #9d0f5b; --hong-800: #660a3b; --hong-900: #3a0621;
  --than-0: #17070f; --than: #1d0812; --than-2: #250a16; --than-3: #2c0d1b;
  --nen-sang: #fff8fb; --chu: #16090f; --chu-2: #4d3a43; --chu-3: #725e69;
  --chu-toi-2: #efd6e1; --chu-toi-3: #d9b3c5;
  --vien: #f5d6e3; --vien-2: #fbe7ef; --vien-toi: rgba(255, 72, 158, .28);
  --cta-a: #ffa448; --cta-b: #ec7c0e; --cta-chu: #1e0e15;
  --vang: #fecd1f; --xanh: #16a34a;
  --bong: 0 1px 2px rgba(22, 9, 15, .05), 0 14px 36px rgba(102, 10, 59, .1);
  --header: 64px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Be Vietnam Pro', Inter, system-ui, sans-serif; color: var(--chu); background: var(--nen-sang); font-size: 15px; line-height: 1.5; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.an { display: none !important; }

/* ── header giả của trang học ── */
.dau { position: sticky; top: 0; z-index: 50; height: var(--header); display: flex; align-items: center; gap: 28px; padding: 0 24px; background: rgba(255, 248, 251, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--vien); }
.dau__logo { height: 30px; width: auto; }
.dau__menu { display: flex; gap: 22px; font-size: 14px; font-weight: 500; color: var(--chu-2); margin-left: 12px; }
.dau__menu a.dang { color: var(--hong-600); font-weight: 700; }
.dau__phai { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.dau--toi { background: rgba(23, 7, 15, .9); border-color: rgba(255, 72, 158, .16); }
.dau--toi .dau__menu { color: var(--chu-toi-3); }
.dau--toi .dau__menu a.dang { color: var(--hong-300); }
@media (max-width: 760px) { .dau { padding: 0 14px; gap: 10px; } .dau__menu { display: none; } .dau__logo { height: 26px; } }

/* ── nút ── */
.nut-cam { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: var(--cta-chu); background: linear-gradient(180deg, var(--cta-a), var(--cta-b)); box-shadow: 0 6px 18px rgba(236, 124, 14, .3); white-space: nowrap; }
.nut-cam span, .nut-vien span { display: block; line-height: 1; }
.nut-cam svg, .nut-vien svg { display: block; flex: none; width: 16px; height: 16px; }
.nut-vien { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 14.5px; border: 1.5px solid var(--vien); background: #fff; white-space: nowrap; }
.nut-vien--toi { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.nut-nho { min-height: 36px; padding: 0 14px; font-size: 13.5px; }

/* ── tem ── */
.tem { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.tem svg { width: 11px; height: 11px; display: block; flex: none; }
.tem--free { background: #dcfce7; color: #14532d; }
.tem--pro { background: var(--vang); color: #3b2a00; }
.tem--moi { background: var(--hong-500); color: #fff; }

/* ── thẻ bài: thumbnail 16:9 là mồi chính ── */
.the { display: block; position: relative; border-radius: 14px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.the__anh { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--than-2); box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.the__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.the:hover .the__anh img, .the:focus-visible .the__anh img { transform: scale(1.04); }
.the:focus-visible .the__anh { box-shadow: 0 0 0 3px var(--hong-400); }
.the__trong { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 10px 12px; background: radial-gradient(120% 90% at 0% 0%, var(--hong-700), var(--than) 70%); color: #fff; font-weight: 800; font-size: 15px; line-height: 1.25; }
.the__phut { position: absolute; right: 7px; bottom: 9px; padding: 2px 6px; border-radius: 6px; background: rgba(15, 4, 9, .82); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.the__tem { position: absolute; left: 7px; top: 7px; display: flex; gap: 4px; }
.the__khoa { position: absolute; right: 7px; top: 7px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(15, 4, 9, .78); color: var(--vang); }
.the__khoa svg { width: 13px; height: 13px; display: block; }
.the__thanh { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .28); }
.the__thanh i { display: block; height: 100%; background: var(--hong-500); }
.the__xong { position: absolute; left: 7px; bottom: 9px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border-radius: 6px; background: rgba(15, 4, 9, .78); color: #bbf7d0; font-size: 11px; font-weight: 700; line-height: 1.3; }
.the__xong svg { width: 12px; height: 12px; display: block; }
.the__dang { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(29, 8, 18, .55); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.the__dang span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--hong-500); }
.the.dang .the__anh { box-shadow: 0 0 0 3px var(--hong-500); }
.the__ten { margin-top: 8px; font-weight: 700; font-size: 14.5px; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.the__phu { margin-top: 3px; font-size: 12.5px; color: var(--chu-3); display: flex; gap: 8px; align-items: center; }
/* thẻ ngang: ảnh trái + chữ phải */
.the--ngang { display: grid; grid-template-columns: 44% 1fr; gap: 12px; align-items: start; padding: 6px; border-radius: 14px; }
.the--ngang:hover { background: var(--hong-50); }
.the--ngang .the__ten { margin-top: 2px; font-size: 14px; -webkit-line-clamp: 3; }
.the--ngang.dang { background: var(--hong-50); }
.toi .the__ten { color: #fff; }
.toi .the__phu { color: var(--chu-toi-3); }
.toi .the--ngang:hover, .toi .the--ngang.dang { background: rgba(255, 72, 158, .1); }

/* ── khung video giả ── */
.video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; isolation: isolate; container-type: inline-size; }
.video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__toi { position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); pointer-events: none; }
.video__dk { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 16px 12px; color: #fff; z-index: 2; }
.video__thanh { position: relative; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); margin-bottom: 10px; }
.video__thanh i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--hong-500); }
.video__thanh b { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--hong-400); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(244, 30, 146, .35); }
.video__thanh em { position: absolute; top: -3px; width: 3px; height: 10px; border-radius: 2px; background: var(--vang); }
.video__hang { display: flex; align-items: center; gap: 14px; font-size: 13px; font-variant-numeric: tabular-nums; }
.video__hang svg { width: 20px; height: 20px; display: block; }
.video__hang .gian { margin-left: auto; display: flex; gap: 14px; }
.video__lop { position: absolute; inset: 0; z-index: 5; }

/* ── lớp «bài kế» kiểu Netflix (góc phải dưới, trong khung video) ── */
.ke { position: absolute; right: 16px; bottom: 64px; z-index: 4; width: min(340px, 46%); padding: 10px; border-radius: 14px; background: rgba(23, 7, 15, .9); border: 1px solid var(--vien-toi); color: #fff; display: grid; grid-template-columns: 42% 1fr; gap: 10px; align-items: center; animation: noi .4s cubic-bezier(.2, .9, .3, 1.2); }
.ke__nhan { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hong-300); }
.ke__ten { font-size: 13.5px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0 8px; }
.ke__nut { display: flex; gap: 6px; }
.ke__nut .nut-cam, .ke__nut .nut-vien { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.ke .the__anh { border-radius: 9px; }
.ke__dem { position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px; overflow: hidden; }
.ke__dem i { display: block; height: 100%; background: var(--cta-a); animation: dem 8s linear forwards; }
@keyframes dem { from { width: 0 } to { width: 100% } }
@keyframes noi { from { opacity: 0; transform: translateY(12px) scale(.96) } to { opacity: 1; transform: none } }
@container (max-width: 520px) {
  .ke { left: 10px; right: 10px; bottom: 52px; width: auto; grid-template-columns: 34% 1fr; }
}

/* ── cú dừng chốt: video tối dần, lớp phủ NGAY TRONG KHUNG VIDEO ── */
.chot { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-columns: minmax(0, 38%) 1fr; gap: 22px; align-items: center; padding: 22px 26px; color: #fff; background: radial-gradient(90% 120% at 0% 100%, rgba(157, 15, 91, .55), transparent 60%), rgba(18, 5, 11, .86); backdrop-filter: blur(6px); animation: mo .5s ease; }
@keyframes mo { from { opacity: 0 } to { opacity: 1 } }
.chot__clip { position: relative; aspect-ratio: 9 / 11; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 40px rgba(0, 0, 0, .4); }
.chot__clip img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.chot__clip .phat { position: absolute; inset: 0; display: grid; place-items: center; }
.chot__clip .phat span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(244, 30, 146, .9); }
.chot__clip .phat svg { width: 22px; height: 22px; display: block; }
.chot__clip .nhan { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(15, 4, 9, .8); font-size: 11.5px; line-height: 1.35; }
.chot__nho { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hong-300); }
.chot__h { font-size: clamp(17px, 2.3cqi, 24px); font-weight: 800; line-height: 1.3; margin: 6px 0 8px; text-wrap: balance; }
.chot__ly { font-size: clamp(13px, 1.5cqi, 15px); color: var(--chu-toi-2); line-height: 1.55; }
.chot__ly b { color: #fff; }
.chot__gia { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; color: var(--chu-toi-3); }
.chot__gia strong { font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.chot__nut { display: flex; flex-wrap: wrap; gap: 8px; }
.chot__hoi { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hong-200); }
.chot__hoi img { width: 22px; height: 22px; border-radius: 50%; }
.chot__dong { position: absolute; top: 10px; right: 12px; font-size: 12px; color: var(--chu-toi-3); }
@container (max-width: 640px) {
  .chot { grid-template-columns: 1fr; align-content: start; overflow-y: auto; padding: 14px; gap: 10px; }
  .chot__clip { display: none; }
  .chot__h { font-size: 16px; margin: 4px 0 4px; }
  .chot__ly { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .chot__gia { margin: 6px 0; padding: 6px 10px; }
  .chot__gia strong { font-size: 16px; }
  .chot__nut .nut-cam, .chot__nut .nut-vien { min-height: 38px; font-size: 13px; padding: 0 14px; }
  .chot__hoi { display: none; }
}

/* ── màn khoá bài PRO (trong khung video) ── */
.khoa { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-columns: 44% 1fr; gap: 22px; align-items: center; padding: 26px; color: #fff; background: rgba(18, 5, 11, .88); backdrop-filter: blur(8px); animation: mo .35s ease; }
.khoa .the__anh { border-radius: 12px; }
.khoa h3 { font-size: clamp(16px, 2.2cqi, 22px); line-height: 1.32; margin: 6px 0 8px; }
.khoa p { font-size: 14px; color: var(--chu-toi-2); margin-bottom: 14px; }
@container (max-width: 640px) { .khoa { grid-template-columns: 1fr; padding: 14px; gap: 8px; align-content: center; } .khoa > .the__anh { display: none; } .khoa p { font-size: 12.5px; } }

/* ── xem chung (mô phỏng, chờ API người thật) ── */
.xc { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--chu-2); }
.xc__mat { display: flex; }
.xc__mat span { width: 28px; height: 28px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--nen-sang); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.xc__mat span:first-child { margin-left: 0; }
.xc__cham { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); flex: none; }
.xc__gia { font-size: 10.5px; padding: 1px 6px; border-radius: 5px; border: 1px dashed var(--hong-300); color: var(--hong-600); white-space: nowrap; }
.toi .xc { color: var(--chu-toi-2); }
.toi .xc__mat span { border-color: var(--than); }
.toi .xc__gia { color: var(--hong-300); border-color: rgba(255, 152, 197, .5); }

/* ── Hùng nhỏ AI: ruột khung chat dùng chung ── */
.hn { display: flex; flex-direction: column; color: var(--chu); background: #fff; border-radius: 16px; border: 1px solid var(--vien); box-shadow: var(--bong); overflow: hidden; }
.hn__dau { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--vien-2); }
.hn__dau img { width: 36px; height: 36px; border-radius: 50%; }
.hn__dau b { display: block; font-size: 14.5px; line-height: 1.2; }
.hn__dau small { display: block; font-size: 12px; color: var(--chu-3); }
.hn__dau .thu { margin-left: auto; white-space: nowrap; font-size: 12.5px; color: var(--chu-3); padding: 6px 8px; border-radius: 8px; }
.hn__than { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.hn__loi { max-width: 92%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--hong-50); font-size: 14px; line-height: 1.5; }
.hn__loi--toi { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--than-2); color: #fff; }
.hn__goi { display: flex; flex-direction: column; gap: 6px; }
.hn__goi button { text-align: left; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--vien); background: #fff; font-size: 13.5px; line-height: 1.4; color: var(--chu); }
.hn__goi button:hover { border-color: var(--hong-300); background: var(--hong-50); }
.hn__go { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--vien-2); }
.hn__go input { flex: 1; min-width: 0; height: 40px; border-radius: 999px; border: 1px solid var(--vien); padding: 0 14px; font: inherit; font-size: 14px; background: var(--nen-sang); }
.hn__go button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--hong-600); color: #fff; }
.hn__go svg { width: 18px; height: 18px; display: block; }

/* ── bảng mô phỏng cho Mon (không thuộc giao diện) ── */
.mp { position: fixed; left: 14px; bottom: 14px; z-index: 90; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: #111; color: #fff; font-size: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.mp b { color: #fde68a; font-weight: 700; margin-right: 4px; }
.mp button { white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 12px; }
.mp button:hover { background: rgba(255, 255, 255, .2); }
.mp a { white-space: nowrap; padding: 6px 10px; border-radius: 999px; color: #fde68a; }
@media (max-width: 760px) { .mp { left: 8px; right: auto; bottom: 8px; max-width: calc(100vw - 16px); overflow-x: auto; } .mp b { display: none; } }
.chup .mp { display: none; }

/* ── tiêu đề nhóm (3 nhóm lời thường, Mon 14:30) ── */
.nhom__dau { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nhom__so { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--than); color: var(--hong-300); align-self: center; }
.nhom__h { font-size: 18px; font-weight: 800; line-height: 1.3; }
.nhom__p { font-size: 13.5px; color: var(--chu-3); margin-top: 2px; }
.toi .nhom__p { color: var(--chu-toi-3); }
.toi .nhom__so { background: var(--hong-500); color: #fff; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* mobile: khung video giãn theo lớp chốt/khoá để nút luôn thấy (vẫn nằm trong khung video) */
@container (max-width: 640px) {
  .video__lop:has(.chot), .video__lop:has(.khoa) { position: relative; inset: auto; }
  .chot, .khoa { position: relative; inset: auto; min-height: 100%; overflow: visible; }
  .chot__ly { -webkit-line-clamp: unset; display: block; }
}
@media (max-width: 760px) {
  .video:has(.chot), .video:has(.khoa) { aspect-ratio: auto; min-height: 0; }
  .video:has(.chot) .video__dk, .video:has(.khoa) .video__dk { display: none; }
}