:root {
    --black: #0a0a0a;
    --white: #f5f5f0;
    --red: #e81c1c;
    --red-dark: #b01010;
    --red-glow: rgba(232,28,28,0.12);
    --grey: #1a1a1a;
    --grey-mid: #2e2e2e;
    --grey-light: #888;
    --grey-border: #222;
    --font-display: 'Bebas Neue', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
    --nav-h: 70px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--black); color: var(--white); overflow-x: hidden; cursor: none; }
/* ==========================
   FEEDBACK SECTION
========================== */

.feedback-section{
    padding:120px 8%;
    background:var(--black);
    border-top:1px solid var(--grey-border);
}

.feedback-container{
    max-width:900px;
    margin:auto;
}

.feedback-header{
    text-align:center;
    margin-bottom:60px;
}

.feedback-title{
    font-family:var(--font-display);
    font-size:clamp(42px,7vw,90px);
    line-height:.9;
    margin:20px 0;
    text-transform:uppercase;
}

.feedback-desc{
    max-width:650px;
    margin:auto;
    color:var(--grey-light);
    line-height:1.8;
}

.feedback-form{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.form-group label{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--grey-light);
}

.form-group input,
.form-group textarea{
    width:100%;
    background:var(--grey);
    border:1px solid var(--grey-border);
    color:var(--white);
    padding:18px 20px;
    font-size:15px;
    font-family:inherit;
    outline:none;
    transition:.3s;
}

.form-group textarea{
    resize:vertical;
    min-height:180px;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:var(--red);
    box-shadow:0 0 0 1px var(--red);
}

.feedback-btn{
    align-self:flex-start;
    background:var(--red);
    color:var(--white);
    border:none;
    padding:16px 40px;
    cursor:pointer;
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:all .3s ease;
    min-width:220px;
}

.feedback-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(255,0,0,.25);
}


.feedback-btn:disabled{
    opacity:.8;
    cursor:not-allowed;
}
@media(max-width:768px){
    .feedback-section{
        padding:80px 24px;
    }

    .feedback-btn{
        width:100%;
    }
}
/* CURSOR */
#cursor { width:12px; height:12px; background:var(--red); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .2s,height .2s; }
#cursor-ring { width:36px; height:36px; border:1px solid rgba(232,28,28,0.5); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .2s,height .2s; }
body.hovering #cursor { width:8px; height:8px; background:var(--white); }
body.hovering #cursor-ring { width:52px; height:52px; border-color:var(--red); }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--black); }
::-webkit-scrollbar-thumb { background:var(--red); }

/* NAV */
nav {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    padding:0 40px; height:var(--nav-h);
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(10,10,10,0.95); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--grey-border);
}
.nav-logo { font-family:var(--font-display); font-size:28px; letter-spacing:3px; color:var(--white); text-decoration:none; cursor:none; }
.nav-logo span { color:var(--red); }
.nav-back { font-family:var(--font-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--grey-light); text-decoration:none; cursor:none; display:flex; align-items:center; gap:8px; transition:color var(--transition); }
.nav-back:hover { color:var(--red); }

/* HERO */
.about-hero {
    min-height: 100vh;
    display: flex; align-items: center;
    padding: calc(var(--nav-h) + 60px) 40px 80px;
    position: relative; overflow: hidden;
}
.about-hero-bg {
    position:absolute; inset:0;
    background:
            radial-gradient(ellipse 60% 80% at 80% 40%, rgba(232,28,28,0.07) 0%, transparent 65%),
            radial-gradient(ellipse 40% 60% at 10% 70%, rgba(232,28,28,0.04) 0%, transparent 60%),
            var(--black);
}
.hero-grid {
    position:absolute; inset:0;
    background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size:60px 60px;
    mask-image: radial-gradient(ellipse 90% 90% at center, black 30%, transparent 100%);
}
.about-hero-content { position:relative; z-index:2; max-width:800px; }
.hero-eyebrow {
    font-family:var(--font-mono); font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--red);
    margin-bottom:24px; display:flex; align-items:center; gap:12px;
    opacity:0; animation:fadeUp 0.8s 0.2s forwards;
}
.hero-eyebrow::before { content:''; width:32px; height:1px; background:var(--red); }
.about-hero h1 {
    font-family:var(--font-display);
    font-size: clamp(72px, 10vw, 140px);
    line-height:0.88; letter-spacing:-1px; color:var(--white);
    margin-bottom:32px;
    opacity:0; animation:fadeUp 0.8s 0.4s forwards;
}
.about-hero h1 span { color:var(--red); display:block; }
.about-hero-desc {
    font-size:16px; color:var(--grey-light); line-height:1.8; max-width:520px;
    opacity:0; animation:fadeUp 0.8s 0.6s forwards;
}
.hero-year {
    position:absolute; right:40px; bottom:80px;
    font-family:var(--font-display); font-size:clamp(80px,12vw,180px);
    color:rgba(255,255,255,0.03); letter-spacing:-4px; line-height:1;
    pointer-events:none; user-select:none;
}

/* MARQUEE */
.marquee-section { padding:18px 0; background:var(--red); overflow:hidden; }
.marquee-track { display:flex; animation:marquee 24s linear infinite; white-space:nowrap; }
.marquee-item { font-family:var(--font-display); font-size:13px; letter-spacing:3px; color:var(--white); padding:0 32px; display:flex; align-items:center; gap:12px; }
.marquee-item::after { content:'✦'; font-size:8px; }

/* SECTION BASE */
section { padding:100px 40px; }
.section-label { font-family:var(--font-mono); font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--red); margin-bottom:16px; }
.section-title { font-family:var(--font-display); font-size:clamp(40px,5vw,72px); line-height:1; letter-spacing:1px; margin-bottom:48px; }

/* ABOUT SECTION */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.about-text p { font-size:15px; color:var(--grey-light); line-height:1.9; margin-bottom:20px; }
.about-text p strong { color:var(--white); }
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.about-stat { background:var(--grey); padding:32px 24px; position:relative; overflow:hidden; transition:var(--transition); }
.about-stat::before { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.about-stat:hover::before { transform:scaleX(1); }
.about-stat-num { font-family:var(--font-display); font-size:52px; color:var(--white); line-height:1; }
.about-stat-label { font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--grey-light); margin-top:6px; }

/* MISSION */
.mission-section { background:var(--grey); border-top:1px solid var(--grey-border); border-bottom:1px solid var(--grey-border); }
.mission-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.mission-card { padding:48px 32px; background:var(--black); position:relative; overflow:hidden; transition:var(--transition); }
.mission-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.mission-card:hover::before { transform:scaleX(1); }
.mission-icon { font-size:36px; margin-bottom:20px; }
.mission-num { font-family:var(--font-mono); font-size:10px; color:var(--grey-light); letter-spacing:2px; margin-bottom:12px; }
.mission-title { font-family:var(--font-display); font-size:26px; letter-spacing:1px; margin-bottom:12px; }
.mission-desc { font-size:14px; color:var(--grey-light); line-height:1.7; }

/* POLICY TABS */
.policy-section {}
.policy-tabs { display:flex; gap:2px; margin-bottom:40px; flex-wrap:wrap; }
.policy-tab { font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:14px 24px; background:var(--grey); border:1px solid transparent; color:var(--grey-light); cursor:none; transition:var(--transition); }
.policy-tab:hover { color:var(--white); border-color:var(--grey-border); }
.policy-tab.active { background:var(--red); color:var(--white); border-color:var(--red); }
.policy-content { display:none; animation:fadeUp 0.4s ease forwards; }
.policy-content.active { display:block; }
.policy-body { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.policy-card { background:var(--grey); padding:36px; border:1px solid var(--grey-border); position:relative; }
.policy-card-icon { font-size:32px; margin-bottom:20px; }
.policy-card-title { font-family:var(--font-display); font-size:22px; letter-spacing:1px; margin-bottom:16px; color:var(--white); }
.policy-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.policy-list li { font-size:14px; color:var(--grey-light); line-height:1.7; display:flex; gap:10px; }
.policy-list li::before { content:'—'; color:var(--red); flex-shrink:0; font-family:var(--font-mono); }
.policy-highlight { background:var(--red-glow); border-left:2px solid var(--red); padding:16px 20px; margin-top:20px; }
.policy-highlight p { font-size:13px; color:var(--grey-light); line-height:1.7; }
.policy-highlight strong { color:var(--white); }
.policy-full { grid-column:1/-1; }

/* TIMELINE */
.timeline-section {}
.timeline { position:relative; padding-left:40px; }
.timeline::before { content:''; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:linear-gradient(to bottom, var(--red), transparent); }
.timeline-item { position:relative; padding:0 0 48px 40px; }
.timeline-item::before { content:''; position:absolute; left:-4px; top:8px; width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 12px rgba(232,28,28,0.4); }
.timeline-year { font-family:var(--font-mono); font-size:11px; letter-spacing:3px; color:var(--red); margin-bottom:8px; }
.timeline-title { font-family:var(--font-display); font-size:24px; letter-spacing:1px; margin-bottom:8px; }
.timeline-desc { font-size:14px; color:var(--grey-light); line-height:1.7; max-width:480px; }

/* TEAM */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.team-card { background:var(--grey); padding:32px 24px; text-align:center; border:1px solid var(--grey-border); transition:var(--transition); position:relative; overflow:hidden; cursor:none; }
.team-card::before { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--red); transform:scaleX(0); transition:transform 0.4s ease; }
.team-card:hover::before { transform:scaleX(1); }
.team-card:hover { border-color:var(--grey-mid); transform:translateY(-4px); }
.team-avatar { width:72px; height:72px; border-radius:50%; background:var(--grey-mid); border:2px solid var(--grey-border); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:28px; color:var(--red); margin:0 auto 16px; transition:border-color var(--transition); }
.team-card:hover .team-avatar { border-color:var(--red); }
.team-name { font-family:var(--font-display); font-size:18px; letter-spacing:1px; margin-bottom:4px; }
.team-role { font-family:var(--font-mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--grey-light); }

/* CONTACT STRIP */
.contact-strip { background:var(--red); padding:60px 40px; display:flex; justify-content:space-between; align-items:center; }
.contact-strip h2 { font-family:var(--font-display); font-size:clamp(32px,4vw,56px); letter-spacing:2px; color:var(--white); }
.contact-strip p { font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:rgba(255,255,255,0.7); margin-top:8px; }
.contact-btn { padding:18px 48px; background:var(--white); color:var(--black); font-family:var(--font-mono); font-size:12px; letter-spacing:3px; text-transform:uppercase; border:none; cursor:none; transition:var(--transition); white-space:nowrap; clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%); }
.contact-btn:hover { background:var(--black); color:var(--white); }

/* FOOTER */
footer { background:var(--grey); border-top:1px solid var(--grey-border); padding:60px 40px 32px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:32px; border-top:1px solid var(--grey-border); }
.footer-copy { font-family:var(--font-mono); font-size:10px; color:var(--grey-light); letter-spacing:1px; }
.footer-socials { display:flex; gap:10px; }
.social-btn { width:34px; height:34px; border:1px solid var(--grey-border); display:flex; align-items:center; justify-content:center; color:var(--grey-light); font-size:12px; cursor:none; transition:var(--transition); text-decoration:none; }
.social-btn:hover { border-color:var(--red); color:var(--red); }

/* REVEAL */
.reveal { opacity:0; transform:translateY(36px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:none;} }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ══════════════════════════════════════
   TIMELINE — căn chấm tròn vào đúng đường kẻ (mọi kích thước)
══════════════════════════════════════ */
.timeline { padding-left: 0; }
.timeline-item { padding-left: 40px; }

.team-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 20px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--grey-light);
}
.team-state--error { color: var(--red); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

/* ── Thiết bị cảm ứng: bỏ cursor tuỳ chỉnh ── */
@media (hover: none), (pointer: coarse) {
    * { cursor: auto !important; }
    #cursor, #cursor-ring { display: none !important; }
    .team-card:hover { transform: none; }
}

/* ── Tablet ≤ 1024px ── */
@media (max-width: 1024px) {
    .about-grid { grid-template-columns: 1fr; gap: 48px; }
    .mission-grid { grid-template-columns: 1fr 1fr; }
    .policy-body { grid-template-columns: 1fr; }

    /* Ghi đè style inline trong aboutUs.html */
    .team-grid[style] { grid-template-columns: 1fr 1fr !important; }
    section div[style*="gap:80px"] {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
    }
}

/* ── Mobile ≤ 768px ── */
@media (max-width: 768px) {
    :root { --nav-h: 60px; }
    nav { padding: 0 16px; }
    .nav-logo { font-size: 24px; }
    section { padding: 60px 20px; }
    .section-title { font-size: clamp(36px, 11vw, 56px); margin-bottom: 32px; }

    /* HERO */
    .about-hero {
        min-height: 100vh;
        min-height: 100svh;
        padding: calc(var(--nav-h) + 32px) 20px 56px;
    }
    .hero-eyebrow { font-size: 10px; letter-spacing: 3px; }
    .about-hero h1 { font-size: clamp(56px, 17vw, 96px); margin-bottom: 24px; }
    .about-hero-desc { font-size: 14px; }
    .hero-year { display: none; }

    /* GIỚI THIỆU */
    .about-grid { gap: 36px; }
    .about-stat { padding: 24px 16px; }
    .about-stat-num { font-size: 40px; }
    .about-stat-label { font-size: 9px; letter-spacing: 1px; }

    /* CAM KẾT */
    .mission-grid { grid-template-columns: 1fr; }
    .mission-card { padding: 32px 24px; }

    /* CHÍNH SÁCH */
    .policy-tabs { gap: 6px; margin-bottom: 24px; }
    .policy-tab {
        flex: 1 1 calc(50% - 6px);
        padding: 12px 8px;
        font-size: 9px;
        letter-spacing: 1px;
        text-align: center;
    }
    .policy-body { gap: 16px; }
    .policy-card { padding: 24px 20px; }
    .policy-card-title { font-size: 20px; }
    .policy-full div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* TIMELINE */
    .timeline-item { padding-bottom: 32px; padding-left: 28px; }
    .timeline-title { font-size: 20px; }
    section div[style*="padding:40px"] { padding: 28px 20px !important; }

    /* ĐỘI NGŨ */
    .team-grid,
    .team-grid[style] { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .team-card { padding: 24px 12px; }
    .team-avatar { width: 60px; height: 60px; font-size: 24px; }
    .team-name { font-size: 16px; }
    .team-role { font-size: 8px; letter-spacing: 1px; }

    /* LIÊN HỆ */
    .contact-strip {
        flex-direction: column;
        gap: 24px;
        text-align: center;
        padding: 40px 20px;
    }
    .contact-btn { width: 100%; padding: 16px 0; }

    /* FOOTER */
    footer { padding: 40px 20px 24px; }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .footer-copy { line-height: 1.7; }
}

/* ── Màn hình rất nhỏ ≤ 380px ── */
@media (max-width: 380px) {
    .team-grid,
    .team-grid[style] { grid-template-columns: 1fr !important; }
}