/* =========================================================
   BẾP SINH — style.css
   Base tokens, reset, typography, layout utilities
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ---- Brand color tokens ---- */
  --bs-green-900:#0B3A2B;
  --bs-green-700:#146B4C;
  --bs-green-600:#1C8459;
  --bs-green-100:#E7F3EC;
  --bs-blue-700:#123E73;
  --bs-blue-500:#1B5FA8;
  --bs-white:#FFFFFF;
  --bs-off-white:#F7F8F6;
  --bs-gray-50:#F1F2F0;
  --bs-gray-200:#E1E4E1;
  --bs-gray-400:#9AA39D;
  --bs-gray-600:#5C655F;
  --bs-ink:#12201A;
  --bs-ink-soft:#42504A;

  --font-display:'Be Vietnam Pro', 'Inter', system-ui, sans-serif;
  --font-body:'Inter', 'Be Vietnam Pro', system-ui, sans-serif;

  --container:1280px;
  --header-h:136px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;

  --shadow-card:0 10px 30px rgba(11,58,43,0.08);
  --shadow-hover:0 16px 40px rgba(11,58,43,0.14);

  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--bs-ink);
  background:linear-gradient(180deg, #fcfefc 0%, #f5f8f4 100%);
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
  font-size:16px;
  letter-spacing:0.001em;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:inherit;}

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--bs-green-900);
  margin:0;
  font-weight:700;
  letter-spacing:-0.01em;
}

::selection{background:rgba(20,107,76,0.2); color:var(--bs-green-900);}

:focus-visible{
  outline:2px solid var(--bs-blue-500);
  outline-offset:2px;
}

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

main{display:block;}

/* ---- Eyebrow / section heading pattern ---- */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:36px;
  flex-wrap:wrap;
}
.eyebrow{
  display:none;
}
.section-title{
  font-size:clamp(26px,3vw,38px);
  line-height:1.1;
  font-weight:800;
}
.section-head h2,
.page-hero h1,
.hero-slide-content h1{
  font-weight:800;
}
.section-sub{
  color:var(--bs-ink-soft);
  font-size:15px;
  max-width:520px;
  margin-top:10px;
}
.section-link{
  font-weight:600;
  font-size:14px;
  color:var(--bs-green-700);
  white-space:nowrap;
  border-bottom:1px solid var(--bs-green-700);
  padding-bottom:2px;
  transition:color .2s var(--ease);
}
.section-link:hover{color:var(--bs-green-900);}

section{padding:72px 0;}
.section-alt{background:var(--bs-off-white);}
.section-dark{background:var(--bs-green-900); color:#fff;}
.section-dark h2,.section-dark h3{color:#fff;}
.section-dark .eyebrow{color:#8FD4B3;}
.section-dark .eyebrow::before{background:#8FD4B3;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border-radius:999px;
  border:1.5px solid transparent;
  transition:all .2s var(--ease);
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(11,58,43,0.08);
}
.btn:hover{transform:translateY(-1px); box-shadow:0 12px 24px rgba(11,58,43,0.16);}
.btn-primary{background:var(--bs-green-700); color:#fff; border-color:var(--bs-green-700);}
.btn-primary:hover{background:var(--bs-green-900); border-color:var(--bs-green-900);}
.btn-outline{background:transparent; color:var(--bs-green-900); border-color:var(--bs-green-900);}
.btn-outline:hover{background:var(--bs-green-900); color:#fff;}
.btn-white{background:#fff; color:var(--bs-green-900); border-color:#fff;}
.btn-white:hover{background:transparent; color:#fff;}
.btn-blue{background:var(--bs-blue-700); color:#fff; border-color:var(--bs-blue-700);}
.btn-blue:hover{background:#0D2C52;}
.btn-block{width:100%;}
.btn-sm{padding:9px 18px; font-size:11.5px;}

/* ---- Breadcrumb ---- */
.breadcrumb{
  font-size:13px;
  color:var(--bs-gray-600);
  padding:16px 0;
  border-bottom:1px solid var(--bs-gray-200);
}
.breadcrumb a{color:var(--bs-gray-600);}
.breadcrumb a:hover{color:var(--bs-green-700);}
.breadcrumb span{margin:0 6px; color:var(--bs-gray-400);}
.breadcrumb .current{color:var(--bs-ink);}

/* ---- Page hero (interior pages) ---- */
.page-hero{
  background:var(--bs-green-900);
  color:#fff;
  padding:52px 0;
  position:relative;
  overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute; right:-60px; top:-60px;
  width:320px; height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(143,212,179,.18), transparent 70%);
}
.page-hero h1{color:#fff; font-size:clamp(28px,4vw,42px);}
.page-hero p{color:#C9E4D6; max-width:560px; margin-top:10px;}

/* ---- Tag / badge ---- */
.tag{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:2px;
  background:var(--bs-green-100);
  color:var(--bs-green-700);
}
.tag-blue{background:#E8F0FA; color:var(--bs-blue-700);}

/* ---- Utility ---- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.visually-hidden{
  position:absolute; width:1px;height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:2000;
  background:#fff; color:#0B3A2B; padding:10px 16px; font-weight:700;
}
.skip-link:focus{left:12px; top:12px;}

/* ---- Placeholder image note ribbon (dev-only visual cue) ---- */
[data-ph]{position:relative;}

/* ---- Back to top ---- */
.back-to-top{
  position:fixed; right:24px; bottom:88px;
  width:44px; height:44px;
  background:var(--bs-green-900); color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:none; box-shadow:var(--shadow-card);
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:all .25s var(--ease);
  z-index:400;
}
.back-to-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}