/* ============================================================
   LAYOUT - ticker, header, sub-nav, footer (khung chung moi trang)
   ============================================================ */

/* ===== TICKER ===== */
.ticker-bar{background:var(--aurora-bar);overflow:hidden;height:32px;display:flex;align-items:center}
.ticker-inner{flex:1;overflow:hidden;position:relative}
.ticker-track{display:flex;gap:0;animation:ticker 30s linear infinite;white-space:nowrap}
.ticker-item{color:rgba(255,255,255,.92);font-size:12px;font-weight:500;padding:0 32px;border-right:1px solid rgba(255,255,255,.2);flex-shrink:0}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== HEADER ===== */
.header{background:var(--aurora-bar);padding:10px 0;position:sticky;top:0;z-index:980;box-shadow:0 4px 18px rgba(245,35,58,.28)}
.header-main{display:flex;align-items:center;gap:10px}
.logo-link{display:flex;align-items:center;gap:9px;flex-shrink:0}
.logo-mark{
    width:34px;height:34px;border-radius:9px;background:#fff;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    box-shadow:0 3px 9px rgba(0,0,0,.16);
    transition:transform .2s;
}
.logo-link:hover .logo-mark{transform:translateY(-1px) rotate(-4deg)}
.logo-mark svg{display:block}
.logo-mark .lm-ph{fill:var(--red)}
.logo-word{font-size:21px;font-weight:500;color:#fff;letter-spacing:-.3px;line-height:1;white-space:nowrap}
.logo-word b{font-weight:800}
.btn-category{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.15);color:white;border:none;border-radius:var(--radius);padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;transition:background .2s}
.btn-category:hover{background:rgba(255,255,255,.25)}
.header-search{flex:1}
.search-form{display:flex;background:white;border-radius:50px;overflow:hidden;height:40px}
.search-form input{flex:1;border:none;outline:none;padding:0 18px;font-size:14px;font-family:inherit;color:var(--dark)}
.search-form button{background:none;border:none;padding:0 16px;cursor:pointer;font-size:18px;color:var(--gray-400)}
.header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.header-action-btn{display:flex;flex-direction:column;align-items:center;gap:2px;color:white;padding:5px 10px;border-radius:var(--radius);font-size:11px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .2s;position:relative;background:none;border:none}
.header-action-btn:hover{background:rgba(255,255,255,.15)}
.header-action-btn .icon{font-size:20px;line-height:1}
.cart-count{position:absolute;top:0;right:2px;background:#ff6b00;color:white;font-size:10px;font-weight:800;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--red)}
.btn-login{background:white;color:var(--red);border:none;border-radius:50px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;flex-shrink:0;font-family:inherit;transition:all .2s}
.btn-login:hover{background:#f5f5f5}

/* ===== SUB NAV ===== */
.sub-nav{background:var(--aurora-bar);border-top:1px solid rgba(255,255,255,.15);padding:0 14px;box-shadow:inset 0 40px 60px rgba(0,0,0,.18)}
.sub-nav-list{display:flex;overflow:hidden;max-height:36px}
.sub-nav-item{display:flex;align-items:center;gap:6px;padding:0 14px;height:36px;font-size:12px;color:rgba(255,255,255,.88);white-space:nowrap;border-right:1px solid rgba(255,255,255,.15);transition:background .15s}
.sub-nav-item:hover{background:rgba(255,255,255,.1)}
.sni-label{font-weight:800;font-size:11px}
.sni-name{font-weight:500}

/* ===== FOOTER ===== */
.footer{background:var(--aurora-night);color:rgba(255,255,255,.8);padding:40px 0 20px;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
.footer-brand .logo-text{font-size:20px;font-weight:800;color:white;margin-bottom:10px}
.footer-brand p{font-size:12px;line-height:1.8;opacity:.7}
.footer-col h4{font-size:13px;font-weight:700;color:white;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{font-size:12px;opacity:.7;transition:opacity .15s}
.footer-col ul li a:hover{opacity:1;color:var(--red)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;text-align:center;font-size:12px;opacity:.6}

/* ===== FOOTER (ban cap nhat - ghi de phia tren) ===== */
.footer{background:var(--aurora-night);color:rgba(255,255,255,.8);padding:36px 0 20px;margin-top:20px;border-top:3px solid transparent;border-image:var(--aurora) 1;position:relative}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:120px;background:radial-gradient(600px 120px at 20% 0%, rgba(245,35,58,.35), transparent 70%),radial-gradient(600px 120px at 80% 0%, rgba(255,75,94,.30), transparent 70%);pointer-events:none}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-bottom:28px}
.footer-logo{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.footer h4{font-size:13px;font-weight:700;color:white;margin-bottom:12px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer ul li{margin-bottom:8px}
.footer ul li a{font-size:12px;opacity:.7;transition:opacity .15s}
.footer ul li a:hover{opacity:1;color:var(--red)}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);
    padding-top:18px;
    display:flex;justify-content:space-between;
    font-size:12px;opacity:.6;flex-wrap:wrap;gap:8px;
}