/* Trang bán Sidecue — nền tối như chính app; HOẠ TIẾT XUYÊN SUỐT = dải vàng của vạch đọc (mark), giống dòng đang đọc trên ô nổi. */
body { background: #0D0E10; color: #ECE9E2; }
body .brand, body footer, body footer a { color: #8F918F; }
.wrap.rong { max-width: 1160px; }
.sc { --vang: #FFCC33; --cam: #FF9F43; --o: #16181B; --vien: #262A2F; --mo: #9A9C99; }
.sc h1, .sc h2, .sc h3 { color: #F6F4EF; }
.sc mark { background: linear-gradient(transparent 58%, rgba(255,204,51,.42) 58%, rgba(255,204,51,.42) 92%, transparent 92%); color: inherit; padding: 0 .06em; }
.sc p { color: #C9C6BE; }
.sc a { color: #FFD866; }
.sc section { margin-bottom: 96px; }
.sc-giua { text-align: center; margin: 0 auto 28px; max-width: 22ch; }
/* đầu trang */
.sc-dau { display: grid; gap: 34px; align-items: center; padding-top: 8px; }
.sc-nhan { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--mo) !important; letter-spacing: .02em; margin-bottom: 18px; }
.sc-nhan img { border-radius: 7px; }
.sc-ten { display: flex; align-items: center; gap: 18px; font-size: clamp(54px, 8vw, 92px); line-height: .95; letter-spacing: -.05em; margin: 0 0 10px; }
.sc-ten img { width: clamp(52px, 6vw, 76px); height: auto; border-radius: 18px; box-shadow: 0 10px 30px -10px rgba(255,204,51,.45); }
.sc-loai { font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mo) !important; margin: 0 0 22px; }
.sc-khau { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; color: #F6F4EF !important; margin: 0 0 16px; }
.sc-phu { font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; max-width: 44ch; margin-bottom: 28px; }
.sc-mua { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.sc-mua span { font-size: 14px; color: var(--mo); }
.sc-nut { display: inline-flex; align-items: center; gap: 0; padding: 15px 24px; border-radius: 12px; background: var(--vang); color: #111 !important; font-weight: 700; font-size: 17px; text-decoration: none; box-shadow: 0 10px 30px -10px rgba(255,204,51,.55); transition: transform .15s; }
.sc-nut:hover { transform: translateY(-2px); }
.sc-nut b { font-weight: 800; color: #111; }
.sc-nut.cho { background: transparent; color: var(--mo) !important; border: 1px dashed #3A3D41; box-shadow: none; }
/* demo cuộc gọi */
.sc-goi { background: #121417; border: 1px solid var(--vien); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,204,51,.04); }
.sc-goi-tren { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; color: var(--mo); border-bottom: 1px solid var(--vien); position: relative; }
.sc-cam { position: absolute; left: 50%; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: #1E2328; box-shadow: inset 0 0 0 2px #2E343A, 0 0 0 3px #15181B; }
.sc-cam::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #2C6E3F; }
.sc-goi-gio { margin-left: auto; }
.sc-goi-man { position: relative; aspect-ratio: 16 / 10; background: #000; overflow: hidden; }
.sc-goi-man > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.sc-goi-ban { position: absolute; right: 12px; bottom: 12px; width: 21%; height: auto; border-radius: 10px; border: 2px solid rgba(255,255,255,.12); }
.sc-noi { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 62%; background: rgba(17,17,17,.9); border: 1px solid rgba(255,255,255,.14); border-top: 0; border-radius: 0 0 12px 12px; overflow: hidden; transition: opacity .35s, filter .35s; }
.sc-noi-khung { position: relative; height: 7.4em; overflow: hidden; font: 600 clamp(12px, 1.35vw, 17px)/1.45 Inter, sans-serif; color: #F5F5F5; }
.sc-noi-vach { position: absolute; left: 0; right: 0; top: 35%; height: 1.45em; background: rgba(255,204,51,.14); border-left: 3px solid var(--vang); }
.sc-noi-chu { position: absolute; left: 0; right: 0; top: 0; padding: 0 .9em; will-change: transform; }
.sc-noi-chu .cam { color: var(--cam); } .sc-noi-chu .vang { color: var(--vang); }
.sc-noi-thanh { display: flex; align-items: center; gap: 5px; padding: 6px 8px; background: #1C1C1C; border-top: 1px solid #2A2A2A; font-size: 11px; }
.sc-noi-thanh button { border: 0; background: #333; color: #fff; border-radius: 6px; min-width: 24px; height: 22px; font: 700 12px Inter, sans-serif; cursor: pointer; }
.sc-noi-thanh button.vang { background: var(--vang); color: #111; min-width: 32px; }
.sc-noi-thanh b { color: #DDD; font-weight: 600; min-width: 54px; text-align: center; }
.sc-noi-thanh span { margin-left: auto; color: #AAA; }
.sc-dem { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(17,17,17,.85); color: var(--vang); font: 800 44px Inter, sans-serif; }
.sc-chiase { position: absolute; left: 12px; top: 12px; background: #C62828; color: #fff; font: 600 12px Inter, sans-serif; padding: 5px 10px; border-radius: 6px; }
.sc-goi.ho .sc-goi-man { box-shadow: inset 0 0 0 3px #2EB872; }
.sc-goi.ho .sc-noi { opacity: 0; filter: blur(4px); pointer-events: none; }
.sc-goi-duoi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--vien); }
.sc-tab { display: inline-flex; background: #0B0C0E; border: 1px solid var(--vien); border-radius: 10px; padding: 3px; }
.sc-tab button { border: 0; background: transparent; color: var(--mo); font: 600 13px Inter, sans-serif; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.sc-tab button[aria-selected="true"] { background: #23262A; color: #fff; }
.sc-goi-meo { font-size: 12.5px; color: #6E716F; }
/* mắt và ống kính */
.sc-mat { display: grid; gap: 34px; align-items: center; }
.sc-mat h2, .sc-chung h2, .sc-gia h2, .sc-hoi h2, .sc-luoi h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -.025em; }
.sc-lap { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; background: linear-gradient(180deg, #17191C, #101113); border: 1px solid var(--vien); }
.sc-lap-cam { position: absolute; top: 10px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #2C6E3F; box-shadow: 0 0 0 4px #1C2024; }
.sc-lap-noi, .sc-lap-giay { position: absolute; border-radius: 8px; padding: 10px 12px; font-size: 12px; color: #DDD; }
.sc-lap-noi { top: 16%; left: 30%; width: 40%; background: rgba(255,204,51,.12); border: 1px solid rgba(255,204,51,.5); }
.sc-lap-giay { bottom: 18px; left: 8%; width: 46%; background: #1D2024; border: 1px solid #30353B; }
.sc-lap i { display: block; height: 6px; border-radius: 3px; background: #3A3F46; margin-top: 7px; }
.sc-lap-noi i { background: rgba(255,204,51,.55); }
.sc-lap-mui { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-lap-mui line { stroke-width: 2; vector-effect: non-scaling-stroke; }
.sc-lap-mui .g { stroke: var(--vang); }
.sc-lap-mui .x { stroke: #5B6168; stroke-dasharray: 5 5; }
.sc-lap-noi { z-index: 1; } .sc-lap-giay { z-index: 1; }
.sc-mat-chu { font-size: 13px; color: var(--mo) !important; margin-top: 12px; }
.sc-mat-chu .vang { color: var(--vang); } .sc-mat-chu .xam { color: #5B6168; }
/* lưới tính năng */
.sc-luoi { display: grid; gap: 16px; }
.sc-o { background: var(--o); border: 1px solid var(--vien); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.sc-o h3 { font-size: 18px; margin: 0; }
.sc-o p { margin: 0; font-size: 15px; color: #A9A69F; }
.sc-o img { width: 100%; height: auto; border-radius: 12px; margin-top: auto; }
.sc-o-to { gap: 18px; }
.sc-vd { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: auto; }
.sc-vd pre { margin: 0; white-space: pre-wrap; font: 13px/1.6 ui-monospace, Menlo, Consolas, monospace; color: #CFCBC2; background: #0F1012; border: 1px solid var(--vien); border-radius: 10px; padding: 12px; }
.sc-vd p { background: #111; border-radius: 10px; padding: 12px; color: #F5F5F5 !important; font-weight: 600; font-size: 14px !important; line-height: 1.5; }
.sc-vd .cam { color: var(--cam); } .sc-vd .vang { color: var(--vang); }
.sc-mui { color: var(--vang); font-weight: 700; }
.sc-phim { display: flex; gap: 10px; margin-top: auto; }
.sc-phim kbd { font: 700 14px Inter, sans-serif; color: #EEE; background: #23262A; border: 1px solid #3A3F45; border-bottom-width: 4px; border-radius: 10px; padding: 12px 16px; }
.sc-phim kbd.nhan { animation: nhan 2.4s infinite; }
@keyframes nhan { 0%, 60%, 100% { transform: translateY(0); border-bottom-width: 4px; background: #23262A; } 70%, 80% { transform: translateY(3px); border-bottom-width: 1px; background: #3A3220; color: var(--vang); } }
.sc-guong { margin-top: auto; background: #111; border-radius: 10px; padding: 18px 12px; text-align: center; }
.sc-guong span { display: inline-block; font-weight: 700; color: #F5F5F5; animation: guong 4s infinite; }
@keyframes guong { 0%, 40% { transform: scaleX(1); } 50%, 90% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.sc-kb { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 6px; }
.sc-kb li { background: #0F1012; border: 1px solid var(--vien); border-radius: 8px; padding: 8px 12px; font-size: 14px; color: #BBB; }
.sc-kb li.dang { border-color: rgba(255,204,51,.5); color: #FFF; background: rgba(255,204,51,.08); }
.sc-ngu { margin-top: auto !important; background: #111; border-left: 3px solid var(--vang); border-radius: 8px; padding: 14px 16px; font-size: 22px !important; font-weight: 700; color: #FFF !important; min-height: 64px; transition: opacity .3s; }
/* bằng chứng */
.sc-nguon { max-width: 70ch; color: var(--mo) !important; }
.sc-chung-luoi { display: grid; gap: 14px; margin-top: 24px; }
.sc-chung-luoi > div { background: var(--o); border: 1px solid var(--vien); border-radius: 16px; padding: 20px; }
.sc-chung-luoi b { font-size: 34px; color: var(--vang); letter-spacing: -.03em; }
.sc-chung-luoi p { margin: 6px 0 12px; color: #DDD9D0 !important; }
.sc-chung-luoi span { font-size: 14px; color: #8BD3A0; }
.sc-xem video { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--vien); background: #000; }
.sc-xem p { text-align: center; color: var(--mo) !important; font-size: 14px; }
.sc-gia { background: radial-gradient(120% 140% at 0% 0%, rgba(255,204,51,.16), transparent 55%), #15171A; border: 1px solid var(--vien); border-radius: 24px; padding: 40px 32px; }
.sc-gia h2 { margin-top: 0; }
.sc-gia p { max-width: 58ch; margin-bottom: 24px; }
.sc-hoi details { border-top: 1px solid var(--vien); padding: 16px 0; }
.sc-hoi summary { font-weight: 600; cursor: pointer; color: #EEE; }
.sc-hoi details p { margin: 10px 0 0; }
@media (min-width: 900px) {
  .sc-dau { grid-template-columns: .82fr 1.18fr; gap: 48px; }
  .sc-mat { grid-template-columns: 1fr 1fr; gap: 56px; }
  .sc-luoi { grid-template-columns: repeat(3, 1fr); }
  .sc-luoi > h2 { grid-column: 1 / -1; }
  .sc-o-to { grid-column: span 2; display: grid; grid-template-columns: 1fr 1.35fr; align-items: center; gap: 24px; }
  .sc-o-to img { margin: 0; }
  .sc-o-ngu { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 24px; }
  .sc-o-ngu .sc-ngu { margin: 0 !important; }
  .sc-o-ngu > div p { margin-top: 8px; }
  .sc-chung-luoi { grid-template-columns: repeat(4, 1fr); }
  .sc-gia { padding: 56px 60px; }
}
@media (prefers-reduced-motion: reduce) { .sc-phim kbd.nhan, .sc-guong span { animation: none; } }
/* form "Notify me" (chuẩn clane: build.py nut_mua) trên nền tối */
.sc form.cho .cho-nhan { color: #DAD6CD; }
.sc .cho-hang input { background: #16181B; border: 1px solid #2E3236; color: #F5F5F5; }
.sc .cho-hang button { background: var(--vang); color: #111; }
.sc .cho-nho { color: var(--mo) !important; }
.sc .cho-xong { color: #8BD3A0 !important; }
.sc-mua { flex-direction: column; align-items: flex-start; }