/* Web Anka - kiểu chung. Màu, bố cục theo mẫu demo-anka/anka.html. Font miễn phí: Oswald (tiêu đề), Be Vietnam Pro (chữ). */
:root { --red:#C8102E; --dred:#7A0A1C; --ink:#1F1F1F; --mute:#6B6B6B; --line:#ECECEC; --bg:#F6F6F7; --tint:#FCEBEE; --yel:#FFD400; --green:#1E7B4A; }
* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
body { font-family:"Be Vietnam Pro", "Segoe UI", Arial, sans-serif; color:var(--ink); background:var(--bg); font-size:16px; line-height:1.5; }
a { color:var(--red); }
.hf { font-family:"Oswald", "Arial Narrow", sans-serif; font-weight:700; letter-spacing:.3px; line-height:1.1; }
.muted { color:var(--mute); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--red); color:#fff; border:none; border-radius:10px; padding:13px 22px; font:600 15px/1.2 inherit; font-family:inherit; cursor:pointer; text-decoration:none; }
.btn.ghost { background:#fff; color:var(--ink); border:1px solid #D8D8D8; }
.logo { display:flex; align-items:center; gap:10px; }
.logo .mark { width:40px; height:40px; border-radius:12px; display:block; flex:none; }
.logo b { font-size:28px; color:var(--red); }
.logo small { display:block; font-size:11px; color:var(--mute); margin-top:-2px; }

/* Đăng nhập */
.login { min-height:100vh; display:grid; place-items:center; padding:20px 16px; background:linear-gradient(160deg, #D8142F 0%, #9E0C24 60%, #6A0714 100%); }
.login-card { background:#fff; border-radius:20px; padding:30px 24px; width:100%; max-width:420px; display:flex; flex-direction:column; gap:16px; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.login-card h1 { font-size:34px; margin-top:6px; }
#nut-google { min-height:44px; }
.loi { background:var(--tint); color:var(--red); border-radius:10px; padding:10px 12px; font-size:14px; }
.nho { font-size:14px; }

/* Khung chính */
.app { display:flex; min-height:100vh; }
aside { width:250px; background:#fff; border-right:1px solid var(--line); padding:26px 18px; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100vh; flex:none; }
aside .logo { margin:0 8px 22px; }
.nav { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; font-size:15px; color:#333; text-decoration:none; }
.nav i { width:28px; height:28px; border-radius:8px; background:var(--bg); display:grid; place-items:center; font-style:normal; font-size:15px; flex:none; }
.nav:hover { background:var(--bg); }
.nav.on { background:var(--tint); color:var(--red); font-weight:600; }
.nav.on i { background:var(--red); color:#fff; }
.quota { margin-top:auto; background:var(--dred); color:#fff; border-radius:14px; padding:16px; }
.quota .n { font-size:30px; }
.quota .bar { height:7px; background:rgba(255,255,255,.25); border-radius:9px; margin:10px 0 8px; }
.quota .bar span { display:block; height:100%; width:0; background:var(--yel); border-radius:9px; }
.quota small { font-size:12px; opacity:.85; }
main { flex:1; min-width:0; display:flex; flex-direction:column; }
header { height:72px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 34px; gap:16px; }
header h1 { font-size:20px; font-weight:600; }
header .sp { flex:1; }
.user { display:flex; align-items:center; gap:10px; font-size:14px; }
.user img { width:40px; height:40px; border-radius:50%; background:var(--tint); object-fit:cover; }
.user small { display:block; font-size:12px; }
.content { padding:30px 34px 40px; display:flex; flex-direction:column; gap:22px; }
.chao { font-size:40px; }
.grid6 { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.tool { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; position:relative; }
.tool:hover { border-color:var(--red); }
.tool .ic { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:26px; }
.tool h3 { font-size:17px; }
.tool p { font-size:14px; color:var(--mute); line-height:1.45; }
.sap { position:absolute; top:14px; right:14px; background:#FFF4CC; color:#8A6A00; font-size:12px; font-weight:700; border-radius:6px; padding:3px 8px; }
.card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }
.trong { text-align:center; padding:40px 20px; }
.trong .ic { font-size:40px; }
.trong h2 { font-size:28px; margin:10px 0 6px; }

/* Điện thoại: menu thành thanh dưới cùng */
@media (max-width: 860px) {
  .app { flex-direction:column; }
  aside { position:fixed; bottom:0; top:auto; left:0; right:0; width:auto; height:auto; flex-direction:row; padding:6px; border-right:none; border-top:1px solid var(--line); z-index:10; overflow-x:auto; gap:2px; scrollbar-width:none; }
  aside::-webkit-scrollbar { display:none; }
  aside .logo, aside .quota { display:none; }
  #menu { display:flex; gap:2px; }
  .nav { flex-direction:column; gap:2px; padding:6px 8px; font-size:11px; min-width:66px; text-align:center; }
  header { padding:0 16px; height:60px; }
  header h1 { font-size:18px; }
  .user span { display:none; }
  .content { padding:18px 16px 100px; }
  .chao { font-size:28px; }
  .grid6 { grid-template-columns:1fr 1fr; gap:10px; }
  .tool { padding:14px; }
  .tool .ic { width:42px; height:42px; font-size:21px; }
  .tool p { font-size:13px; }
  .sap { position:static; align-self:flex-start; }
  .quota-dt { display:flex !important; }
}
.quota-dt { display:none; align-items:center; gap:10px; background:var(--dred); color:#fff; border-radius:12px; padding:10px 14px; font-size:14px; }
.quota-dt b { font-family:"Oswald", sans-serif; font-size:20px; }

/* ===== Reel danh sách ===== */
.sap.moi { background:#E8F4EC; color:var(--green); }
.steps { display:flex; gap:10px; align-items:center; font-size:14px; color:var(--mute); flex-wrap:wrap; }
.steps .st { display:flex; align-items:center; gap:8px; }
.steps .st b { width:26px; height:26px; border-radius:50%; background:#E4E4E4; color:#777; display:grid; place-items:center; font-size:13px; }
.steps .st.on { color:var(--ink); font-weight:600; } .steps .st.on b { background:var(--red); color:#fff; }
.steps .st.ok b { background:var(--green); color:#fff; }
.steps .ln { width:36px; height:2px; background:#DDD; }
label.lb { font-size:13px; color:var(--mute); font-weight:600; display:block; margin-bottom:8px; text-transform:uppercase; letter-spacing:.4px; }
.input { width:100%; border:2px solid var(--red); border-radius:12px; padding:14px 16px; font:400 18px/1.3 inherit; font-family:inherit; background:#fff; color:var(--ink); }
.input.dam { font-weight:700; border-color:#DDD; font-size:17px; }
.input:focus, textarea:focus { outline:3px solid var(--tint); border-color:var(--red); }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { border:1px solid #DDD; border-radius:30px; padding:8px 16px; font:400 14px/1.2 inherit; font-family:inherit; background:#fff; cursor:pointer; color:var(--ink); }
.chip.on { border-color:var(--red); background:var(--tint); color:var(--red); font-weight:600; }
.hang-nut { display:flex; gap:10px; flex-wrap:wrap; }
.nho-nut { padding:9px 16px; align-self:flex-start; }
.ds-hai-cot { display:flex; gap:30px; align-items:flex-start; }
.ds-sua { flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; }
.ds-may { flex:none; display:flex; flex-direction:column; align-items:center; position:sticky; top:16px; }
.phone { width:290px; aspect-ratio:9/16; border-radius:26px; background:#111; padding:8px; box-shadow:0 18px 40px rgba(0,0,0,.25); }
.phone canvas, .phone video { width:100%; height:100%; border-radius:19px; display:block; object-fit:cover; background:#222; }
.ds-cho { height:100%; border-radius:19px; background:#fff; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:22px; text-align:center; }
.ds-cho .hf { font-size:24px; color:var(--red); }
.bar2 { height:8px; background:#EEE; border-radius:9px; overflow:hidden; } .bar2 span { display:block; height:100%; width:0; background:var(--red); }
.items { display:flex; flex-direction:column; gap:8px; }
.item { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px 8px 6px 12px; }
.item b { width:26px; height:26px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-size:13px; flex:none; }
.input.dam, .item textarea { resize:none; overflow:hidden; display:block; }
.item textarea { flex:1; min-width:0; width:auto; border:1px solid transparent; border-radius:8px; padding:8px; font:400 15px/1.3 inherit; font-family:inherit; color:var(--ink); background:transparent; }
.item .xoa { border:none; background:none; color:#BBB; font-size:14px; cursor:pointer; padding:6px; }
textarea { width:100%; border:1px solid #DDD; border-radius:10px; padding:12px; font:400 15px/1.5 inherit; font-family:inherit; color:var(--ink); resize:vertical; }
.done { background:#E8F4EC; color:var(--green); border-radius:12px; padding:12px 16px; font-weight:600; }
.note { background:#FFF8D6; border-left:5px solid var(--yel); border-radius:10px; padding:10px 12px; font-size:14px; }
button.btn:disabled { opacity:.6; cursor:wait; }
@media (max-width: 860px) {
  .ds-hai-cot { flex-direction:column-reverse; gap:18px; }
  .ds-hai-cot.b3 { flex-direction:column; }
  .ds-may { position:static; align-self:center; }
  .phone { width:230px; }
  .hang-nut .btn { flex:1 1 auto; }
}
.ds-nen { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ds-nen .mau { width:44px; height:44px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px #D0D0D0; cursor:pointer; padding:0; }
.ds-nen .mau.on { box-shadow:0 0 0 3px var(--red); }
.ds-chon-nen { margin-top:14px; display:flex; flex-direction:column; align-items:center; }
.ds-chon-nen .ds-nen { justify-content:center; max-width:330px; }
.ds-hang-nen { display:flex; align-items:center; gap:10px; margin-bottom:8px; width:100%; }
.ds-hang-nen small { width:74px; flex:none; font-size:12px; color:var(--mute); text-align:right; }
.ds-chon-nen { width:100%; max-width:380px; }
.ds-chon-nen .ds-nen { justify-content:flex-start; max-width:none; gap:7px; }
.ds-nen .mau { width:38px; height:38px; }
/* Chọn nền: 3 hàng, mỗi hàng đúng 1 dòng 6 ô, nhãn là biểu tượng */
.ds-hang-nen { gap:8px; margin-bottom:7px; }
.ds-hang-nen small { width:24px; font-size:18px; text-align:center; }
.ds-chon-nen .ds-nen { display:grid; grid-template-columns:repeat(6, minmax(0, 46px)); gap:7px; flex:1; }
.ds-nen .mau { width:100%; height:auto; aspect-ratio:1; }
.ds-nut-nen { display:flex; gap:8px; margin-top:6px; width:100%; }
.ds-nut-nen .btn { flex:1; padding:9px 8px; font-size:14px; cursor:pointer; white-space:nowrap; }
.ds-nut-nen .btn.chon { border-color:var(--red); background:var(--tint); color:var(--red); }
.ds-ghi { font-size:12px; margin-top:6px; text-align:center; display:block; }

/* Hồ sơ kênh, Kịch bản (24/10/2026) */
.input.nhe { border:1px solid #DDD; font-size:16px; padding:12px 14px; }
textarea.input { resize:none; overflow:hidden; display:block; }
.hs-form, .kb-ket { display:flex; flex-direction:column; gap:18px; }
.hs-form textarea, .kb-ket textarea { resize:none; overflow:hidden; display:block; }
.nhac-hs { display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink); border:2px dashed var(--red); background:var(--tint); }
.nhac-hs b { color:var(--red); }
.kb-phan { display:flex; flex-direction:column; gap:8px; }
.kb-phan label.lb { display:flex; align-items:center; gap:8px; margin-bottom:0; }
.kb-so { width:22px; height:22px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-size:12px; flex:none; }
.kb-td { display:flex; flex-direction:column; gap:8px; }
.kb-chon { display:flex; gap:12px; align-items:flex-start; text-align:left; border:1px solid #DDD; border-radius:12px; padding:12px 14px; background:#fff; font:600 16px/1.4 inherit; font-family:inherit; color:var(--ink); cursor:pointer; }
.kb-chon span { width:18px; height:18px; border-radius:50%; border:2px solid #BBB; flex:none; margin-top:3px; }
.kb-chon.on { border-color:var(--green); background:#F1F9F4; }
.kb-chon.on span { border-color:var(--green); background:radial-gradient(circle, var(--green) 0 45%, #fff 50%); }
.kb-bia { display:flex; flex-direction:column; gap:8px; }
.kb-bia .input.dam { font-weight:700; text-transform:uppercase; }
.kb-dem { font-size:14px; }
.kb-sang { flex-direction:row; align-items:center; justify-content:space-between; gap:16px; border-color:var(--red); }
@media (max-width: 860px) { .kb-sang { flex-direction:column; align-items:stretch; } .hang-nut .btn { flex:1 1 auto; } }
.nhac-hs.co { border:2px solid var(--green); background:#F1F9F4; }
.nhac-hs.co b { color:var(--green); }
/* Thương hiệu của tôi trong Reel danh sách (24/10) */
.ds-th{margin-top:14px;width:100%;display:flex;flex-direction:column;gap:8px;border-top:1px dashed #DDD;padding-top:12px}
.ds-th label.lb{margin-bottom:0}
.ds-vi-tri{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
.ds-vi-tri button{border:1px solid #DDD;background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
.ds-vi-tri button.on{border-color:var(--red);background:var(--tint);color:var(--red);font-weight:600}
.ds-th-bo{border:none;background:none;color:var(--mute);text-decoration:underline;font:inherit;font-size:13px;cursor:pointer;align-self:center}

/* Gói, thanh toán, số điện thoại, ý tưởng, quản trị (30/10/2026) */
.sdt-nen { position:fixed; inset:0; background:rgba(30,0,6,.6); z-index:50; display:grid; place-items:center; padding:16px; }
.sdt-hop { width:100%; max-width:420px; display:flex; flex-direction:column; gap:14px; }
.mg-luoi { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mg-goi { display:flex; flex-direction:column; gap:14px; position:relative; }
.mg-goi.noi { border:2px solid var(--red); }
.mg-goi .sap { position:static; align-self:flex-start; }
.mg-co { padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:15px; }
.mg-gia { display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.mg-chon { display:flex; justify-content:space-between; align-items:center; border:1px solid #DDD; border-radius:12px; padding:12px 16px; background:#fff; font:400 16px/1.2 inherit; font-family:inherit; color:var(--ink); cursor:pointer; }
.mg-chon b { font-family:"Oswald", sans-serif; font-size:20px; color:var(--red); }
.mg-chon.on { border:2px solid var(--red); background:var(--tint); }
.mg-tra { display:flex; flex-direction:column; gap:16px; border:2px solid var(--red); }
.mg-hai { display:flex; gap:24px; align-items:flex-start; }
.mg-qr { flex:none; width:240px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.mg-qr #mg-qr-anh { width:240px; min-height:240px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); border-radius:12px; }
.mg-qr svg { width:100%; height:auto; display:block; }
.mg-tt { flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.mg-tt label.lb { margin-bottom:2px; }
.mg-dong { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mg-nd { font-size:24px; color:var(--red); background:#FFF8D6; border-radius:8px; padding:4px 10px; }
.mg-cho { display:flex; align-items:center; gap:10px; color:var(--mute); font-size:14px; }
.mg-xoay { width:18px; height:18px; border:3px solid #EEE; border-top-color:var(--red); border-radius:50%; animation:xoay 1s linear infinite; flex:none; }
@keyframes xoay { to { transform:rotate(360deg); } }
.mg-xong { font-size:18px; }
.yt-ds { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.yt-the { display:flex; flex-direction:column; gap:8px; padding:18px; }
.yt-nguon { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#1F4E9A; text-transform:uppercase; letter-spacing:.3px; }
.yt-nguon i { width:20px; height:20px; border-radius:50%; background:#EAF0FA; display:grid; place-items:center; font-style:normal; }
.yt-chu { font-size:17px; line-height:1.4; }
.yt-the .btn { margin-top:auto; }
.qt-so { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; }
.qt-so .card { padding:14px; display:flex; flex-direction:column; gap:4px; }
.qt-so b { font-size:26px; }
.qt-form, .qt-gd { display:flex; flex-direction:column; gap:8px; }
.qt-hang { display:flex; gap:8px; flex-wrap:wrap; }
.qt-hang .input { flex:1 1 180px; width:auto; }
.qt-ds { display:flex; flex-direction:column; gap:10px; }
.qt-dau { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.qt-tt { color:#fff; font-size:12px; font-weight:700; border-radius:6px; padding:3px 8px; }
@media (max-width: 860px) {
  .mg-luoi, .yt-ds { grid-template-columns:1fr; }
  .mg-hai { flex-direction:column; align-items:center; }
  .mg-tt { width:100%; }
  .qt-so { grid-template-columns:1fr 1fr; }
}
/* Học theo video mẫu (30/10/2026) */
.hv-tep { display:flex; align-items:center; justify-content:center; min-height:90px; border:2px dashed var(--red); border-radius:14px; background:var(--tint); color:var(--red); font-weight:600; cursor:pointer; padding:14px; text-align:center; }
.hv-pt { display:flex; flex-direction:column; gap:12px; }
.hv-pt label.lb { margin-bottom:2px; }
.hv-ol { padding-left:22px; display:flex; flex-direction:column; gap:4px; }
.hv-goc { margin-top:8px; font-size:14px; color:var(--mute); white-space:pre-wrap; }
.hv-pt p { margin-bottom:6px; }
/* Bảng giá 4 gói, nâng cấp (30/10 tối) */
.mg-chon span { display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; }
.mg-chon b { display:flex; flex-direction:column; align-items:flex-end; }
.mg-chon small { font:400 12px/1.3 "Be Vietnam Pro", sans-serif; color:var(--mute); }
.mg-chon.noi { border:2px solid var(--red); }
.mg-tot { font-style:normal; background:var(--yel); color:#5A4600; font-size:11px; font-weight:700; border-radius:5px; padding:1px 6px; margin-left:6px; }
.mg-nc { display:flex; flex-direction:column; gap:12px; border:2px solid var(--yel); background:#FFFBEA; }
.mg-goi { max-width:640px; }
/* Nâng cao: Lịch 30 ngày, 1 chủ đề 10 kịch bản (30/10 tối) */
.nc-tieude { font-size:24px; margin-top:8px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.nc-tieude small { font:400 14px "Be Vietnam Pro", sans-serif; color:var(--mute); }
.l30-luoi { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.l30-o { display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; font:inherit; color:var(--ink); cursor:pointer; }
.l30-o:hover { border-color:var(--red); }
.l30-dau { display:flex; justify-content:space-between; width:100%; font-size:14px; }
.l30-dau small { color:var(--mute); }
.l30-tuyen { font-size:12px; font-weight:700; border-radius:6px; padding:2px 8px; }
.l30-td { font-size:15px; line-height:1.4; font-weight:600; }
.sr-ds { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sr-the { display:flex; flex-direction:column; gap:8px; padding:18px; }
@media (max-width: 860px) { .l30-luoi { grid-template-columns:1fr; } .sr-ds { grid-template-columns:1fr; } }

/* Tách nền ảnh */
.tn-kq { display:flex; flex-direction:column; gap:14px; }
.tn-xem { display:flex; justify-content:center; border-radius:12px; padding:10px;
  background:repeating-conic-gradient(#E9E9E9 0% 25%, #fff 0% 50%) 0 0 / 20px 20px; }
.tn-xem canvas { max-width:100%; max-height:60vh; height:auto; display:block; box-shadow:0 2px 12px rgba(0,0,0,.12); }
.tn-nen { display:flex; flex-wrap:wrap; gap:8px; }
.tn-nen button, .tn-nen-anh { width:62px; height:62px; border-radius:12px; border:2px solid #DDD; cursor:pointer; display:flex; align-items:flex-end; justify-content:center; padding:4px; font:inherit;
  background:repeating-conic-gradient(#E9E9E9 0% 25%, #fff 0% 50%) 0 0 / 12px 12px; }
.tn-nen button span, .tn-nen-anh span { font-size:10px; line-height:1.1; background:rgba(255,255,255,.85); border-radius:4px; padding:1px 3px; color:#333; }
.tn-nen-anh { background:#fff; align-items:center; border-style:dashed; border-color:var(--red); }
.tn-nen-anh span { color:var(--red); font-weight:600; font-size:11px; }
.tn-nen .on { border-color:var(--red); box-shadow:0 0 0 2px var(--tint); }
/* Ảnh AI (03/11/2026) */
.aa-buoc { display:flex; flex-direction:column; gap:12px; }
.aa-anh-vao { display:flex; flex-wrap:wrap; gap:10px; }
.aa-nho { position:relative; width:96px; height:96px; }
.aa-nho img { width:100%; height:100%; object-fit:cover; border-radius:12px; border:1px solid var(--line); }
.aa-nho button { position:absolute; top:-6px; right:-6px; width:26px; height:26px; border-radius:50%; border:none; background:var(--ink); color:#fff; cursor:pointer; font-size:12px; }
.aa-them-anh { width:96px; height:96px; min-height:0; padding:6px; font-size:14px; }
.aa-anh-vao .aa-them-anh:only-child { width:100%; min-height:90px; }
.aa-mau { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.aa-mau button { display:flex; flex-direction:column; align-items:center; gap:6px; border:2px solid #DDD; border-radius:14px; background:#fff; padding:14px 8px; cursor:pointer; font:600 14px/1.3 inherit; font-family:inherit; color:var(--ink); text-align:center; }
.aa-mau button i { font-style:normal; font-size:28px; }
.aa-mau button.on { border-color:var(--red); background:var(--tint); color:var(--red); }
.aa-chi-tiet { display:flex; flex-direction:column; gap:14px; }
.aa-chi-tiet summary { cursor:pointer; color:var(--red); font-weight:600; padding:4px 0; }
.aa-chi-tiet[open] > div { margin-top:14px; }
.aa-mau-ao { display:flex; flex-wrap:wrap; gap:8px; }
.aa-mau-ao button { width:58px; height:58px; border-radius:12px; border:2px solid #DDD; cursor:pointer; display:flex; align-items:flex-end; justify-content:center; padding:4px; background:#fff; font:inherit; }
.aa-mau-ao button span { font-size:10px; line-height:1.1; background:rgba(255,255,255,.85); border-radius:4px; padding:1px 3px; color:#333; }
.aa-mau-ao button.on { border-color:var(--red); box-shadow:0 0 0 2px var(--tint); }
.aa-kq { display:flex; flex-direction:column; gap:14px; }
.aa-lon { max-width:100%; max-height:70vh; object-fit:contain; border-radius:12px; align-self:center; box-shadow:0 2px 12px rgba(0,0,0,.12); }
.aa-cu { display:flex; gap:8px; flex-wrap:wrap; }
.aa-cu img { width:72px; height:72px; object-fit:cover; border-radius:10px; cursor:pointer; border:1px solid var(--line); }
@media (max-width: 860px) { .aa-mau { grid-template-columns:1fr 1fr; } }
/* Ảnh bìa (04/11/2026) */
.ab-khung { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:16px; align-items:start; }
.ab-xem { position:sticky; top:12px; display:flex; justify-content:center; }
.ab-xem canvas { max-width:100%; max-height:72vh; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.15); background:#eee; }
.ab-chon { display:flex; flex-direction:column; gap:14px; }
.ab-toi { display:flex; gap:8px; align-items:center; font-size:14px; margin-top:8px; }
@media (max-width:760px) { .ab-khung { grid-template-columns:1fr; } .ab-xem { position:static; } .ab-xem canvas { max-height:56vh; } }
/* Thanh chọn 4 kiểu Ảnh AI, luôn hiện trên cùng (04/11: chị thấy chữ "Các kiểu ảnh" khó nhìn) */
.aa-kieu-bar { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.aa-kieu-bar button { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; border:2px solid #E8D9A8; border-radius:12px; background:#FFF8DC; color:var(--ink); font:600 13px/1.25 inherit; font-family:inherit; cursor:pointer; text-align:center; }
.aa-kieu-bar button i { font-style:normal; font-size:22px; color:#B08500; }
.aa-kieu-bar button.on { background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 3px 10px rgba(200,16,46,.3); }
.aa-kieu-bar button.on i { color:#FFD400; }
.aa-kieu-bar button:not(.on) { animation:aa-nhay 1.6s ease-in-out 3; }
@keyframes aa-nhay { 50% { border-color:var(--red); box-shadow:0 0 0 3px rgba(200,16,46,.18); } }
@media (max-width:520px) { .aa-kieu-bar { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* Video giọng đọc AI (04/11/2026) */
.vg-chon-anh { display:flex; flex-direction:column; gap:12px; }
.vg-ds { display:flex; flex-direction:column; gap:12px; }
.vg-cau { display:flex; gap:14px; padding:14px; align-items:flex-start; }
.vg-anh { flex:none; width:96px; aspect-ratio:9/16; border-radius:10px; overflow:hidden; background:#F2F2F2; }
.vg-anh img { width:100%; height:100%; object-fit:cover; display:block; }
.vg-trong { height:100%; display:grid; place-items:center; text-align:center; font-size:12px; color:#999; padding:6px; }
.vg-than { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.vg-than textarea { resize:vertical; font-size:16px; }
.vg-canh { font-size:14px !important; padding:9px 12px !important; color:#555; }
.vg-dau { display:flex; align-items:center; gap:8px; }
.vg-dau b { width:26px; height:26px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-size:13px; }
.vg-dau .xoa { margin-left:auto; border:none; background:none; color:#BBB; font-size:15px; cursor:pointer; padding:4px 6px; }
.vg-lay { display:flex; gap:8px; flex-wrap:wrap; }
.vg-lay img { width:56px; height:56px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; }
.vg-lay img:hover { border-color:var(--red); }
.vg-tick { display:flex; gap:8px; align-items:center; font-size:15px; cursor:pointer; }
.vg-bia-chu { display:flex; flex-direction:column; gap:8px; }
@media (max-width:520px) { .vg-cau { padding:12px; gap:10px; } .vg-anh { width:72px; } }
.btn.vg-tai-nhieu { display:flex; width:fit-content; margin:6px 0 8px; border:2px dashed var(--red); color:var(--red); font-weight:700; }
.hv-tep.vg-tai-nhieu { font-size:17px; } .hv-tep.vg-tai-nhieu small { font-weight:400; font-size:14px; }
.vg-nho { font-size:14px; margin-bottom:6px; }
.vg-cot-anh { flex:none; display:flex; flex-direction:column; gap:6px; align-items:center; }
label.vg-anh { cursor:pointer; display:block; }
.vg-bo-anh { border:1px solid #DDD; background:#fff; color:#C8102E; border-radius:8px; font:600 12px/1 inherit; font-family:inherit; padding:6px 8px; cursor:pointer; }
.vg-hai-may { gap:18px; }
.vg-hai-may .phone { width:220px; }
@media (max-width:860px) { .vg-hai-may { flex-direction:row; flex-wrap:wrap; justify-content:center; position:static; } .vg-hai-may .phone { width:150px; } }
.steps .st.bam { cursor:pointer; } .steps .st.bam:hover { color:var(--red); text-decoration:underline; }
.vg-lui-tren { align-self:flex-start; border:none; background:none; color:var(--red); font:600 15px/1.2 inherit; font-family:inherit; cursor:pointer; padding:4px 0; }
.vg-bia-tu img.on { border-color:var(--red); }
.vg-kb { display:flex; flex-direction:column; gap:12px; border:2px solid var(--red); }
.vg-kb-td { font-size:24px; color:var(--red); }
.vg-kb-doan { font-size:17px; line-height:1.6; white-space:pre-wrap; background:#FCFCFC; border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.vg-hai-nut { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vg-hai-nut > .btn { width:100%; justify-content:center; text-align:center; margin:0; }
#vg-mo-dan.on { border-color:var(--red); color:var(--red); background:#fdecef; }
@media (max-width:560px) { .vg-hai-nut { grid-template-columns:1fr; } }
.vg-tu-kb:not([hidden]) { display:flex; flex-direction:column; gap:10px; border:2px solid var(--red); }
.vg-tu-kb textarea { resize:vertical; font-size:16px; }
/* thanh kéo tốc độ đọc, Video giọng đọc AI (05/11) */
.vg-toc { width:100%; accent-color:var(--red); height:28px; margin-top:4px; }
.vg-toc-nhan { display:flex; justify-content:space-between; font-size:13px; }
/* Giọng AI của tôi (05/11) */
.vg-gt { display:grid; gap:12px; }
.vg-gt-doc { background:var(--tint); border-radius:12px; padding:12px 14px; line-height:1.6; font-size:16px; margin:6px 0 8px; }
.vg-gt-ghi { width:100%; }
.vg-gt-ghi.dang { background:var(--ink); animation:vgNhay 1s infinite; }
@keyframes vgNhay { 50% { opacity:.75; } }
.vg-gt audio { width:100%; margin-top:8px; }
.vg-kb-sua { font-size:17px; line-height:1.6; overflow:hidden; resize:none; }

/* Kho kịch bản mẫu (06/11/2026) */
.km-ds { display:flex; flex-direction:column; gap:14px; }
.km-the { display:flex; flex-direction:column; gap:10px; }
.km-the h3 { font-size:19px; line-height:1.3; }
.km-the.km-an { opacity:.55; }
.km-dau { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-size:14px; }
.km-view { background:var(--red); color:#fff; border-radius:20px; padding:3px 10px; font-weight:700; }
.km-cc { background:#F2F2F2; border-radius:20px; padding:3px 10px; }
.km-ct { background:#FFF8D6; border-left:5px solid var(--yel); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.km-ct small { color:#8A6A00; font-weight:700; letter-spacing:.5px; }
.km-the details summary { cursor:pointer; color:var(--red); font-weight:600; font-size:15px; }
.km-the details p { margin-top:8px; font-size:15px; }
.km-khoa { display:flex; flex-direction:column; gap:4px; text-decoration:none; color:inherit; border:2px dashed var(--red); }
.km-nap summary { cursor:pointer; }
.km-form { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.km-form textarea { resize:vertical; }
.km-tep { cursor:pointer; }
.chips .chip small { color:var(--mute); margin-left:2px; }
.km-dg { background:#EEF7EE; border-left:5px solid #2E7D32; border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; font-size:15px; }
.km-dg small { color:#2E7D32; font-weight:700; letter-spacing:.5px; }