/* ====== HEADER / TOPBAR ====== */
.yn-header{background:linear-gradient(90deg,#7c3aed,#2563eb);color:#fff}
.yn-header .container{position:relative}
.yn-topbar{display:flex;align-items:center;gap:12px;min-height:60px}
.yn-brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:18px}
.yn-brand i{font-size:18px}

.yn-nav-toggle{display:none;background:transparent;border:0;padding:6px 4px;margin-right:4px}
.yn-nav-toggle span{display:block;width:20px;height:2px;background:#fff;margin:4px 0;transition:all .2s}

.yn-search{flex:1 1 auto;display:flex;align-items:center;gap:8px;max-width:720px;margin-left:6px}
.yn-search .form-control{height:40px;border:0;border-radius:999px;padding:0 14px}
.yn-search .btn{height:40px;border-radius:999px;padding:0 14px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)}
.yn-search .btn:hover{background:rgba(255,255,255,.18)}

.yn-actions{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.yn-actions .btn{border-radius:999px;padding:7px 12px}
.yn-actions .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.35)}
.yn-actions .btn-ghost:hover{background:rgba(255,255,255,.12)}
.yn-actions .btn-primary{background:#2563eb;border:1px solid #1d4ed8;color:#fff}
.yn-actions .btn-primary:hover{background:#1d4ed8}

.yn-user{position:relative}
.yn-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;vertical-align:middle}
.yn-user-btn{display:flex;align-items:center;gap:8px;color:#fff}
.yn-user-name{max-width:140px}

/* ====== SUB NAV ====== */
.yn-subnav{background:#0b1324}
.yn-subnav .container{display:flex}
.yn-subnav-list{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:8px 0}
.yn-subnav-list>li>a{color:#e5e7eb;display:inline-block;padding:8px 8px}
.yn-subnav-list>li>a:hover{color:#fff}
.caret{margin-left:6px}
.has-dropdown{position:relative}

/* Dropdown & Mega */
.yn-dropdown{position:absolute;top:100%;left:0;min-width:220px;background:#fff;color:#0f172a;border:1px solid #e5e7eb;border-radius:10px;padding:8px 0;box-shadow:0 10px 25px rgba(0,0,0,.12);display:none;z-index:50}
.yn-dropdown--user{min-width:230px}
.yn-menu{list-style:none;margin:0;padding:6px 0}
.yn-menu>li>a{display:block;padding:8px 14px;color:#0f172a}
.yn-menu>li>a:hover{background:#f7faff;color:#2563eb}

/* Mega (không full width, chỉ theo nội dung) */
.yn-dropdown--mega{padding:10px}
.yn-mega{width:640px;max-width:calc(100vw - 40px)}
.yn-mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px;list-style:none;margin:0;padding:0}
.yn-mega-grid>li>a{display:block;padding:7px 10px;border-radius:6px;color:#0f172a}
.yn-mega-grid>li>a:hover{background:#f7faff;color:#2563eb}

/* ====== DRAWER (mobile) ====== */
.yn-drawer{position:fixed;inset:0;z-index:100;pointer-events:none}
.yn-drawer__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);opacity:0;transition:opacity .2s}
.yn-drawer__inner{position:absolute;top:0;bottom:0;left:0;width:86%;max-width:360px;background:#fff;transform:translateX(-100%);transition:transform .2s;box-shadow:4px 0 18px rgba(0,0,0,.2)}
.yn-drawer.open .yn-drawer__inner{transform:none}
.yn-drawer.open .yn-drawer__backdrop{opacity:1}
.yn-drawer.open{pointer-events:auto}
.yn-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #e5e7eb;font-weight:700}
.yn-drawer-close{background:transparent;border:0;font-size:18px}

.yn-drawer-auth,.yn-drawer-nav{list-style:none;margin:0;padding:10px 6px}
.yn-drawer-auth li,.yn-drawer-nav li{border-bottom:1px solid #f1f5f9}
.yn-drawer-auth a,.yn-drawer-nav a{display:block;padding:10px 12px;color:#0f172a}
.yn-drawer-auth a:hover,.yn-drawer-nav a:hover{background:#f7faff;color:#2563eb}
.yn-drawer-user{display:flex;gap:10px;align-items:center;padding:10px 12px}

.yn-collapsible{border-bottom:1px solid #f1f5f9}
.yn-collapsible-btn{width:100%;text-align:left;background:#fff;border:0;padding:12px}
.yn-collapsible-panel{display:none;padding:8px 12px}
.yn-pill-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.yn-pill-list li a{display:block;padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;color:#0f172a}

/* ====== STATES ====== */
[data-yn-dropdown].open>.yn-dropdown{display:block}

/* ====== RESPONSIVE ====== */
@media (max-width: 991px){
    .yn-actions{display:none}
    .yn-nav-toggle{display:inline-block}
    .yn-mega{width:520px}
}
@media (max-width: 767px){
    .yn-subnav{display:none}
    .yn-search{order:3;width:100%}
    .yn-mega{width:420px}
}