/* ==========================================================================
   LULAVI / LUCLACVIET — main.css (Design System hiện đại tối giản)
   --------------------------------------------------------------------------
   Triết lý: tối giản có chủ đích. Một thang khoảng cách (spacing scale) nhất
   quán, một thang chữ (type scale) rõ ràng, bóng đổ tinh tế, bo góc đồng bộ.
   Mọi khối Anvina kế thừa các biến này để giao diện thống nhất toàn site.
   Font: Be Vietnam Pro — font Việt hiện đại, hỗ trợ đầy đủ dấu tiếng Việt.
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---- */
:root{
  /* Màu thương hiệu */
  --anvina-primary:#1F6FB2;        /* Xanh dương chủ đạo */
  --anvina-primary-dark:#175a93;
  --anvina-primary-soft:#eaf2f9;   /* nền nhạt của primary */
  --anvina-secondary:#21A179;      /* Xanh lá */
  --anvina-secondary-soft:#e7f5ef;
  --anvina-accent:#F2693C;         /* Cam nhấn */
  --lulavi-primary:#1F6FB2;

  /* Màu trung tính (thang xám tinh tế) */
  --c-ink:#1a2430;       /* chữ chính */
  --c-body:#4a5568;      /* chữ phụ */
  --c-muted:#8a94a3;     /* chữ mờ */
  --c-line:#e9edf2;      /* đường kẻ */
  --c-surface:#ffffff;
  --c-surface-2:#f7f9fb; /* nền phụ */
  --c-bg:#ffffff;

  /* Thang khoảng cách (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* Bo góc */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:999px;

  /* Bóng đổ tinh tế (nhiều lớp, mềm) */
  --sh-sm:0 1px 2px rgba(16,38,64,.06);
  --sh-md:0 4px 16px rgba(16,38,64,.08);
  --sh-lg:0 12px 40px rgba(16,38,64,.12);

  /* Bố cục */
  --container:1180px;
  --container-narrow:760px;

  /* Type scale */
  --fs-xs:.8125rem; --fs-sm:.9rem; --fs-base:1rem; --fs-lg:1.15rem;
  --fs-xl:1.4rem; --fs-2xl:1.85rem; --fs-3xl:2.4rem; --fs-4xl:3rem;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- 2. RESET & NỀN TẢNG ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--c-ink);
  background:var(--c-bg);
  line-height:1.65;
  font-size:var(--fs-base);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{line-height:1.2;font-weight:700;color:var(--c-ink);margin:0 0 var(--sp-4)}
h1{font-size:var(--fs-4xl);letter-spacing:-.02em}
h2{font-size:var(--fs-3xl);letter-spacing:-.01em}
h3{font-size:var(--fs-xl)}
p{margin:0 0 var(--sp-4);color:var(--c-body)}
a{color:var(--anvina-primary);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--anvina-primary-dark)}
img{max-width:100%;height:auto;display:block}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-5)}

/* ---- 3. HEADER ---- */
.site-header{background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--c-line)}
.site-header.is-sticky{position:sticky;top:0;z-index:50}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5)}
.site-header.is-layout-center .site-header__inner{flex-direction:column;gap:var(--sp-3)}
.site-title{font-size:var(--fs-xl);font-weight:800;color:var(--anvina-primary);letter-spacing:-.02em}
.nav-menu{display:flex;gap:var(--sp-6);list-style:none;margin:0;padding:0}
.nav-menu a{color:var(--c-ink);font-weight:500;font-size:var(--fs-sm);position:relative}
.nav-menu a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--anvina-primary);transition:width .25s var(--ease)}
.nav-menu a:hover::after{width:100%}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;font-size:24px;color:var(--anvina-primary)}

/* ---- 4. NÚT (Buttons) — dùng chung mọi khối ---- */
.anvina-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-6);border-radius:var(--r-md);
  font-weight:600;font-size:var(--fs-sm);cursor:pointer;border:1.5px solid transparent;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
  text-decoration:none;line-height:1.2;
}
.anvina-btn:hover{transform:translateY(-2px)}
.anvina-btn--primary{background:var(--anvina-primary);color:#fff;box-shadow:var(--sh-sm)}
.anvina-btn--primary:hover{background:var(--anvina-primary-dark);color:#fff;box-shadow:var(--sh-md)}
.anvina-btn--outline{background:transparent;color:var(--anvina-primary);border-color:var(--anvina-primary)}
.anvina-btn--outline:hover{background:var(--anvina-primary);color:#fff}
.anvina-btn--link{background:transparent;color:var(--anvina-primary);padding-left:0;padding-right:0;border:0}
.anvina-btn--white{background:#fff;color:var(--anvina-primary)}
.anvina-btn--white:hover{color:var(--anvina-primary-dark)}
.anvina-btn--accent{background:var(--anvina-accent);color:#fff}
.anvina-btn--zalo{background:#0068FF;color:#fff;border-radius:var(--r-full)}

/* ---- 5. NỘI DUNG & FOOTER ---- */
.site-content{padding:var(--sp-8) var(--sp-5)}
.post-card{padding:var(--sp-5) 0;border-bottom:1px solid var(--c-line)}
.post-meta{font-size:var(--fs-xs);color:var(--c-muted)}
.entry-title{font-size:var(--fs-3xl)}

.site-footer{background:#16263f;color:#b8c2cf;padding:var(--sp-8) var(--sp-5) var(--sp-5);margin-top:var(--sp-9)}
.site-footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6);padding-bottom:var(--sp-6);border-bottom:1px solid rgba(255,255,255,.1)}
.site-footer .widget-title{color:#fff;font-size:var(--fs-base);margin:0 0 var(--sp-4);font-weight:600}
.site-footer p{color:#b8c2cf;font-size:var(--fs-sm)}
.site-footer a{color:#b8c2cf;font-size:var(--fs-sm)}
.site-footer a:hover{color:#fff}
.site-footer__links,.site-footer__contact{list-style:none;padding:0;margin:0}
.site-footer__links li,.site-footer__contact li{padding:var(--sp-1) 0;display:flex;align-items:center;gap:var(--sp-2)}
.site-footer__contact .dashicons{color:var(--anvina-secondary);font-size:18px}
.site-footer__social{display:flex;gap:var(--sp-3);align-items:center}
.site-footer__social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-full);background:rgba(255,255,255,.08);transition:background .2s}
.site-footer__social a:hover{background:var(--anvina-primary)}
.site-footer__bottom{padding-top:var(--sp-5);text-align:center}
.site-footer__copy{color:#8a94a3;font-size:var(--fs-sm);margin:0}
@media(max-width:768px){.site-footer__cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.site-footer__cols{grid-template-columns:1fr}}

/* ---- 6. TRỢ NĂNG ---- */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:var(--sp-2);top:var(--sp-2);background:#fff;padding:var(--sp-3) var(--sp-4);z-index:100;border-radius:var(--r-sm);box-shadow:var(--sh-md)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
:focus-visible{outline:2px solid var(--anvina-primary);outline-offset:2px}

/* ---- 7. RESPONSIVE ---- */
@media(max-width:768px){
  :root{--fs-4xl:2.1rem;--fs-3xl:1.7rem;--fs-2xl:1.5rem}
  .menu-toggle{display:block}
  .site-nav{display:none;width:100%}
  .site-nav.is-open{display:block}
  .site-nav.is-open .nav-menu{flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-4)}
  .site-content{padding:var(--sp-6) var(--sp-4)}
}

/* ---- 8. CHUYỂN ĐỘNG NHẸ (tôn trọng prefers-reduced-motion) ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ===== ĐÁNH BÓNG MOBILE ===== */
@media(max-width:768px){
  /* Section padding gọn hơn */
  .anvina-section__inner{padding-left:var(--sp-4);padding-right:var(--sp-4)}
  /* Hero/banner chữ vừa màn hình */
  .anvina-hero__overlay{padding:var(--sp-6) var(--sp-4)}
  /* Title nhỏ lại */
  .anvina-title h2{font-size:var(--fs-2xl)}
  /* Counter số gọn */
  .anvina-counter__number{font-size:var(--fs-3xl)}
}
/* Chống ảnh/khối tràn ngang trên mọi màn hình */
img,iframe,video{max-width:100%}
.anvina-section,.anvina-row,.anvina-hero,.anvina-banner{max-width:100%}