/* ══════════════════════════════════════════
   Outsource2Vietnam — Shared Stylesheet
   Forest · Copper · Chalk · Carbon
   style.css — edit once, applies everywhere
══════════════════════════════════════════ */

:root{
--forest:#1B3A2D; --forest-mid:#2A5741; --forest-lt:#3D7A5A; --forest-pale:#C8DDD4;
--copper:#B5621E; --copper-lt:#D4834A; --copper-pale:#F0DACE;
--chalk:#F4F1EC; --chalk-warm:#EDE8DF; --chalk-cool:#FAFAF8;
--carbon:#1A1A18; --carbon-mid:#333330; --carbon-lt:#5C5C58; --carbon-fade:#9C9C96;
--amber:#D4A017; --amber-pale:#F5E8C0;
--rule:rgba(26,26,24,.1); --rule-dark:rgba(244,241,236,.12);
--ff-h:'Bebas Neue',Impact,sans-serif;
--ff-b:'Nunito Sans',system-ui,sans-serif;
--ff-m:'JetBrains Mono','Courier New',monospace;
--pad:52px; --max:1400px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:15px;}
body{background:var(--chalk);color:var(--carbon);font-family:var(--ff-b);line-height:1.65;overflow-x:hidden;}

/* ── NAV ── */
.site-nav{position:sticky;top:0;z-index:200;background:#0A0F1E;border-bottom:3px solid var(--copper);padding:0 var(--pad);height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.nav-logo{display:inline-flex;align-items:center;text-decoration:none;cursor:default;}
.nav-logo .acc{color:var(--copper-lt);}
.nav-center{flex:1;display:flex;justify-content:center;align-items:center;gap:8px;}
.nav-list-btn{background:none;border:1px solid var(--copper-lt);color:var(--copper-lt);font-family:var(--ff-b);font-size:19px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:12px 31px;cursor:pointer;transition:all .2s;}
.nav-list-btn:hover{border-color:rgba(244,241,236,.25);color:rgba(244,241,236,.75);}
.nav-right{display:flex;align-items:center;gap:6px;}

/* Buttons */
.btn-primary{background:var(--copper);color:white;padding:13px 28px;font-family:var(--ff-h);font-size:17px;letter-spacing:1px;border:none;cursor:pointer;transition:all .2s;}
.btn-primary:hover{background:var(--copper-lt);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--chalk);padding:12px 24px;font-family:var(--ff-h);font-size:17px;letter-spacing:1px;border:1px solid rgba(244,241,236,.25);cursor:pointer;transition:all .2s;}
.btn-outline:hover{border-color:var(--copper-lt);color:var(--copper-lt);}
.btn-white{background:white;color:var(--copper);padding:13px 28px;font-family:var(--ff-h);font-size:17px;letter-spacing:1px;border:none;cursor:pointer;transition:all .2s;}
.btn-white:hover{background:var(--chalk);transform:translateY(-1px);}

/* Hamburger */
.hamburger{background:none;border:none;cursor:pointer;padding:8px;display:flex;flex-direction:column;gap:5px;justify-content:center;}
.hamburger span{display:block;width:22px;height:2px;background:var(--chalk);transition:all .3s;}
.hamburger:hover span{background:var(--copper-lt);}

/* Dropdown menu */
.nav-dropdown{position:absolute;top:73px;right:var(--pad);background:var(--carbon-mid);border:1px solid rgba(244,241,236,.1);border-top:3px solid var(--copper);min-width:260px;z-index:300;display:none;flex-direction:column;}
.nav-dropdown.open{display:flex;}
.nav-dd-item{background:none;border:none;border-bottom:1px solid rgba(244,241,236,.06);color:rgba(244,241,236,.6);font-family:var(--ff-b);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:14px 20px;cursor:pointer;text-align:left;transition:all .2s;display:block;width:100%;text-decoration:none;}
.nav-dd-item:hover{color:var(--copper-lt);background:rgba(244,241,236,.04);}
.nav-dd-item:last-child{border-bottom:none;}
.nav-dd-divider{height:1px;background:rgba(244,241,236,.1);margin:8px 0;}
.nav-dd-section{font-family:var(--ff-m);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(244,241,236,.3);padding:16px var(--pad) 6px;}

/* Mobile full-screen menu */
@media(max-width:640px){
  .nav-center{display:none;}
  .lang-select{display:none;}
  .nav-dropdown{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;min-width:unset;border:none;border-top:none;background:var(--carbon);z-index:500;overflow-y:auto;padding:80px 0 40px;}
  .nav-dropdown.open{display:flex;flex-direction:column;}
  .nav-dd-item{font-size:16px;padding:20px var(--pad);border-bottom:1px solid rgba(244,241,236,.08);letter-spacing:.5px;}
  .nav-dd-mobile-close{display:flex !important;}
  .hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.is-open span:nth-child(2){opacity:0;}
  .hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}
.nav-dd-mobile-close{display:none;background:none;border:none;color:rgba(244,241,236,.5);font-family:var(--ff-m);font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:16px var(--pad);cursor:pointer;text-align:right;position:absolute;top:16px;right:20px;}

/* Language selector */
.lang-select{position:relative;}
.lang-btn{background:none;border:1px solid rgba(244,241,236,.15);color:rgba(244,241,236,.6);font-family:var(--ff-m);font-size:11px;letter-spacing:1px;padding:6px 10px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s;}
.lang-btn:hover{border-color:var(--copper-lt);color:var(--copper-lt);}
.lang-globe{font-size:13px;}
.lang-caret{font-size:8px;opacity:.6;}
.lang-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--carbon-mid);border:1px solid rgba(244,241,236,.1);border-top:3px solid var(--copper);min-width:180px;z-index:400;display:none;flex-direction:column;}
.lang-select.open .lang-dropdown{display:flex;}
.lang-dd-item{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;text-decoration:none;border-bottom:1px solid rgba(244,241,236,.05);transition:background .15s;}
.lang-dd-item:hover{background:rgba(244,241,236,.04);}
.lang-dd-item:last-child{border-bottom:none;}
.lang-flag{font-size:15px;line-height:1;}
.lang-name{font-family:var(--ff-b);font-size:12px;color:rgba(244,241,236,.65);flex:1;}
.lang-dd-item.active .lang-name{color:var(--copper-lt);font-weight:700;}
.lang-badge{font-family:var(--ff-m);font-size:8px;letter-spacing:1px;text-transform:uppercase;background:rgba(181,98,30,.2);color:var(--copper-lt);padding:1px 5px;}

/* ── BREADCRUMB ── */
.breadcrumb{background:var(--forest);padding:10px var(--pad);display:flex;align-items:center;gap:6px;font-family:var(--ff-m);font-size:12px;letter-spacing:.5px;flex-wrap:wrap;border-bottom:1px solid rgba(244,241,236,.1);}
.bc-item{color:rgba(244,241,236,.85);cursor:pointer;transition:color .2s;text-transform:uppercase;text-decoration:none;}
.bc-item:hover{color:var(--copper-lt);}
.bc-sep{color:rgba(244,241,236,.55);}
.bc-current{color:var(--copper-lt);font-weight:700;letter-spacing:.6px;}

/* ── PAGE TRANSITIONS ── */
#app{min-height:100vh;}
.page-enter{animation:pageIn .35s ease forwards;}
@keyframes pageIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

/* ── SHARED UTILITIES ── */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad);}

/* ── FOOTER ── */
.site-footer{background:var(--carbon);border-top:3px solid var(--copper);padding:64px var(--pad) 32px;}
.sf-inner{max-width:var(--max);margin:0 auto;}
.sf-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;}
@media(max-width:1000px){.sf-top{grid-template-columns:1fr 1fr;}}
@media(max-width:580px){.sf-top{grid-template-columns:1fr;}}
.sf-brand-logo{margin-bottom:16px;}
.sf-brand-desc{font-size:13px;color:rgba(244,241,236,.4);line-height:1.7;margin-bottom:20px;max-width:320px;}
.sf-social{display:flex;gap:16px;flex-wrap:wrap;}
.sf-social-link{font-family:var(--ff-m);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:rgba(244,241,236,.3);text-decoration:none;transition:color .2s;}
.sf-social-link:hover{color:var(--copper-lt);}
.sf-col-title{font-family:var(--ff-m);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(244,241,236,.25);margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid rgba(244,241,236,.06);}
.sf-col-links{display:flex;flex-direction:column;gap:10px;}
.sf-col-links a,.sf-col-links button{font-family:var(--ff-b);font-size:13px;color:rgba(244,241,236,.5);text-decoration:none;background:none;border:none;cursor:pointer;text-align:left;padding:0;transition:color .2s;}
.sf-col-links a:hover,.sf-col-links button:hover{color:var(--copper-lt);}
.sf-bottom{border-top:1px solid rgba(244,241,236,.08);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-family:var(--ff-m);font-size:10px;letter-spacing:1px;color:rgba(244,241,236,.3);}
.sf-bottom-center{display:flex;align-items:center;}
.sf-bottom-links{display:flex;gap:16px;}
.sf-bottom-links a{color:rgba(244,241,236,.3);text-decoration:none;transition:color .2s;}
.sf-bottom-links a:hover{color:var(--copper-lt);}

/* Share buttons */
.share-container{display:flex;align-items:center;gap:10px;}
.share-title{font-family:var(--ff-m);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:rgba(244,241,236,.35);}
.share-buttons{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.share-btn{font-family:var(--ff-m);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:rgba(244,241,236,.4);text-decoration:none;transition:color .2s;}
.share-btn:hover{color:var(--copper-lt);}

/* Scroll to top */
.stt{position:fixed;bottom:24px;right:24px;width:44px;height:44px;background:var(--copper);color:white;border:none;font-size:18px;cursor:pointer;z-index:150;opacity:0;transition:opacity .3s,background .2s;}
.stt:hover{background:var(--copper-lt);}