/* VIGO — App-shell SaaS (khu đăng nhập): sidebar desktop / bottom-nav mobile. */

:root{--joy-blue:#2B7FFF;--joy-green:#17B26A;--joy-red:#F5474B;--joy-purple:#7C5CFC;--joy-grad:linear-gradient(135deg,#2B7FFF,#7C5CFC)}
body.vgapp-body{background:var(--sand)}
.vgapp{display:flex;min-height:100vh}

/* Sidebar */
.vgapp-side{width:248px;flex:none;background:linear-gradient(180deg,#0A1D33,#0F2A47);color:#B7C5D5;display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh}
.vgapp-logo{display:flex;align-items:center;gap:10px;padding:4px 8px 22px;color:#fff;font-weight:800;font-size:1.22rem;letter-spacing:-.04em;text-decoration:none}
.vgapp-lm{width:34px;height:34px;border-radius:9px;background:linear-gradient(140deg,#0F2A47,#16456F);position:relative;overflow:hidden;display:grid;place-items:center;flex:none}
.vgapp-lm::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:var(--grad-amber)}
.vgapp-lm span{color:#fff;font-weight:800;z-index:1}
.vgapp-logo em{font-style:normal;font-weight:400;color:#8FA2B7;font-size:.95rem}
.vgapp-nav{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.vgapp-nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;color:#B7C5D5;text-decoration:none;font-weight:600;font-size:.96rem}
.vgapp-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.vgapp-nav a.on{background:var(--grad-amber);color:#3A2402}
.vgapp-nav svg{flex:none}
.vgapp-sfoot{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding-top:12px}
.vgapp-user{display:flex;align-items:center;gap:11px;padding:8px;border-radius:11px;text-decoration:none}
.vgapp-user:hover{background:rgba(255,255,255,.06)}
.vgapp-av{width:38px;height:38px;border-radius:50%;background:var(--joy-grad);display:grid;place-items:center;color:#fff;font-weight:700;flex:none;overflow:hidden}
.vgapp-av img{width:100%;height:100%;object-fit:cover}
.vgapp-user b{color:#fff;font-size:.9rem;display:block}.vgapp-user small{color:#8FA2B7;font-size:.76rem}

/* Main */
.vgapp-main{flex:1;min-width:0;display:flex;flex-direction:column}
.vgapp-top{display:flex;align-items:center;gap:14px;padding:16px 30px;background:var(--paper);border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:10}
.vgapp-top .mlogo{display:none;align-items:center;gap:8px;font-weight:800;color:var(--ink)}
.vgapp-top h1{font-size:1.28rem;letter-spacing:-.02em}
.vgapp-ibtn{margin-left:auto;width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;color:var(--tx-2);position:relative;flex:none}
.vgapp-dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--joy-red)}
.vgapp-content{padding:26px 30px 40px;flex:1}
.vgapp-content.is-bleed{padding:0}
.vgapp-content.is-bleed .wrap{max-width:1200px;padding-left:32px;padding-right:32px}
@media(max-width:600px){.vgapp-content.is-bleed .wrap{padding-left:18px;padding-right:18px}}

/* Segmented (Free/VIP) */
.vgseg{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:5px;margin-bottom:22px}
.vgseg a{padding:9px 18px;border-radius:9px;font-weight:600;font-size:.92rem;color:var(--tx-2);text-decoration:none}
.vgseg a.on{background:var(--ink);color:#fff}
.vgsec-t{display:flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:700;margin:6px 0 16px}
.vgtag-f{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--joy-green);color:#fff}
.vgtag-p{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--amber-deep);color:#fff}

/* Course/tool cards — lưới 3 cột, banner lớn */
.vggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:36px}
.vgcard{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.vgcard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(15,42,71,.45)}
.vgthumb{height:180px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.15rem;letter-spacing:.02em;position:relative;text-decoration:none}
.vgthumb.has-img{overflow:hidden}
.vgthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Banner công cụ cao hơn để poster hiện rõ */
.vgcard.vgtool .vgthumb{height:230px}
@media(max-width:600px){.vgcard.vgtool .vgthumb{height:200px}}
.vgthumb .pill{position:absolute;top:10px;left:10px;z-index:2;font-size:.66rem;font-weight:700;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.92);color:var(--ink)}
.vgprog{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.25)}
.vgprog i{display:block;height:100%;background:var(--joy-green)}
.vgcb{padding:15px 17px 17px;display:flex;flex-direction:column;gap:9px;flex:1}
.vgcb h3{font-size:1.02rem;line-height:1.35}
.vglearn{display:flex;align-items:center;gap:7px;color:var(--tx-2);font-size:.82rem;font-weight:600}
.vgcf{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px}
.vgcard .btn{margin-top:auto}
/* Màn vừa: 2 cột */
@media(min-width:861px) and (max-width:1180px){.vggrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Empty state */
.vgempty{text-align:center;padding:60px 24px;background:var(--paper);border:1px dashed var(--line);border-radius:20px}
.vgempty .ic{width:64px;height:64px;border-radius:18px;background:var(--sand);display:grid;place-items:center;margin:0 auto 16px;color:var(--tx-3)}

/* Tài khoản: sub-tabs + form + history */
.acc-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:24px}
.acc-tabs a{padding:11px 16px;font-weight:600;color:var(--tx-2);border-bottom:2.5px solid transparent;margin-bottom:-1px;text-decoration:none;font-size:.94rem}
.acc-tabs a.on{color:var(--ink);border-bottom-color:var(--joy-blue)}
.acc-form{max-width:560px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px}
.acc-form label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px}
.acc-form input{width:100%;padding:12px 14px;border:1.6px solid var(--line);border-radius:10px;font:inherit;background:var(--paper)}
.acc-form input:focus{outline:none;border-color:var(--joy-blue);box-shadow:0 0 0 4px rgba(43,127,255,.14)}
.acc-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.acc-ava{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.acc-ava .pic{width:64px;height:64px;border-radius:50%;background:var(--joy-grad);display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.2rem;overflow:hidden}
.acc-ava .pic img{width:100%;height:100%;object-fit:cover}
.acc-msg{padding:12px 15px;border-radius:11px;font-weight:500;margin-bottom:14px}
.acc-msg.ok{background:var(--teal-soft);color:var(--teal-deep)}
.acc-msg.er{background:#FDEBEB;color:#B4322B}
.acc-sub{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-deep);margin:26px 0 12px}
.htable{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.htable th,.htable td{padding:13px 16px;text-align:left;font-size:.9rem;border-bottom:1px solid var(--line-soft)}
.htable th{background:var(--sand);font-weight:700}
.htable tr:last-child td{border-bottom:none}
.hbadge{font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:20px}
.hbadge.paid{background:var(--teal-soft);color:var(--teal-deep)}
.hbadge.pending{background:#FFF6E6;color:var(--amber-deep)}
.noti{display:flex;gap:12px;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-bottom:10px}
.noti .nd{width:38px;height:38px;border-radius:11px;background:var(--amber-soft);color:var(--amber-deep);display:grid;place-items:center;flex:none}

/* Footer app — thanh cố định bám đáy, full-width, mọi trang */
.vgapp-foot{padding:18px 30px;border-top:1px solid var(--line-soft);background:var(--paper);display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;font-size:.82rem;color:var(--tx-3)}
.vgapp-foot .vgfoot-nav{display:flex;gap:18px;flex-wrap:wrap}
.vgapp-foot a{color:var(--tx-2);font-weight:600;text-decoration:none}
.vgapp-foot a:hover{color:var(--ink)}
.vgapp-foot span{margin-left:auto}
@media(max-width:860px){.vgapp-foot{padding:16px}.vgapp-foot span{margin-left:0;width:100%;margin-top:2px}}

/* Bottom nav (mobile) */
.vgapp-bottom{display:none;position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:20}
.vgapp-bottom .r{display:flex;justify-content:space-around}
.vgapp-bottom a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px;color:var(--tx-3);text-decoration:none;font-size:.66rem;font-weight:600}
.vgapp-bottom a.on{color:var(--amber-deep)}

/* Cụm nút góc trên phải (chuông + giỏ + menu) */
.vgapp-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.vgapp-top .mlogo{white-space:nowrap}
.vgm-only{display:none}
/* Menu 3 gạch (mobile): chứa Đăng nhập/Đăng ký hoặc tài khoản */
.vgapp-menu{position:absolute;top:100%;right:16px;margin-top:6px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -18px rgba(15,42,71,.4);min-width:210px;padding:6px;z-index:120}
.vgapp-menu[hidden]{display:none}
.vgapp-menu a{display:block;padding:11px 14px;border-radius:9px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem}
.vgapp-menu a:hover{background:var(--sand)}
.vgmenu-hi{display:block;padding:10px 14px 6px;color:var(--tx-3);font-size:.82rem;border-bottom:1px solid var(--line-soft);margin-bottom:4px}
.vgmenu-hi b{color:var(--ink)}
/* Nút giỏ tròn (FAB) góc dưới-phải — chỉ mobile, khi có hàng */
.vgcart-fab{display:none;position:fixed;right:16px;bottom:78px;z-index:75;width:54px;height:54px;border-radius:50%;background:var(--grad-amber);color:#3A2402;align-items:center;justify-content:center;box-shadow:0 12px 28px -8px rgba(219,130,20,.6);text-decoration:none}
.vgcart-fab[hidden]{display:none!important}
.vgcart-fab .vgcart-badge{top:-2px;right:-2px}
@media(max-width:860px){
	.vgd-only{display:none!important}
	.vgm-only{display:grid}
	.vgcartbar{display:none!important}
	.vgcart-fab{display:flex}
}
/* Icon giỏ + badge số lượng */
.vgapp-ibtn{position:relative}
.vgcart-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--joy-red);color:#fff;font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.vgcart-badge[hidden]{display:none}

/* Thẻ khóa: 2 nút (Giỏ + Chi tiết) */
.vgcard-btns{display:flex;gap:8px;margin-top:auto}
.vgcard-btns .btn{flex:1;margin-top:0}
.vg-addcart.added{background:var(--joy-green);color:#fff}

/* Thanh giỏ hàng nổi đáy (kiểu Namecheap) */
.vgcartbar{position:fixed;left:248px;right:0;bottom:0;z-index:70;background:linear-gradient(180deg,#123A5F,#0F2A47);color:#fff;box-shadow:0 -10px 30px -14px rgba(0,0,0,.5)}
.vgcartbar[hidden]{display:none}
.vgcartbar-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 30px;flex-wrap:wrap}
.vgcartbar-info{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:500}
.vgcartbar-info b{color:#FFD9A6;font-weight:800}
.vgcartbar-act{display:flex;gap:10px}
.vgcartbar-act .btn-line{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.vgcartbar-act .btn-line:hover{background:rgba(255,255,255,.12)}
@media(max-width:860px){.vgcartbar{left:0;bottom:60px}.vgcartbar-in{padding:10px 16px}.vgcartbar-act .btn{padding:8px 12px}}

/* ===== Khóa học (chi tiết + trình học) trong app-shell ===== */
.crs-back{display:inline-flex;align-items:center;gap:6px;color:var(--tx-2);font-weight:600;font-size:.9rem;text-decoration:none;margin-bottom:16px}
.crs-back:hover{color:var(--ink)}
.crs-head{border-radius:18px;padding:26px 28px;color:#fff;margin-bottom:22px;position:relative;overflow:hidden}
.crs-head::after{content:"";position:absolute;inset:0;background:rgba(9,20,34,.28)}
.crs-head>*{position:relative;z-index:1}
.crs-head .k{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:8px}
.crs-head h2{font-size:1.7rem;line-height:1.22;letter-spacing:-.02em;color:#fff}
.crs-prog{display:flex;align-items:center;gap:12px;margin-top:18px}
.crs-prog .bar{flex:1;max-width:340px;height:8px;border-radius:20px;background:rgba(255,255,255,.28);overflow:hidden}
.crs-prog .bar i{display:block;height:100%;background:var(--joy-green)}
.crs-prog b{font-size:1rem}.crs-prog span{color:rgba(255,255,255,.85);font-size:.9rem}
.crs-meta{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;margin-top:16px;color:rgba(255,255,255,.92);font-weight:600;font-size:.92rem}
.crs-vip{background:var(--grad-amber);color:#3A2402;padding:5px 13px;border-radius:20px;font-size:.82rem;font-weight:700}
.crs-vip.is-free{background:var(--joy-green);color:#fff}

.crs-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.crs-main{min-width:0}
.crs-lt{font-size:1.28rem;margin-bottom:14px;letter-spacing:-.01em}
.crs-lead{font-size:1.02rem;color:var(--tx-2);line-height:1.65;max-width:62ch}
.crs-learners{display:flex;align-items:center;gap:8px;color:var(--tx-2);font-weight:600;margin-top:14px}
.crs-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.crs-note{color:var(--tx-2);font-weight:600;font-size:.9rem;align-self:center}
.crs-video{margin-top:28px;border-radius:16px;overflow:hidden}
.crs-desc{margin-top:32px}

/* Cột nội dung khóa (danh sách bài) */
.crs-side{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;position:sticky;top:86px}
.crs-side-h{font-weight:700;font-size:1rem;margin:2px 4px 12px}
.crs-side .mod{margin-bottom:10px}
.crs-side .mod:last-child{margin-bottom:0}

@media(max-width:860px){
	.vgapp-side{display:none}
	.vgapp-top .mlogo{display:flex}.vgapp-top h1{display:none}
	.vgapp-content{padding:20px 16px 26px}
	.vggrid{grid-template-columns:1fr}
	.acc-row2{grid-template-columns:1fr}
	.vgapp-bottom{display:block}
	.htable{display:block;overflow-x:auto}
	.crs-grid{grid-template-columns:1fr}
	.crs-side{position:static;order:2}
	.crs-head h2{font-size:1.4rem}
}