khi playlist đã có link (bấm cả ô, không chỉ chữ ở chân thẻ),
là khi chưa có. text-decoration:none để trình duyệt khỏi gạch chân. */
.pl-thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(140deg,var(--pl-a,#2A0F22),var(--pl-b,#3D1430));display:flex;align-items:center;justify-content:center;overflow:hidden;text-decoration:none}
/* Ảnh YouTube 4:3 (hqdefault) có viền đen trên dưới; object-fit:cover cắt bỏ
đúng phần viền đó, còn lại khít khung 16:9. Ảnh 16:9 (maxresdefault) vừa sẵn. */
.pl-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
/* Lớp phủ tối: ảnh thật sáng hơn nền trang nhiều, không phủ thì nhãn PLAYLIST
và nút play chìm vào ảnh. Rê chuột thì lớp phủ nhạt đi, ảnh sáng lên. */
.pl-thumb::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(165deg,rgba(5,5,7,.52),rgba(5,5,7,.18) 46%,rgba(48,15,38,.58));
transition:opacity .2s}
.pl-card:hover .pl-thumb::after{opacity:.55}
.pl-thumb .pl-tag,.pl-thumb .v-play{z-index:2}
.pl-ic{position:relative;z-index:2;font-size:3.1rem;opacity:.66}
.pl-tag{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;background:rgba(5,5,7,.84);border:1px solid var(--vien-manh);color:var(--trang);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:4px}
.pl-tag::before{content:"";width:11px;height:9px;flex:none;background:
linear-gradient(var(--sen),var(--sen)) 0 0/11px 2px no-repeat,
linear-gradient(var(--sen),var(--sen)) 0 3.5px/11px 2px no-repeat,
linear-gradient(var(--sen),var(--sen)) 0 7px/7px 2px no-repeat}
.pl-thumb .v-play{width:52px;height:52px;right:14px;bottom:14px}
.pl-thumb .v-play::before{border-left-width:11px;border-top-width:7px;border-bottom-width:7px;margin-left:3px}
.pl-card:hover .v-play{transform:scale(1.08);background:rgba(255,45,126,.28);box-shadow:0 0 24px rgba(255,45,126,.4)}
.pl-body{padding:24px 26px 4px;flex:1;display:flex;flex-direction:column}
.pl-kicker{display:flex;align-items:center;gap:11px;color:var(--sen);font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px}
.pl-num{color:var(--trang);font-size:.78rem;font-weight:600;letter-spacing:.08em}
.pl-card h3{font-family:var(--font);font-weight:800;text-transform:uppercase;font-size:1.16rem;line-height:1.45;text-wrap:balance;letter-spacing:-.005em;color:var(--trang);margin:0 0 12px} /* 1.45: cỡ chữ nhỏ nên cần tỉ lệ dòng rộng hơn --dong-hoa mới đủ chỗ cho dấu */
.pl-card p{color:var(--xam);font-size:.94rem;line-height:1.62;margin:0 0 20px;flex:1}
.pl-foot{border-top:1px solid var(--vien);margin:0 26px;padding:16px 0 22px}
.pl-go{display:inline-flex;align-items:center;justify-content:space-between;width:100%;color:var(--sen);font-size:.82rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;text-decoration:none}
.pl-go span{transition:transform .18s}
.pl-card:hover .pl-go{color:var(--sen-sang)}
.pl-card:hover .pl-go span{transform:translateX(5px)}
.pl-soon{display:inline-block;color:var(--xam);font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.pl-card.is-soon .pl-go{display:none}
.pl-card:not(.is-soon) .pl-soon{display:none}
/* ═══ 4 · KÊU GỌI CUỐI ═══ */
.vcta{position:relative;overflow:hidden;background:linear-gradient(155deg,#100910 0%,#07060A 55%,#050507 100%);padding:88px 0 92px;text-align:center;border-top:1px solid var(--vien)}
.vcta::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 900px 460px at 50% 0%,rgba(255,45,126,.20),transparent 68%);pointer-events:none}
.vcta-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 24px}
/* Tiêu đề đan xen trắng–hồng: dòng mời gọi để trắng, vế đích đến tô hồng.
Màu đặt trên từng chứ không trên cả h2, vì tô chữ bằng chuyển sắc
phải cắt nền theo đúng khối chữ đó — đặt trên h2 thì cả khối chung một dải. */
.vcta h2{font-family:var(--font);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,4vw,3rem);line-height:var(--dong-hoa);letter-spacing:-.005em;margin:0 0 20px;color:var(--trang)}
.vcta h2 .l1,.vcta h2 .sen{display:block;text-wrap:balance}
.vcta h2 .l1{color:var(--trang)}
.vcta h2 .sen{background:linear-gradient(100deg,#FF74AE 0%,var(--sen) 46%,#C4005E 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.vcta p{color:var(--xam);font-size:1.06rem;max-width:560px;margin:0 auto 34px}
.vcta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ═══ 5 · KHỐI NHẬN THƯ ═══ */
.vmail{max-width:640px;margin:60px auto 10px;padding:30px 26px;border:1px solid var(--vien-manh);border-radius:16px;background:var(--den-2);text-align:center}
/* Khối nhận thư — nội dung chị Hằng chốt 21/08/2026. Hai ô Tên + Email cùng một
hàng (.vmail-hang), nút chạy hết bề ngang bên dưới. Màn hẹp thì hai ô tự tách
thành hai dòng nhờ flex-wrap, không cần thêm media query. */
.vmail-eyebrow{font-size:.84rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sen);margin-bottom:8px}
.vmail-title{font-family:var(--font);font-size:1.26rem;font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:1.28;color:var(--trang);margin-bottom:10px}
.vmail-sub{margin:0 0 18px;font-size:.97rem;color:var(--xam);line-height:1.62}
.vmail form{display:flex;flex-direction:column;gap:11px;max-width:470px;margin:0 auto}
.vmail-hang{display:flex;gap:10px;flex-wrap:wrap}
.vmail-hang input{flex:1 1 190px;min-width:0}
.vmail input[type=text],.vmail input[type=email]{padding:13px 15px;border:1px solid var(--vien-manh);border-radius:10px;font-size:.97rem;font-family:inherit;background:var(--den-3);color:var(--trang)}
.vmail input::placeholder{color:#6C6577}
.vmail input:focus{outline:none;border-color:var(--sen)}
.vmail-agree{display:flex;gap:9px;align-items:flex-start;text-align:left;font-size:.84rem;color:var(--xam);line-height:1.55;cursor:pointer}
.vmail-agree input{margin-top:3px;accent-color:var(--sen)}
.vmail button{padding:15px;border:0;border-radius:12px;font-weight:700;font-size:.97rem;letter-spacing:.04em;text-transform:uppercase;font-family:inherit;cursor:pointer;background:var(--sen-nut);color:#fff;transition:background .2s}
.vmail button:hover{background:var(--sen)}
.vmail .bt-msg{font-size:.86rem;min-height:18px}
.vmail-done{font-size:1rem;font-weight:600;color:var(--trang)}
/* ═══ CHÂN TRANG ═══ */
footer{background:var(--den-2);border-top:1px solid var(--vien)}
.foot-sign{color:var(--xam)}
/* Khẩu hiệu thay cho chữ ký cũ — chị Hằng chốt ngày 07/08/2026.
Đè bản kem trong post.css: nền đen nên dùng Montserrat nghiêng + hồng cánh sen. */
.foot-slogan{display:block;font-family:var(--font);font-style:italic;font-weight:600;font-size:1.22rem;letter-spacing:.005em;color:var(--sen);margin-bottom:6px}
/* Chữ ký viết tay: ảnh gốc là MỰC ĐEN nền trong suốt — đặt thẳng lên nền đen
là mất hút hoàn toàn. invert(1) lật đen thành trắng, thành nét bút trắng
trên nền đen. Chỉ dùng được vì ảnh chỉ có một màu mực. */
.sign-img{filter:invert(1)}
.foot-copy{color:#918A9D} /* đủ sáng để đọc trên nền đen (5.7:1) mà vẫn lùi về sau */
/* ═══ MÀN NHỎ ═══ */
@media(max-width:980px){
.pl-grid{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media(max-width:900px){
.vhero{padding:60px 0 64px}
.vhero-inner{grid-template-columns:1fr;gap:38px}
.vhero p{max-width:none}
.subband-inner{grid-template-columns:1fr;gap:28px}
.sub-actions{flex-direction:row;flex-wrap:wrap;min-width:0}
.subband h2,.plsec-head h2{max-width:none}
.plsec-head{grid-template-columns:1fr;gap:16px;align-items:start;margin-bottom:36px}
.plsec-head p{text-align:left}
}
@media(max-width:640px){
.v-wrap{padding:0 20px}
.vhero h1{font-size:clamp(1.7rem,7vw,2.15rem)}
.plsec{padding:56px 0 54px}
.pl-grid{grid-template-columns:1fr}
.vcta{padding:64px 0 66px}
.v-btn{width:100%;padding:14px 22px}
.sub-actions{flex-direction:column}
.vcta-actions .v-btn{width:100%}
.vfeat .v-play{width:64px;height:64px}
.vmail{margin:40px 20px 10px;padding:26px 20px}
}