/* ============================================================
   main.css — Trang chủ DILO
   Palette trung tính, dẫn dắt vào 2 vibe riêng của activity
   ============================================================ */

/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #0e0e0e;
    --surface:   #161616;
    --border:    rgba(255,255,255,0.08);
    --text:      #e8e8e8;
    --muted:     rgba(255,255,255,0.45);
    --club-r:    #d14828;
    --club-l:    #ff4a11;
    --ws-r:      #8d2d2b;
    --ws-l:      #e19e37;
    --radius:    16px;
    --header-h:  64px;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0; padding: 0;
    overflow-x: hidden;
    -webkit-user-select: none;
    user-select: none;
}

a { color: inherit; text-decoration: none; }

/* ============================================================
   HEADER
   ============================================================ */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    height: var(--header-h);
    background: rgba(14,14,14,0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 999;
    transition: background 0.3s;
}

header.scrolled {
    background: rgba(14,14,14,0.96);
    border-bottom-color: rgba(255,255,255,0.12);
}

.header-date {
    position: absolute;
    left: 24px;
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--muted);
    text-transform: uppercase;
    font-family: 'Segoe UI', monospace;
    pointer-events: none;
}

.logo { height: 36px; width: auto; object-fit: contain; cursor: pointer; }

/* Auth buttons (thay hamburger cho trang chủ) */
.header-auth {
    position: absolute;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-login {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    font-family: 'League Gothic', sans-serif;
    letter-spacing: 0.5px;
    font-size: 16px;
}
.btn-login:hover { border-color: rgba(255,255,255,0.7); color: #fff; }

.btn-register {
    background: #fff;
    border: none;
    border-radius: 50px;
    padding: 8px 22px;
    font-size: 16px;
    font-weight: 400;
    color: #0e0e0e;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'League Gothic', sans-serif;
    letter-spacing: 0.5px;
}
.btn-register:hover { background: #e8e8e8; transform: scale(1.02); }

/* User info khi đã đăng nhập */
.header-user {
    position: absolute;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-user-name {
    font-size: 14px;
    color: var(--muted);
    font-family: 'League Gothic', sans-serif;
    font-size: 18px;
    letter-spacing: 0.3px;
}

.btn-logout {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 14px;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    font-family: inherit;
}
.btn-logout:hover { border-color: rgba(255,255,255,0.5); color: var(--text); }

/* Hamburger (mobile) */
.menu-toggle {
    display: none;
    position: absolute;
    right: 20px;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 1001;
}
.menu-toggle span { width: 28px; height: 2.5px; background-color: var(--muted); border-radius: 2px; transition: 0.3s; }

/* Side menu */
.side-menu {
    height: 100vh;
    width: 260px;
    position: fixed;
    top: 0; right: -260px;
    background-color: #111;
    transition: right 0.3s ease;
    z-index: 1005;
    padding-top: 80px;
}
.side-menu.active { right: 0; }
.side-menu a {
    padding: 14px 28px;
    font-family: 'League Gothic', sans-serif;
    font-size: 28px;
    color: #cccccc;
    display: block;
    transition: 0.2s;
}
.side-menu a:hover { background-color: #1a1a1a; color: #fff; }
.close-btn { position: absolute; top: 12px; right: 20px; font-size: 34px; color: #fff; cursor: pointer; }

/* ── USER SEARCH trong side menu ── */
.menu-search {
    display: flex; gap: 6px; margin: 16px 28px 8px;
    box-sizing: border-box;
}
.menu-search input {
    flex: 1; min-width: 0; background: #1d1d1d; border: 1px solid #333;
    color: #fff; padding: 10px 12px; border-radius: 8px;
    font-size: 14px; font-family: -apple-system, sans-serif; outline: none;
}
.menu-search input::placeholder { color: #777; }
.menu-search input:focus { border-color: #d14828; }
.menu-search button {
    background: #d14828; border: none; border-radius: 8px;
    width: 42px; flex-shrink: 0; cursor: pointer; font-size: 15px; color: #fff;
}
.menu-search button:hover { background: #b83d20; }

.menu-search-results { margin: 0 28px; }
.search-result-item {
    display: flex !important; align-items: center; gap: 11px;
    padding: 10px 12px !important; font-size: 14px !important;
    font-family: -apple-system, sans-serif !important;
    background: #1a1a1a; border-radius: 8px; margin-bottom: 6px;
    color: #eee !important; text-decoration: none;
}
.search-result-item:hover { background: #262626 !important; }
.res-avatar {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.res-initial {
    background: #d14828; color: #fff; display: flex;
    align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
}
.res-info { min-width: 0; }
.res-name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.res-id { font-size: 11px; color: #888; font-family: monospace; }
.search-loading, .search-empty {
    color: #888; font-size: 13px; padding: 10px 12px;
    font-family: -apple-system, sans-serif;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--header-h) + 40px) 24px 60px;
    position: relative;
    overflow: hidden;
}

/* ambient glow blobs */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}
.hero-blob-club {
    width: 600px; height: 600px;
    background: radial-gradient(circle, #ff4a11, transparent 70%);
    top: -120px; right: -80px;
}
.hero-blob-ws {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #e19e37, transparent 70%);
    bottom: -80px; left: -100px;
}

.hero-eyebrow {
    font-family: 'Segoe UI', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 20px;
    position: relative; z-index: 1;
    opacity: 0;
    animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.1s forwards;
}

.hero-title {
    font-family: 'League Gothic', sans-serif;
    font-size: clamp(52px, 9vw, 120px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.5px;
    color: #fff;
    position: relative; z-index: 1;
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.25s forwards;
}

.hero-title em {
    font-style: normal;
    background: linear-gradient(90deg, var(--club-l), var(--ws-l));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-sub {
    font-size: clamp(15px, 1.8vw, 19px);
    color: var(--muted);
    line-height: 1.65;
    max-width: 520px;
    position: relative; z-index: 1;
    margin-bottom: 52px;
    opacity: 0;
    animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.4s forwards;
}

/* Scroll cue */
.scroll-cue {
    position: absolute;
    bottom: 28px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0;
    animation: fadeIn 1s ease 1.4s forwards;
    z-index: 1;
}
.scroll-cue span {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}
.scroll-cue-line {
    width: 1px; height: 36px;
    background: linear-gradient(to bottom, var(--muted), transparent);
    animation: scrollPulse 1.8s ease infinite;
}
@keyframes scrollPulse {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
    50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
    51%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ============================================================
   ACTIVITY SECTION
   ============================================================ */
.activities-section {
    padding: 80px 24px 100px;
    max-width: 1100px;
    margin: 0 auto;
}

.section-label {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.activity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* --- CARD CHUNG --- */
.activity-card {
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 480px;
    border: 1px solid var(--border);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s;
    text-decoration: none;
    color: inherit;
}
.activity-card:hover { transform: translateY(-6px); }

/* Background + overlay */
.card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.activity-card:hover .card-bg { transform: scale(1.04); }

.card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: opacity 0.3s;
}

/* --- CARD CLUB (neon cam/đen) --- */
.card-club .card-bg {
    background-image: url('../assets/images/bar2.png');
}
.card-club .card-overlay {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.92) 0%,
        rgba(0,0,0,0.5) 45%,
        rgba(20,8,0,0.15) 100%
    );
}
.card-club:hover { box-shadow: 0 0 40px 4px rgba(255,74,17,0.3), 0 20px 60px rgba(0,0,0,0.5); }
.card-club:hover .card-overlay {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.95) 0%,
        rgba(209,72,40,0.25) 60%,
        rgba(0,0,0,0.1) 100%
    );
}

/* --- CARD WS (be/đỏ nâu) --- */
.card-ws .card-bg {
    background-image: url('../assets/images/ws.jpg');
}
.card-ws .card-overlay {
    background: linear-gradient(
        to top,
        rgba(30,10,10,0.93) 0%,
        rgba(60,20,15,0.45) 50%,
        rgba(0,0,0,0.1) 100%
    );
}
.card-ws:hover { box-shadow: 0 0 40px 4px rgba(141,45,43,0.35), 0 20px 60px rgba(0,0,0,0.4); }

/* --- CARD COMING SOON --- */
.card-soon .card-bg {
    background: var(--surface);
}
.card-soon {
    background: var(--surface);
    border: 1px dashed rgba(255,255,255,0.12);
    cursor: default;
}
.card-soon:hover { transform: none; box-shadow: none; }
.card-soon-inner {
    position: absolute;
    inset: 0; z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.soon-icon {
    font-size: 40px;
    opacity: 0.3;
}
.soon-text {
    font-family: 'League Gothic', sans-serif;
    font-size: 28px;
    color: var(--muted);
    letter-spacing: 1px;
}
.soon-sub { font-size: 13px; color: rgba(255,255,255,0.25); }

/* --- CARD BODY --- */
.card-body {
    position: relative;
    z-index: 2;
    padding: 28px;
}

.card-tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 50px;
    margin-bottom: 12px;
    font-weight: 600;
}
.card-club .card-tag {
    background: rgba(255,74,17,0.15);
    color: #ff7043;
    border: 1px solid rgba(255,74,17,0.3);
}
.card-ws .card-tag {
    background: rgba(225,158,55,0.12);
    color: #e8b060;
    border: 1px solid rgba(225,158,55,0.25);
}

.card-title {
    font-family: 'League Gothic', sans-serif;
    font-size: clamp(38px, 4vw, 54px);
    font-weight: 400;
    line-height: 1;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}
.card-club .card-title { text-shadow: 0 0 30px rgba(255,74,17,0.4); }
.card-ws .card-title { text-shadow: 0 0 30px rgba(141,45,43,0.5); }

.card-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    line-height: 1.55;
    margin-bottom: 22px;
    max-width: 320px;
}

.card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'League Gothic', sans-serif;
    font-size: 20px;
    letter-spacing: 0.5px;
    padding: 10px 24px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.card-club .card-cta {
    background: #ff4a11;
    color: #fff;
}
.card-club .card-cta:hover {
    transform: scale(1.03);
    box-shadow: 0 0 16px rgba(255,74,17,0.6), 0 4px 20px rgba(0,0,0,0.3);
}
.card-ws .card-cta {
    background: #8d2d2b;
    color: #fff;
}
.card-ws .card-cta:hover {
    transform: scale(1.03);
    box-shadow: 0 0 16px rgba(141,45,43,0.6), 0 4px 20px rgba(0,0,0,0.3);
}

/* Mini stats trong card */
.card-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.card-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.card-meta-item strong {
    font-family: 'League Gothic', sans-serif;
    font-size: 26px;
    font-weight: 400;
    color: #fff;
}
.card-meta-item span {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ============================================================
   WHY DILO — giới thiệu nhanh
   ============================================================ */
.why-section {
    padding: 80px 24px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.why-title {
    font-family: 'League Gothic', sans-serif;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 400;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1;
}

.why-sub {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 60px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.why-item {
    padding: 36px 28px;
    background: var(--surface);
    text-align: left;
    transition: background 0.2s;
}
.why-item:hover { background: #1c1c1c; }

.why-item-icon {
    font-size: 28px;
    margin-bottom: 16px;
    display: block;
}
.why-item-title {
    font-family: 'League Gothic', sans-serif;
    font-size: 24px;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}
.why-item-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 32px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-logo { height: 32px; width: auto; opacity: 0.8; }

.footer-copy {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.3px;
}

.footer-links {
    display: flex;
    gap: 24px;
}
.footer-links a {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    transition: color 0.2s;
}
.footer-links a:hover { color: rgba(255,255,255,0.8); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .activity-grid { grid-template-columns: 1fr; }
    .activity-card { min-height: 380px; }
    .why-grid { grid-template-columns: 1fr; }
    .card-soon { min-height: 180px; }
}

@media (max-width: 640px) {
    .header-date { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; font-size: 10px; left: 12px; }
    .header-date__sep { display: none; }
    .header-auth { gap: 8px; }
    .btn-login { padding: 7px 14px; font-size: 14px; }
    .btn-register { padding: 7px 14px; font-size: 14px; }

    .hero-title { font-size: clamp(44px, 13vw, 80px); }
    .hero-sub { font-size: 14px; }
    .activities-section { padding: 50px 16px 70px; }
    .card-body { padding: 20px; }
    .card-title { font-size: 36px; }
    .why-section { padding: 50px 16px; }
    .site-footer { flex-direction: column; text-align: center; }
    .footer-links { justify-content: center; }
}

/* ============================================================
   TRANG CHỦ (index) — tách từ <style> inline
   ============================================================ */
    /* ===== Trang chủ nền trắng — chỉ áp dụng cho index (body.home) ===== */
    body.home{ background:#fff; color:#1c1726; overflow-x:hidden; display:flex; flex-direction:column; min-height:100vh; }
    body.home .places{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center; }
    body.home .site-footer{ flex-shrink:0; }

    /* Header sáng */
    body.home header{ background:rgba(255,255,255,.85); border-bottom:1px solid #efedf3; }
    body.home header.scrolled{ background:#fff; border-bottom-color:#e7e4ee; }
    body.home .header-date{ color:#a39db1; }
    body.home .header-user-name{ color:#8b8597; }
    body.home .menu-toggle span{ background:#2a2438; }
    body.home .btn-login{ color:#2a2438; border-color:#d9d5e2; }
    body.home .btn-login:hover{ border-color:#2a2438; color:#000; }
    body.home .btn-register{ background:#982226; color:#fff; }
    body.home .btn-register:hover{ background:#7c1b1f; }
    body.home .btn-logout{ color:#2a2438; border-color:#d9d5e2; }

    /* ===== Mục chọn chỗ chơi ===== */
    .places{ max-width:980px; margin:0 auto; padding:150px 24px 96px; text-align:center; }
    .places-eyebrow{ font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:#b14a2f; font-weight:700; margin:0 0 16px; }
    .places-title{ font-family:'League Gothic',sans-serif; font-weight:400; font-size:clamp(48px,9vw,92px); line-height:.9; letter-spacing:.015em; text-transform:uppercase; margin:0 0 62px; color:#1c1726; }
    .places-row{ display:flex; justify-content:center; gap:clamp(36px,9vw,110px); flex-wrap:wrap; }
    .place{ display:flex; flex-direction:column; align-items:center; gap:20px; }
    .place-ring{ width:clamp(132px,30vw,170px); aspect-ratio:1/1; border-radius:50%;
        border:1.5px solid #e7e4ee; background:#fff; display:flex; align-items:center; justify-content:center;
        color:#2a2438; transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, color .4s, box-shadow .4s; }
    .place-ring svg{ width:44%; height:44%; }
    .place-label{ font-size:17px; font-weight:600; color:#2a2438; transition:color .3s; }
    .place:hover .place-ring{ transform:translateY(-7px); box-shadow:0 22px 44px -20px rgba(20,10,30,.3); }
    .place-club:hover .place-ring{ border-color:#d14828; color:#d14828; }
    .place-club:hover .place-label{ color:#d14828; }
    .place-ws:hover .place-ring{ border-color:#e0a52f; color:#b9791f; }
    .place-ws:hover .place-label{ color:#b9791f; }
    .place:focus-visible .place-ring{ outline:2px solid #2a2438; outline-offset:4px; }

    /* ===== Why DILO — nền sáng ===== */
    body.home .why-title{ color:#1c1726; }
    body.home .why-sub{ color:#8b8597; }
    body.home .why-grid{ border-color:#ebe9f0; background:#ebe9f0; }
    body.home .why-item{ background:#fff; }
    body.home .why-item:hover{ background:#faf9fc; }
    body.home .why-item-title{ color:#1c1726; }
    body.home .why-item-desc{ color:#8b8597; }

    /* ===== Footer — nền sáng ===== */
    body.home .site-footer{ border-top-color:#ebe9f0; }
    body.home .footer-copy{ color:#b3aec0; }
    body.home .footer-links a{ color:#9a93a8; }
    body.home .footer-links a:hover{ color:#2a2438; }

    @media (max-width:560px){
        .places{ padding:120px 20px 72px; }
        .places-row{ gap:32px; }
    }
    @media (prefers-reduced-motion:reduce){
        .place:hover .place-ring{ transform:none; }
    }

    /* ===== Nút tài khoản ở header (ava + tên) ===== */
    body.home .user-trigger{ display:flex; align-items:center; gap:10px; background:transparent; border:none; cursor:pointer; padding:4px 8px 4px 4px; border-radius:40px; transition:background .2s; }
    body.home .user-trigger:hover{ background:#f3f1f6; }
    .ut-ava{ width:38px; height:38px; border-radius:50%; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center;
        background:linear-gradient(135deg,#e19e37,#8d2d2b); color:#fff; font-weight:800; font-size:15px; border:2px solid #d14828; }
    .ut-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
    .ut-name{ font-size:15px; font-weight:600; color:#2a2438; white-space:nowrap; }

    /* ===== Scrim + Drawer (nền tối như ảnh mẫu) ===== */
    .dilo-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .3s; z-index:1000; }
    .dilo-scrim.open{ opacity:1; visibility:visible; }
    .dilo-drawer{ position:fixed; top:0; right:0; height:100%; width:300px; max-width:90vw; background:#1c1a1d; color:#f2f0f3;
        transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); z-index:1001; display:flex; flex-direction:column; }
    .dilo-drawer.open{ transform:translateX(0); box-shadow:-12px 0 40px rgba(0,0,0,.4); }
    .dd-top{ display:flex; align-items:center; gap:14px; padding:22px 20px; border-bottom:1px solid rgba(255,255,255,.08); }
    .dd-ava{ width:60px; height:60px; border-radius:50%; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center;
        background:linear-gradient(135deg,#e19e37,#8d2d2b); color:#fff; font-weight:800; font-size:22px; border:2px solid #d14828; }
    .dd-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
    .dd-id{ flex:1; min-width:0; }
    .dd-name{ font-size:18px; font-weight:700; color:#fff; }
    .dd-sub{ font-size:13px; color:#e19e37; word-break:break-all; margin-top:2px; }
    .dd-x{ background:none; border:none; color:rgba(255,255,255,.6); font-size:26px; line-height:1; cursor:pointer; }
    .dd-body{ flex:1; overflow-y:auto; padding:20px; }
    .dd-label{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); font-weight:700; margin:0 0 10px; }
    .dd-search-row{ display:flex; gap:8px; }
    .dd-search-row input{ flex:1; background:#26242a; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:11px 14px; color:#fff; font-size:14px; outline:none; }
    .dd-search-row input:focus{ border-color:#d14828; }
    .dd-search-row button{ background:#d14828; color:#fff; border:none; border-radius:12px; padding:0 20px; font-weight:700; font-size:14px; cursor:pointer; }
    .dd-search-row button:hover{ background:#b93c20; }
    .friend-results{ margin-top:14px; }
    .friend-item{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; text-decoration:none; color:#fff; transition:background .2s; }
    .friend-item:hover{ background:rgba(255,255,255,.06); }
    .friend-ava{ width:42px; height:42px; border-radius:50%; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center;
        background:linear-gradient(135deg,#e19e37,#8d2d2b); color:#fff; font-weight:800; }
    .friend-ava img{ width:100%; height:100%; object-fit:cover; }
    .friend-meta{ display:flex; flex-direction:column; }
    .friend-meta b{ font-size:14px; }
    .friend-meta small{ font-size:12px; color:rgba(255,255,255,.5); }
    .friend-empty{ color:rgba(255,255,255,.5); font-size:13px; padding:8px 0; }
    .dd-foot{ padding:16px 20px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:10px; }
    .dd-link{ display:block; text-align:center; padding:12px; border:1px solid rgba(255,255,255,.14); border-radius:12px; color:#fff; text-decoration:none; font-weight:600; font-size:14px; transition:background .2s,border-color .2s; }
    .dd-link:hover{ background:rgba(255,255,255,.06); }
    .dd-link.logout{ color:#ff6a42; border-color:rgba(255,106,66,.4); }
    .dd-link.logout:hover{ background:rgba(255,106,66,.1); }

    /* popup nhỏ */
    .dilo-popup-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:1100; padding:20px; }
    .dilo-popup-scrim.open{ display:flex; }
    .dilo-popup{ background:#fff; border-radius:16px; padding:26px 24px; max-width:320px; text-align:center; }
    .dilo-popup p{ color:#2a2438; font-size:15px; margin:0 0 18px; line-height:1.5; }
    .dilo-popup button{ background:#d14828; color:#fff; border:none; border-radius:10px; padding:10px 26px; font-weight:700; cursor:pointer; }

    @media (max-width:640px){
        /* Mobile: chỉ dùng hamburger, ẩn nút tài khoản chữ để header không tràn */
        body.home #headerUserInfo{ display:none !important; }
        body.home #headerAuthBtns{ display:none !important; }
    }
    @media (max-width:400px){ .ut-name{ display:none; } }

/* ============================================================
   FOOTER — format giống club nhưng nền sáng (trang index)
   ============================================================ */
body.home .site-footer{ position:relative; overflow:hidden; background:transparent; color:#2a2438;
    display:block; padding:0; margin:0; max-width:none; border-top:none;
    font-family:'Segoe UI', Tahoma, sans-serif; }
body.home .footer-dots{ position:relative; height:110px; overflow:hidden; background:transparent; }
body.home .footer-dots__line{ position:absolute; left:0; top:50%; width:200%; height:70px; opacity:.75; transform:translateY(-50%);
    background-image:
        radial-gradient(circle, rgba(141,45,43,.32) 1.5px, transparent 2px),
        radial-gradient(circle, rgba(28,23,38,.16) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(209,72,40,.30) 1.2px, transparent 1.8px);
    background-position:0 8px, 24px 22px, 48px 14px;
    background-size:72px 38px, 110px 44px, 160px 52px;
    animation:footerDotsMove 18s linear infinite; }
@keyframes footerDotsMove{ from{ transform:translate3d(0,-50%,0); } to{ transform:translate3d(-50%,-50%,0); } }
body.home .site-footer__inner{ width:min(100% - 96px, 1100px); margin:0 auto; padding:clamp(20px,3vw,40px) 0 clamp(18px,2vw,32px); }
body.home .footer-main-row{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0; }
body.home .footer-left{ flex:1; display:flex; align-items:center; }
body.home .footer-logo{ height:40px; width:auto; opacity:1; }
body.home .footer-center{ flex:1; color:#8b8597; font-size:12px; text-align:center; }
body.home .footer-right{ flex:1; display:flex; gap:20px; align-items:center; justify-content:flex-end; }
body.home .footer-right a{ color:#5f5a6b; font-size:14px; font-weight:500; transition:color .3s, text-shadow .3s; }
body.home .footer-right a:hover,
body.home .footer-right a:focus{ color:#d14828; text-shadow:0 0 4px rgba(255,131,31,.4), 0 0 12px rgba(209,72,40,.35); }
@media (max-width:640px){
    body.home .footer-main-row{ flex-direction:column; gap:18px; text-align:center; }
    body.home .footer-right{ justify-content:center; }
    body.home .site-footer__inner{ width:min(100% - 40px, 1100px); }
}