/* An Viet Website 2026 - bang mau chuan duyet ngay 18/07/2026 */
:root{
  color-scheme:light;
  --av-ink:#172127;
  --av-steel:#243139;
  --av-paper:#F4F2EC;
  --av-paper-2:#FBFAF7;
  --av-muted:#657178;
  --av-red:#B83228;
  --av-gold:#C9A65C;
  --av-gold-deep:#92703D;
  --av-green:#496C57;
  --av-blue:#4D6875;
  --av-line:#D8D3C8;
}

/* Sua hien tuong chu bi gian, ngat cum tu va xuong dong kho doc. */
:where(.av-home-page,.av-about-page,.av-quality-standalone,.av-esg-page,.av-subpage,.av-intro-page){font-kerning:normal;text-rendering:optimizeLegibility;word-spacing:normal}
:where(.av-home-page,.av-about-page,.av-quality-standalone,.av-esg-page,.av-subpage,.av-intro-page) :where(h1,h2,h3){hyphens:none;overflow-wrap:normal;text-wrap:balance;word-break:normal}
:where(.av-home-page,.av-about-page,.av-quality-standalone,.av-esg-page,.av-subpage,.av-intro-page) :where(p,li,figcaption){hyphens:none;overflow-wrap:normal;text-wrap:pretty;word-break:normal}

/* Thanh dieu huong dung chung - mot logo chinh tren moi trang */
.av-site-globalbar{position:sticky;top:0;z-index:1000;color:var(--av-paper)!important;background:var(--av-ink)!important;border-bottom:3px solid var(--av-red)!important;box-shadow:0 7px 20px rgba(23,33,39,.18);font-family:"Be Vietnam Pro",Arial,sans-serif}
.av-site-globalbar-inner{width:min(1260px,calc(100% - 28px));min-height:46px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px}
.av-site-global-home{display:flex;align-items:center;gap:9px;color:var(--av-paper)!important;font-size:11px;font-weight:800;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.av-site-global-home img{width:44px;height:34px;padding:1px;object-fit:contain;background:var(--av-paper-2);border-radius:3px}
.av-site-globalnav{display:flex;align-items:center;justify-content:flex-end;gap:3px;flex-wrap:wrap}
.av-site-globalnav a{padding:8px 9px;color:#D8DFE2!important;border-radius:3px;font-size:10.5px;font-weight:700;line-height:1.2;text-decoration:none}
.av-site-globalnav a:hover,.av-site-globalnav a:focus-visible{color:#fff!important;background:var(--av-red)!important}

/* Trang chu: giu nguyen thiet ke toi da duyet trong index.html */
.av-home-page .hero-bg img{object-position:center 48%}
.av-home-page .product-img{background:var(--av-paper)}
.av-home-page .product-img img,.av-home-page .news-visual img{object-position:center}

/* Thanh muc luc cua ba trang chuyen sau - khong lap logo */
.av-about-page .topbar,.av-quality-standalone .av-quality-topbar,.av-esg-page .site-header{border-bottom:1px solid var(--av-gold)!important;background:rgba(251,250,247,.98)!important;box-shadow:0 7px 20px rgba(23,33,39,.08)!important}
.av-about-page .topbar .brand,.av-quality-standalone .av-quality-topbar .av-quality-brand,.av-esg-page .site-header .brand{display:none!important}
.av-about-page .topbar .nav,.av-quality-standalone .av-quality-topbar .av-quality-nav,.av-esg-page .site-header .header-inner{min-height:54px!important;justify-content:flex-end!important}
.av-about-page .section-label,.av-quality-standalone .av-quality-section-label,.av-esg-page .av-esg-section-label{display:flex;min-width:220px;flex-direction:column;color:var(--av-ink);line-height:1.25;text-decoration:none}
.av-about-page .section-label strong,.av-quality-standalone .av-quality-section-label strong,.av-esg-page .av-esg-section-label strong{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.av-about-page .section-label small,.av-quality-standalone .av-quality-section-label small,.av-esg-page .av-esg-section-label small{margin-top:4px;color:var(--av-muted);font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* Gioi thieu */
body.av-about-page{color:var(--av-paper);background:var(--av-ink)}
.av-about-page .hero{color:var(--av-paper);background:linear-gradient(135deg,var(--av-steel),var(--av-ink))}
.av-about-page .hero h1{color:var(--av-paper-2)}
.av-about-page .hero p{color:#D0D8DC}
.av-about-page .mission-panel{color:var(--av-paper);background:rgba(255,255,255,.065);border-color:var(--av-red)}
.av-about-page .mission-panel.company{border-color:var(--av-gold);background:rgba(201,166,92,.09)}
.av-about-page .vision,.av-about-page .culture{background:var(--av-paper)}
.av-about-page .vision .section-head h2,.av-about-page .vision-statement,.av-about-page .culture .section-head h2,.av-about-page .culture-card h3{color:var(--av-ink)}
.av-about-page .vision .section-head p,.av-about-page .culture .section-head p,.av-about-page .culture-card p{color:var(--av-muted)}
.av-about-page .milestone-card,.av-about-page .culture-card{background:var(--av-paper-2);border-color:var(--av-line)}
.av-about-page .milestone h3,.av-about-page .pillars-title{color:var(--av-ink)}
.av-about-page .timeline-note{color:var(--av-ink);background:var(--av-paper-2);border-left-color:var(--av-gold)}
.av-about-page .pillar{background:var(--av-steel);border-color:rgba(201,166,92,.24)}
.av-about-page footer{color:#C8D0D4;background:var(--av-ink);border-top-color:rgba(255,255,255,.12)}

/* Chat luong */
body.av-quality-standalone,.av-quality-standalone .av-quality-page{background:var(--av-paper)}
.av-quality-standalone .av-quality-hero{color:var(--av-paper);background:linear-gradient(135deg,var(--av-steel),var(--av-ink) 72%)}
.av-quality-standalone .av-quality-hero h1{color:var(--av-paper-2)}
.av-quality-standalone .av-quality-hero-lead,.av-quality-standalone .av-quality-hero-note{color:#D0D8DC}
.av-quality-standalone .av-quality-principles,.av-quality-standalone .av-quality-field{color:var(--av-paper);background:var(--av-ink)}
.av-quality-standalone .av-quality-principles h2,.av-quality-standalone .av-quality-principle h3,.av-quality-standalone .av-quality-field h2{color:var(--av-paper-2)}
.av-quality-standalone .av-quality-principles p,.av-quality-standalone .av-quality-field p{color:#C8D0D4}
.av-quality-standalone .av-quality-principle,.av-quality-standalone .av-quality-field-card{background:var(--av-steel);border-color:rgba(201,166,92,.24)}
.av-quality-standalone .av-quality-tools,.av-quality-standalone .av-quality-flow,.av-quality-standalone .av-quality-disclosure{background:var(--av-paper)}
.av-quality-standalone .av-quality-flow-step:nth-child(n+6){background:var(--av-steel)}
.av-quality-standalone .av-quality-flow-step:nth-child(n+6) h3{color:var(--av-paper-2)}
.av-quality-standalone .av-quality-cta{color:var(--av-paper);background:linear-gradient(135deg,var(--av-steel),var(--av-ink))}
.av-quality-standalone .av-quality-cta h2{color:var(--av-paper-2)}
.av-quality-standalone .av-quality-cta p{color:#C8D0D4}
.av-quality-standalone .av-quality-footer{color:#C8D0D4;background:var(--av-ink);border-top-color:rgba(255,255,255,.12)}

/* Phat trien ben vung */
.av-esg-page .hero{color:var(--av-paper);background:var(--av-ink)}
.av-esg-page .hero>img{opacity:.96;filter:saturate(.96) contrast(1.04) brightness(1.04)}
.av-esg-page .hero::before{background:linear-gradient(90deg,rgba(23,33,39,.94) 0%,rgba(23,33,39,.84) 28%,rgba(23,33,39,.58) 43%,rgba(23,33,39,.16) 62%,rgba(23,33,39,.03) 82%),linear-gradient(0deg,rgba(23,33,39,.40) 0%,transparent 38%)}
.av-esg-page .hero::after{position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 69% 57%,rgba(255,255,255,.15) 0%,rgba(255,255,255,.06) 29%,transparent 55%);content:""}
.av-esg-page .hero-kicker{color:var(--av-gold);background:rgba(23,33,39,.68)}
.av-esg-page .hero h1 .en,.av-esg-page .hero-statement .en{color:#C8D0D4}
.av-esg-page .commitment{color:var(--av-paper);background:var(--av-ink)}
.av-esg-page .commitment-copy>p,.av-esg-page .commitment-copy .en-copy,.av-esg-page .commitment-quote span{color:#C8D0D4}
.av-esg-page .site-footer{color:#C8D0D4;background:var(--av-ink)}
.av-esg-page .footer-brand h2,.av-esg-page .footer-message{color:var(--av-paper-2)}

/* Cac trang con */
.av-subpage{margin:0;color:var(--av-ink);background:var(--av-paper);font-family:"Be Vietnam Pro",Arial,sans-serif;line-height:1.68}.av-subpage *{box-sizing:border-box}.av-subpage a{color:inherit;text-decoration:none}.av-subpage img{display:block;max-width:100%}
.sub-wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.sub-hero{padding:74px 0;color:var(--av-paper);border-bottom:4px solid var(--av-red);background:linear-gradient(135deg,var(--av-steel),var(--av-ink))}.sub-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:54px}
.sub-eyebrow{color:var(--av-gold);font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.sub-hero h1{margin:12px 0 17px;color:var(--av-paper-2);font-family:"Playfair Display",Georgia,serif;font-size:clamp(39px,5.8vw,66px);line-height:1.04;letter-spacing:-.03em}.sub-lead{margin:0;color:#D0D8DC;font-size:16px}
.sub-hero-image{height:390px;overflow:hidden;border:1px solid rgba(201,166,92,.38);background:var(--av-steel);box-shadow:0 22px 50px rgba(0,0,0,.22)}.sub-hero-image img{width:100%;height:100%;object-fit:cover}
.sub-section{padding:82px 0}.sub-section.alt{background:var(--av-paper-2)}.sub-heading{max-width:820px;margin-bottom:34px}.sub-heading h2{margin:8px 0 12px;font-family:"Playfair Display",Georgia,serif;font-size:clamp(30px,4vw,48px);line-height:1.12}.sub-heading p{margin:0;color:var(--av-muted)}
.sub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.sub-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.sub-card{overflow:hidden;border:1px solid var(--av-line);background:var(--av-paper-2);box-shadow:0 14px 32px rgba(23,33,39,.07)}.sub-card-image{height:230px;overflow:hidden;background:var(--av-paper)}.sub-card-image img{width:100%;height:100%;object-fit:cover;object-position:center}.sub-card-body{padding:23px 22px 26px}.sub-card small{color:var(--av-red);font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.sub-card h3{margin:10px 0;font-size:17px}.sub-card p{margin:0;color:var(--av-muted);font-size:12px}
.sub-panel{padding:34px;border-left:4px solid var(--av-gold);background:var(--av-paper-2);box-shadow:0 14px 34px rgba(23,33,39,.07)}.sub-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}.sub-btn{display:inline-flex;min-height:47px;padding:12px 18px;align-items:center;justify-content:center;color:#fff!important;background:var(--av-steel);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.sub-btn.red{background:var(--av-red)}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.contact-card{padding:28px;border:1px solid var(--av-line);background:var(--av-paper-2)}.contact-card small{color:var(--av-gold-deep);font-weight:800;letter-spacing:.1em;text-transform:uppercase}.contact-card strong{display:block;margin-top:12px;font-size:18px}.contact-card p{margin:8px 0 0;color:var(--av-muted);font-size:13px}.sub-footer{padding:32px 0;color:#C8D0D4;background:var(--av-ink);border-top:1px solid rgba(255,255,255,.12);font-size:12px}
.av-subpage .photo-contain img{object-fit:contain;padding:8px;background:var(--av-paper-2)}

/* Noi dung luon hien thi ke ca khi trinh duyet chan hieu ung JavaScript. */
.reveal,.av-quality-reveal{opacity:1!important;transform:none!important}

/* Bo chuyen doi ngon ngu VI / EN dung chung toan site */
:root[data-lang="vi"] .av-en{display:none!important}
:root[data-lang="en"] .av-vi{display:none!important}
:root:not([data-lang]) .av-en{display:none!important}
.av-lang-switch{display:inline-flex;align-items:center;gap:2px;font-size:10.5px;font-weight:800;letter-spacing:.04em}
.av-lang-switch button{padding:2px 6px;border:1px solid rgba(255,255,255,.4);background:transparent;color:inherit;cursor:pointer;font:inherit;letter-spacing:.04em;border-radius:2px;opacity:.62}
.av-lang-switch button[aria-pressed="true"]{opacity:1;background:var(--av-red,#B83228);border-color:var(--av-red,#B83228);color:#fff}
.av-lang-switch.on-light button{border-color:var(--av-line,#d8d3c8);color:var(--av-ink,#172127)}
.av-lang-switch.on-light button[aria-pressed="true"]{color:#fff}

@media(max-width:920px){
  .av-site-globalbar-inner{align-items:flex-start;flex-direction:column;padding:7px 0}
  .av-site-globalnav{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .av-site-globalnav a{white-space:nowrap}
  .av-site-global-home span{display:none}
  .av-about-page .topbar,.av-quality-standalone .av-quality-topbar,.av-esg-page .site-header{position:relative!important;top:auto!important}
  .av-about-page .section-label,.av-quality-standalone .av-quality-section-label,.av-esg-page .av-esg-section-label{min-width:0}
  .av-esg-page .hero>img{opacity:.91;filter:saturate(.92) contrast(1.04) brightness(1.02)}
  .av-esg-page .hero::before{background:linear-gradient(90deg,rgba(23,33,39,.91) 0%,rgba(23,33,39,.68) 52%,rgba(23,33,39,.28) 100%),linear-gradient(0deg,rgba(23,33,39,.78) 0%,transparent 62%)}
  .av-esg-page .hero::after{background:radial-gradient(ellipse at 72% 43%,rgba(255,255,255,.11) 0%,rgba(255,255,255,.04) 30%,transparent 58%)}
  .sub-hero-grid{grid-template-columns:1fr}
  .sub-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:700px){.sub-wrap{width:min(100% - 28px,1180px)}.sub-hero{padding:52px 0}.sub-hero-image{height:320px}.sub-section{padding:62px 0}.sub-grid,.sub-grid.four{grid-template-columns:1fr}}

/* Hoan thien thiet ke 31-07-2026:
   anh sang tinh, ro du lieu, tiet che theo tinh than B2B Nhat Ban. */
:where(
  .av-home-page,
  .av-about-page,
  .av-quality-standalone,
  .av-esg-page,
  .av-subpage,
  .av-intro-page
) :where(a,button,summary):focus-visible{
  outline:3px solid var(--av-gold-deep);
  outline-offset:3px;
}

.av-site-globalnav a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:9px 10px;
  font-size:11.5px;
}
.av-lang-switch button{
  min-width:36px;
  min-height:36px;
  display:inline-grid;
  place-items:center;
  padding:6px 8px;
}
.sub-section{padding:72px 0}
.sub-eyebrow{color:var(--av-gold-deep);font-size:12px}
.sub-heading p{color:var(--av-steel);font-size:14px}
.sub-card,.sub-panel{box-shadow:0 10px 26px rgba(23,33,39,.065)}
.sub-card p{font-size:13.5px;line-height:1.68}
.contact-card small{color:var(--av-ink)}

/* Trang chu: anh nha may la bang chung nang luc, giu mau that va thay tron khung. */
.av-home-page .hero-bg{
  background:#E9ECE9;
  box-shadow:inset 1px 0 rgba(23,33,39,.10);
}
.av-home-page .hero-bg img{
  object-fit:contain;
  object-position:center;
  filter:none;
}
.av-home-page .hero-panel{
  box-shadow:0 10px 26px rgba(23,33,39,.075);
}

/* Phat trien ben vung: toi phia chu, sang tu nhien tai may va cong nhan. */
.av-esg-page .hero>img{
  opacity:1;
  object-position:56% 48%;
  filter:saturate(.92) contrast(1.055) brightness(1.025);
}
.av-esg-page .hero::before{
  background:
    linear-gradient(90deg,
      rgba(23,33,39,.94) 0%,
      rgba(23,33,39,.82) 27%,
      rgba(23,33,39,.48) 44%,
      rgba(23,33,39,.12) 61%,
      transparent 74%),
    linear-gradient(0deg,rgba(23,33,39,.32),transparent 36%);
}
.av-esg-page .hero::after{
  background:radial-gradient(
    ellipse at 69% 55%,
    rgba(255,255,255,.055) 0%,
    rgba(255,255,255,.025) 28%,
    transparent 50%
  );
}
.av-esg-page .hero h1{max-width:700px}
.av-esg-page .hero-statement{max-width:610px}

/* Gioi thieu: giam lop toi kep, giu chi tiet day may. */
.av-about-page .factory-photo img{
  filter:saturate(.91) contrast(1.045) brightness(1.025);
}
.av-about-page .factory-photo::after{
  background:linear-gradient(180deg,
    transparent 72%,
    rgba(23,33,39,.20) 100%);
}
.av-about-page .factory-copy{
  background:linear-gradient(135deg,#2e393f,#222a2f);
}

/* Chat luong: cung mot nhiet do mau xanh than An Viet. */
.av-quality-standalone .av-quality-hero-photo img{
  filter:saturate(.91) contrast(1.05) brightness(1.025);
}
.av-quality-standalone .av-quality-hero-photo figcaption,
.av-quality-standalone .av-quality-field-caption{
  background:linear-gradient(
    0deg,
    rgba(23,33,39,.94) 0%,
    rgba(23,33,39,.56) 46%,
    transparent 100%
  );
}

@media(hover:hover) and (pointer:fine){
  .sub-card-image img,
  .av-quality-standalone .av-quality-field-card img,
  .av-about-page .factory-photo img{
    transition:transform .45s ease;
  }
  .sub-card:hover .sub-card-image img,
  .av-quality-standalone .av-quality-field-card:hover img,
  .av-about-page .factory-feature:hover .factory-photo img{
    transform:scale(1.015);
  }
}

@media(max-width:1100px){
  .av-home-page .site-header .nav{position:relative}
  .av-home-page .site-header .navlinks{
    position:absolute;
    top:100%;
  }
}

/* Loi gioi thieu: giu ten cong ty mot dong va van co menu tren dien thoai. */
@media(max-width:820px){
  .av-intro-page .topbar{position:relative}
  .av-intro-page .nav{
    min-height:0;
    padding:8px 0 10px;
    flex-wrap:wrap;
  }
  .av-intro-page .brand{
    flex:1 1 230px;
    max-width:calc(100% - 104px);
  }
  .av-intro-page .brand span{
    overflow:hidden;
    font-size:clamp(8.2px,2.8vw,11.5px);
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .av-intro-page .menu{
    order:3;
    width:100%;
    display:flex;
    gap:3px;
    padding:2px 0 4px;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:thin;
  }
  .av-intro-page .menu a{
    min-height:44px;
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    padding:8px 10px;
    white-space:nowrap;
  }
  .av-lang-switch button{
    min-width:44px;
    min-height:44px;
  }
}

@media(max-width:700px){
  .sub-section{padding:54px 0}
  .av-site-globalnav a{min-height:44px;padding:10px 11px;font-size:12px}
  .av-esg-page .hero>img{
    opacity:.96;
    object-position:59% 50%;
    filter:saturate(.91) contrast(1.05) brightness(1.01);
  }
  .av-esg-page .hero::before{
    background:linear-gradient(180deg,
      rgba(23,33,39,.14) 0%,
      rgba(23,33,39,.40) 46%,
      rgba(23,33,39,.91) 100%);
  }
  .av-esg-page .hero::after{background:none}
}

@media(prefers-reduced-motion:reduce){
  .sub-card-image img,
  .av-about-page .factory-photo img,
  .av-quality-standalone .av-quality-field-card img,
  .av-esg-page .hero>img{
    transition:none!important;
    transform:none!important;
    animation:none!important;
  }
}