/* =============================================================
   AA SOLUTIONS — MOTION LAYER (Animations & Micro-interactions)
   Nguyen tac: chi animate transform/opacity de giu 60fps,
   thoi luong 0.2s–0.4s, ton trong prefers-reduced-motion.
   ============================================================= */

/* -------------------------------------------------------------
   1. SCROLL REVEAL — fade-in + slide-up 20px, stagger 0.1s
   ------------------------------------------------------------- */
[data-aa-reveal] {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity .38s var(--aa-ease), transform .38s var(--aa-ease);
    transition-delay: calc(var(--aa-i, 0) * .1s);
    will-change: opacity, transform;
}
[data-aa-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); }
[data-aa-reveal].is-done { will-change: auto; }

/* -------------------------------------------------------------
   2. STICKY NAVBAR + GLASSMORPHISM
   ------------------------------------------------------------- */
.aa-header { position: sticky; top: 0; z-index: 1030; }
.header-main {
    transition: padding .28s var(--aa-ease), background .28s var(--aa-ease),
                box-shadow .28s var(--aa-ease);
}
.header-main .logo img { transition: max-width .28s var(--aa-ease); }

/* Khi cuon: navbar chi thu nho + do bong, GIU NEN TRANG
   (nen xanh cung tong voi logo se lam logo bi chim mau)          */
.aa-header.is-stuck .header-main {
    padding: 2px 0;
    background: rgba(255, 255, 255, .97);
    border-bottom-color: var(--aa-border);
    box-shadow: 0 4px 16px rgba(10, 25, 47, .10) !important;
}
.aa-header.is-stuck .logo img { max-width: 126px; }

/* -------------------------------------------------------------
   3. DAI SO LIEU + DEM SO (Dynamic Number Counter)
   ------------------------------------------------------------- */
/* Dai so lieu — mot section rieng, nen xanh rat nhat, moi so la 1 the co icon */
.aa-stats-section {
    padding: 60px 0 64px;
    background: var(--aa-cyan-050);
    border-top: 1px solid var(--aa-border);
    border-bottom: 1px solid var(--aa-border);
}
.aa-stats-head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 26px;
}
.aa-stats-head .aa-eyebrow { margin-bottom: 0; }
.aa-stats-head__line { flex: 1 1 auto; height: 1px; background: var(--aa-border); }

.aa-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
@media (min-width: 768px) { .aa-stats { grid-template-columns: repeat(4, 1fr); } }

.aa-stat {
    background: #fff;
    border: 1px solid var(--aa-border);
    border-radius: var(--aa-radius);
    padding: 22px 20px;
    text-align: left;
    box-shadow: var(--aa-shadow-xs);
    transition: transform var(--aa-t), box-shadow var(--aa-t), border-color var(--aa-t);
}
.aa-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--aa-shadow-md);
    border-color: var(--aa-sky);
}
.aa-stat__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-bottom: 14px;
    border-radius: var(--aa-radius-sm);
    background: var(--aa-cyan-100);
    color: var(--aa-navy-800);
    border: 1px solid var(--aa-cyan);
    transition: background var(--aa-t), color var(--aa-t);
}
.aa-stat__icon svg { width: 19px; height: 19px; }
.aa-stat:hover .aa-stat__icon { background: var(--aa-sky); color: #fff; }

.aa-stat__num {
    display: block;
    font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800;
    color: var(--aa-navy-800); line-height: 1.05; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.aa-stat__num small { font-size: .5em; font-weight: 700; color: var(--aa-slate); }
.aa-stat__label {
    display: block; margin-top: 8px;
    font-size: .8438rem; font-weight: 600; color: var(--aa-slate);
    line-height: 1.45;
}
@media (max-width: 767px) {
    .aa-stats-section { padding: 44px 0 48px; }
    .aa-stat { padding: 18px 16px; }
    .aa-stat__icon { width: 34px; height: 34px; margin-bottom: 11px; }
}

/* -------------------------------------------------------------
   4. HOVER CARD — vien sac net + gach chan amber (khong glow)
   ------------------------------------------------------------- */
.aa-service::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--aa-amber);
    transform: scaleX(0); transform-origin: left;
    transition: transform .28s var(--aa-ease);
}
.aa-service:hover::after { transform: scaleX(1); }

/* -------------------------------------------------------------
   5. NUT — nhan nhe, khong vet sang kim loai
   ------------------------------------------------------------- */
.aa-btn { position: relative; overflow: hidden; }
.aa-btn > *, .aa-btn svg { position: relative; z-index: 1; }
.aa-btn:hover { transform: translateY(-1px); }
.aa-btn:active { transform: translateY(0); }

/* -------------------------------------------------------------
   6. THU VIEN ANH — OVERLAY + ICON KINH LUP + LIGHTBOX BLUR
   ------------------------------------------------------------- */
.aa-masonry__item, .aa-order-slider .item a { position: relative; overflow: hidden; }
.aa-zoom-badge {
    position: absolute; left: 50%; top: 50%;
    width: 46px; height: 46px; margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: var(--aa-navy);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(.72);
    transition: opacity .28s var(--aa-ease), transform .28s var(--aa-ease);
    z-index: 3; pointer-events: none;
    box-shadow: var(--aa-shadow-md);
}
.aa-zoom-badge svg { width: 20px; height: 20px; }
.aa-masonry__item:hover .aa-zoom-badge,
.aa-order-slider .item a:hover .aa-zoom-badge { opacity: 1; transform: scale(1); }

.aa-order-slider .item a::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,25,47,.05), rgba(10,25,47,.40));
    opacity: 0; transition: opacity .28s var(--aa-ease); z-index: 1;
}
.aa-order-slider .item a:hover::after { opacity: 1; }

/* Lightbox: nen navy dam, khong dung kinh mo */
.fancybox-bg { background: rgba(10,25,47,.88) !important; }
.fancybox-content { border-radius: var(--aa-radius); overflow: hidden; }
.fancybox-caption { font-family: var(--aa-mono); font-size: .75rem; letter-spacing: .02em; }

/* -------------------------------------------------------------
   7. VIDEO FACADE — POSTER + NUT PLAY NHIP DAP
   ------------------------------------------------------------- */
.aa-video--facade { cursor: pointer; }
.aa-video__poster { position: relative; line-height: 0; }
.aa-video__poster img {
    width: 100%; height: auto; display: block;
    transition: transform .45s var(--aa-ease), filter .3s var(--aa-ease);
    filter: saturate(.9) brightness(.94);
}
.aa-video--facade:hover .aa-video__poster img { transform: scale(1.03); filter: saturate(1) brightness(1); }
.aa-video__poster::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,25,47,.14), rgba(10,25,47,.42));
    transition: opacity .3s var(--aa-ease);
}
.aa-video--facade:hover .aa-video__poster::after { opacity: .55; }

.aa-video__play {
    position: absolute; left: 50%; top: 50%;
    width: 68px; height: 68px; margin: -34px 0 0 -34px;
    border: 0; padding: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    color: var(--aa-navy);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 3;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    transition: transform .28s var(--aa-ease), background var(--aa-t), color var(--aa-t);
}
.aa-video__play svg { width: 26px; height: 26px; margin-left: 3px; }
.aa-video__play::before {
    content: ""; position: absolute; inset: -6px;
    border-radius: 50%; border: 2px solid rgba(255,255,255,.55);
    animation: aaPlayPulse 2.2s var(--aa-ease) infinite;
}
@keyframes aaPlayPulse {
    0%   { transform: scale(1);   opacity: .8; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}
.aa-video--facade:hover .aa-video__play { transform: scale(1.1); background: var(--aa-amber); color: #fff; }
.aa-video--facade:hover .aa-video__play::before { border-color: rgba(217,119,6,.6); }

/* -------------------------------------------------------------
   8. FORM TRA CUU — TRANG THAI LOADING
   ------------------------------------------------------------- */
.aa-btn.is-loading { pointer-events: none; }
.aa-btn.is-loading .aa-btn__text,
.aa-btn.is-loading > svg { opacity: 0; }
.aa-btn__spinner {
    position: absolute; left: 50%; top: 50%;
    width: 20px; height: 20px; margin: -10px 0 0 -10px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: aaSpin .6s linear infinite;
    z-index: 2;
}
.aa-btn.is-loading .aa-btn__spinner { opacity: 1; }
@keyframes aaSpin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------
   9. NUT LIEN HE NOI — NHIP SONG MOI 4s
   ------------------------------------------------------------- */
.hotline-phone-2 .alo-floating-zalo .phone_animation {
    position: relative;
    width: 45px; height: 45px;
}
/* Vong song nhip dap — gan vao dung o icon 45px, khong an theo be rong the cha */
.hotline-phone-2 .alo-floating-zalo .phone_animation::before {
    content: ""; position: absolute;
    left: 0; top: 0; width: 45px; height: 45px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(217, 119, 6, .5);
    animation: aaFloatPulse 4s var(--aa-ease) infinite;
    pointer-events: none;
}
@keyframes aaFloatPulse {
    0%   { box-shadow: 0 0 0 0 rgba(217,119,6,.5); }
    18%  { box-shadow: 0 0 0 18px rgba(217,119,6,0); }
    100% { box-shadow: 0 0 0 0 rgba(217,119,6,0); }
}

/* -------------------------------------------------------------
   10. CUON MUOT + TON TRONG REDUCED MOTION
   ------------------------------------------------------------- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    [data-aa-reveal] { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------------------
   11. HEADER: giu menu tren 1 hang, khong tran dong
   ------------------------------------------------------------- */
.main-navigation ul.menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.header-main ul.menu > li { padding: 4px 0; white-space: nowrap; }
.aa-header-inner { flex-wrap: nowrap; }
.aa-brand { flex: 0 0 auto; }
.aa-header-hotline { flex: 0 0 auto; }
/* Menu chiem khoang giua, logo trai — hotline phai */
.main-navigation { flex: 1 1 auto; min-width: 0; }