/* =========================================================
   SƠN HÀ NGHỆ AN — CSS dùng chung cho mọi trang
   Chứa: tokens · base · .page · header · ribbon · button
         · footer · floating contact
   CSS riêng của từng trang để trong <style> của trang đó.
   ========================================================= */

/* ============ TOKENS (đồng bộ biến Figma collection "Color") ============ */
:root{
  /* Font: Helvetica Neue có sẵn trên macOS -> đúng thiết kế.
     Máy khác dùng Inter (webfont, cùng họ neo-grotesque, đủ dấu tiếng Việt).
     ⚠️ Không nhúng được Helvetica Neue: font thương mại có bản quyền (Monotype).
     Nếu mua web license: thêm @font-face rồi sửa đúng 1 dòng dưới đây. */
  --font: "Helvetica Neue", Inter, Helvetica, Arial, sans-serif;

  --brand:#ca2128;
  --brand-deep:#b3171d;
  --brand-soft:#fce8e9;
  --ink:#1c1f23;
  --ink-soft:#4a4f57;
  --muted:#6e6e6e;
  --line:#e7e9ee;
  --bg:#ffffff;
  --bg-alt:#f5f6f8;

  --page:1440px;
  --gutter:100px;
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg-alt);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p{margin:0;}
h1,h2,h3{text-wrap:balance;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

/* Trang 1440 căn giữa, co lại mượt khi màn hình nhỏ hơn */
.page{width:100%;max-width:var(--page);margin:0 auto;background:var(--bg);overflow:hidden;}
.container{padding-inline:var(--gutter);}

/* ============ BUTTON ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;width:fit-content;
  padding:15px 30px;font-size:16px;font-weight:700;
  transition:background-color .18s ease;
}
.btn--primary{background:var(--brand);color:#fff;}
.btn--primary:hover{background:var(--brand-deep);}
.btn--outline{border:1px solid var(--ink);color:var(--ink);background:transparent;}
.btn--outline:hover{background:var(--ink);color:#fff;}
.btn--outline:hover .btn__icon{filter:brightness(0) invert(1);}
.btn__icon{width:18px;height:18px;}

/* ============ HEADER ============ */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--gutter);
  background:var(--bg);
}
.logo{width:170px;height:44px;object-fit:contain;}
.nav{display:flex;align-items:center;gap:30px;}
.nav__link{
  font-size:15px;font-weight:500;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;transition:color .18s ease;
}
.nav__link:hover{color:var(--brand);}
.nav__link.is-active{font-weight:700;color:var(--brand);}
.nav__search{width:20px;height:20px;}
.nav__lang{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;text-transform:uppercase;white-space:nowrap;}
.nav__caret{font-size:8px;line-height:12px;}

/* ============ NAV DROPDOWN (hover desktop) — theo Figma 453:263 ============ */
.nav__item{position:relative;display:flex;align-items:center;}
.nav__item > .nav__link{display:inline-flex;align-items:center;gap:6px;}
.nav__item > .nav__link::after{content:"▾";font-size:9px;opacity:.65;transition:transform .16s ease;}
.nav__item:hover > .nav__link::after{transform:rotate(180deg);}

.drop{
  position:absolute;top:100%;left:0;z-index:60;min-width:236px;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.14);padding:12px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__item:hover > .drop{opacity:1;visibility:visible;transform:translateY(4px);}
.drop__link{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 14px;border-radius:8px;font-size:14px;font-weight:500;
  color:var(--ink);text-transform:none;white-space:nowrap;
  transition:background-color .14s ease, color .14s ease;
}
.drop__link:hover{background:var(--brand-soft);color:var(--brand);}
.drop__caret{font-size:15px;color:var(--muted);}

/* Cascade cấp 2 (Sản phẩm) */
.drop__cat{position:relative;}
.drop__sub{
  position:absolute;top:-13px;left:100%;margin-left:6px;min-width:252px;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.14);padding:14px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateX(10px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.drop__cat:hover > .drop__sub{opacity:1;visibility:visible;transform:translateX(0);}
.drop__cat:hover > .drop__link{background:var(--brand-soft);color:var(--brand);}
.drop__sub-title{padding:2px 8px 8px;font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--brand);text-transform:uppercase;}
.drop__sub a{padding:9px 12px;border-radius:8px;font-size:14px;color:var(--ink);white-space:nowrap;transition:background-color .14s ease, color .14s ease;}
.drop__sub a:hover{background:var(--brand-soft);color:var(--brand);}

/* Hamburger (chỉ hiện ở tablet/mobile) */
.nav__toggle{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;padding:9px;}
.nav__toggle span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav__toggle.is-open span:nth-child(2){opacity:0;}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============ RIBBON (nhãn section đỏ đầu nhọn) — tự co theo độ dài chữ ============ */
.ribbon{position:relative;display:inline-flex;height:66px;isolation:isolate;}
/* lớp tối lệch 6px tạo chiều sâu */
.ribbon::before{
  content:"";position:absolute;inset:0;transform:translateX(6px);
  background:#6c181c;z-index:-1;
  clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 52.7%, calc(100% - 30px) 100%, 0 100%);
}
/* chevron phụ ló ra ngoài mũi */
.ribbon::after{
  content:"";position:absolute;top:0;right:-19px;width:36.5px;height:66px;
  background:url("../site/ribbon-tail.svg") no-repeat center/contain;
}
.ribbon__text{
  display:inline-flex;align-items:center;height:66px;
  padding:0 80px 0 40px;
  background:var(--brand);color:#fff;
  font-size:28px;font-weight:700;line-height:1.04;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 52.7%, calc(100% - 30px) 100%, 0 100%);
}

/* ============ DOT (chỉ báo carousel) ============ */
.dot{height:5px;width:9px;border-radius:3px;background:rgba(255,255,255,.5);border:0;padding:0;}
.dot.is-active{width:26px;background:var(--brand);}

/* ============ CHỨNG NHẬN & GIẢI THƯỞNG (dùng ở Trang chủ + Giới thiệu) ============ */
.certs{position:relative;background:var(--bg);padding:80px var(--gutter);}
.certs__head{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-bottom:48px;}
.certs__lead{width:682px;max-width:100%;font-size:16px;line-height:1.4;color:var(--ink);}

.certs__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:48px;}
.certs__tabs{display:flex;align-items:center;gap:12px;}
.tab{padding:15px 30px;font-size:16px;font-weight:700;}
.tab--on{background:var(--brand);color:#fff;}
.tab--off{background:var(--bg-alt);border:1px solid var(--line);color:var(--ink);}
.tab--off:hover{border-color:var(--brand);color:var(--brand);}
.certs__all{font-size:15px;font-weight:700;color:var(--brand);white-space:nowrap;}
.certs__all:hover{color:var(--brand-deep);}

.certs__grid{display:flex;gap:22px;align-items:stretch;}
.badge{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;align-items:center;
  padding:30px 40px 20px;background:var(--bg);border:1px solid var(--line);
}
.badge__icon{
  display:flex;align-items:center;justify-content:center;
  padding:14px;border-radius:999px;background:var(--brand-soft);flex:none;
}
.badge__icon img{width:24px;height:24px;}
.badge__year{font-size:22px;font-weight:700;line-height:1.4;color:var(--brand);text-align:center;}
.badge__img{width:100%;aspect-ratio:258/327;object-fit:cover;flex:none;}
.badge__name{font-size:18px;font-weight:700;line-height:1.4;text-align:center;color:var(--ink);}

.certs__dots{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:10px;margin-top:48px;}
.certs__dots .dot{background:rgba(108,108,108,.5);}
.certs__dots .dot.is-active{background:var(--brand);}
.certs__nav{
  position:absolute;left:76px;width:1288px;top:calc(50% + 70px);transform:translateY(-50%);
  display:flex;align-items:center;justify-content:space-between;pointer-events:none;
}
.certs__nav button{width:48px;height:48px;pointer-events:auto;border-radius:999px;transition:transform .18s ease;}
.certs__nav button:hover{transform:scale(1.06);}

/* ============ FOOTER ============ */
.footer{background:#14171c;color:#fff;}
.footer__top{display:flex;align-items:flex-start;justify-content:space-between;padding:72px var(--gutter) 56px;}
.footer__brand{display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
.footer__logo{width:130px;height:34px;object-fit:contain;}
.footer__company{font-size:20px;font-weight:700;line-height:1.65;}
.footer__info{display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:#d1d1d1;line-height:1.5;}
.footer__info b{color:#fff;font-weight:700;}
.footer__social{display:flex;gap:10px;align-items:flex-start;padding-top:6px;}
.footer__social a{width:34px;height:34px;border-radius:900px;overflow:hidden;transition:transform .18s ease;}
.footer__social a:hover{transform:translateY(-2px);}
.footer__zalo{
  display:flex;align-items:center;justify-content:center;
  background:#0f71ee;font-size:11px;font-weight:700;color:#fff;
}
.footer__cols{display:flex;gap:64px;align-items:flex-start;}
.footer__col{display:flex;flex-direction:column;gap:14px;align-items:flex-start;white-space:nowrap;}
.footer__col-title{font-size:16px;font-weight:700;color:#fff;}
.footer__col a{font-size:14.5px;color:#d1d1d1;}
.footer__col a:hover{color:#fff;}
.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);background:var(--ink);
  font-size:13.5px;color:var(--bg);
}
.footer__bottom a:hover{color:var(--brand-soft);}

/* ============ FLOATING CONTACT ============ */
.floating{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:12px;}
.floating a{
  width:52px;height:52px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.2);transition:transform .18s ease;
}
.floating a:hover{transform:scale(1.07);}
.floating__hotline{background:var(--brand);}
.floating__fb{background:#1778f2;}
.floating__zalo{background:#0069ff;font-size:13px;font-weight:700;color:#fff;}
.floating__hotline img{width:24px;height:24px;}
.floating__fb img{width:26px;height:26px;}

/* ============ BANNER TRANG CON (ảnh full-width) ============ */
.pagebanner{height:380px;overflow:hidden;}
.pagebanner img{width:100%;height:100%;object-fit:cover;}

/* Tiêu đề trang + breadcrumb (nền trắng, NGAY DƯỚI banner) */
.pagehead{display:flex;flex-direction:column;gap:14px;align-items:flex-start;white-space:nowrap;}
.pagehead__title{font-size:44px;font-weight:700;line-height:52px;color:var(--ink);text-transform:uppercase;}
.pagehead__crumb{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink);}
.pagehead__crumb .sep{color:rgba(0,0,0,.7);}
.pagehead__crumb .cur{font-weight:500;}
.pagehead__crumb a:hover{color:var(--brand);}

/* ============ LIGHTBOX (bấm ảnh phóng to trong trang) ============ */
img.zoomable{cursor:zoom-in;transition:filter .15s ease;}
img.zoomable:hover{filter:brightness(.94);}
.lightbox{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(14,16,21,.92);
  opacity:0;transition:opacity .2s ease;
}
.lightbox.is-open{display:flex;opacity:1;}
.lightbox__img{
  max-width:96vw;max-height:88vh;object-fit:contain;
  background:#fff;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.5);
  cursor:zoom-out;
}
.lightbox__cap{
  position:absolute;left:0;right:0;bottom:18px;
  padding:0 24px;text-align:center;color:#fff;font-size:14px;line-height:1.5;
}
.lightbox__close{
  position:fixed;top:18px;right:20px;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border-radius:999px;color:#fff;font-size:22px;line-height:1;
  transition:background-color .15s ease;
}
.lightbox__close:hover{background:rgba(255,255,255,.28);}
@media (max-width:600px){
  .lightbox{padding:12px;}
  .lightbox__close{top:10px;right:12px;width:42px;height:42px;}
}

/* =========================================================
   RESPONSIVE — phần DÙNG CHUNG (header, nav, footer, ribbon,
   certs, pagebanner…). Responsive của section riêng nằm trong
   <style> của từng trang (@media ... ).
   ========================================================= */
html,body{overflow-x:hidden;}

/* Gutter co dần theo bề rộng màn hình */
@media (max-width:1200px){ :root{ --gutter:56px; } }
@media (max-width:768px){ :root{ --gutter:24px; } }
@media (max-width:480px){ :root{ --gutter:16px; } }

/* ---- Header: hamburger + menu trượt (≤1024) ---- */
@media (max-width:1024px){
  .header{position:relative;flex-wrap:wrap;}
  .nav__toggle{display:flex;}
  .nav{
    order:3;position:absolute;top:100%;left:0;right:0;z-index:70;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-top:1px solid var(--line);
    box-shadow:0 16px 30px rgba(0,0,0,.12);
    padding:6px var(--gutter) 18px;
    max-height:calc(100vh - 84px);overflow-y:auto;display:none;
  }
  .nav.is-open{display:flex;}
  .nav > .nav__link,
  .nav__item > .nav__link{
    width:100%;padding:14px 2px;font-size:15px;border-bottom:1px solid var(--line);
  }
  .nav__item{flex-direction:column;align-items:stretch;}
  .nav__item > .nav__link{justify-content:space-between;}
  .nav__item > .nav__link::after{content:"+";font-size:20px;line-height:1;opacity:.8;transform:none;}
  .nav__item.is-open > .nav__link::after{content:"\2013";}
  /* dropdown -> accordion (JS bật .is-open) */
  .drop{
    position:static;display:none;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-radius:0;padding:2px 0 8px 12px;min-width:0;
  }
  .nav__item.is-open > .drop{display:flex;}
  .drop__link{padding:11px 2px;white-space:normal;}
  .drop__cat > .drop__link::after{content:"+";font-size:18px;color:var(--muted);}
  .drop__cat.is-open > .drop__link::after{content:"\2013";}
  .drop__cat > .drop__link .drop__caret{display:none;}
  .drop__sub{
    position:static;display:none;margin:0;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-radius:0;padding:2px 0 6px 12px;min-width:0;
  }
  .drop__cat.is-open > .drop__sub{display:flex;}
  .drop__sub a{white-space:normal;padding:9px 2px;}
  .nav__search,.nav__lang{align-self:flex-start;padding:12px 2px;}
}

/* ---- Ribbon nhỏ lại ---- */
@media (max-width:600px){
  .ribbon{height:52px;}
  .ribbon::before,.ribbon__text{clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 52.7%, calc(100% - 22px) 100%, 0 100%);}
  .ribbon::after{width:28px;height:52px;right:-15px;}
  .ribbon__text{height:52px;font-size:19px;padding:0 52px 0 22px;line-height:1.1;}
}

/* ---- Banner con + tiêu đề trang ---- */
@media (max-width:768px){
  .pagebanner{height:200px;}
  .pagehead{white-space:normal;}
  .pagehead__title{font-size:28px;line-height:1.2;}
  .pagehead__crumb{flex-wrap:wrap;font-size:13.5px;}
}

/* ---- Chứng nhận (xếp lại) ---- */
@media (max-width:900px){
  .certs__grid{flex-wrap:wrap;}
  .badge{flex:1 1 calc(50% - 11px);min-width:calc(50% - 11px);}
  .certs__nav{display:none;}
}
@media (max-width:560px){
  .certs__bar{flex-direction:column;align-items:flex-start;gap:16px;}
  .badge{flex-basis:100%;min-width:100%;}
}

/* ---- Footer (xếp dọc) ---- */
@media (max-width:900px){
  .footer__top{flex-direction:column;gap:36px;}
  .footer__cols{gap:48px;flex-wrap:wrap;}
}
@media (max-width:560px){
  .footer__cols{gap:32px;}
  .footer__bottom{flex-direction:column;gap:8px;align-items:flex-start;}
}

/* ---- Floating contact ---- */
@media (max-width:768px){
  .floating{right:12px;top:auto;bottom:14px;transform:none;gap:10px;}
  .floating a{width:46px;height:46px;}
}