/* ============================================================
   TƯỜNG VY CHEMICAL — Design tokens
   Palette: warm-black / aged-gold, echoing the brand mark.
   Display: Cormorant Garamond · Body: Manrope · Data: IBM Plex Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #0a0906;
  --ink-2:      #14110c;
  --ink-3:      #1e1912;
  --ink-4:      #2a2318;
  --gold:       #c9a24a;
  --gold-bright:#e9cd84;
  --gold-dim:   #8a7038;
  --ivory:      #ffffff;
  --stone:      #d4cfc4;
  --stone-dim:  #a8a295;
  --line:       rgba(201,162,74,0.22);
  --line-soft:  rgba(201,162,74,0.10);

  --display: 'Cormorant Garamond', serif;
  --body:    'Manrope', sans-serif;
  --mono:    'IBM Plex Mono', monospace;

  --max: 1180px;
  --pad: clamp(1.25rem, 4vw, 4rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--body);
  font-size:20px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.modal-open{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }

:focus-visible{
  outline:1.5px solid var(--gold-bright);
  outline-offset:3px;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  color:var(--ivory);
  letter-spacing:0.01em;
  line-height:1.2;
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold);
}

.label-gold{
  display:inline-block;
  background:var(--gold);
  color:var(--ink);
  font-family:var(--body);
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:0.45rem 1.2rem;
  border-radius:2px;
  margin-bottom:1.4rem;
}

.section{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(4rem, 8vw, 7rem) var(--pad);
}

section[id]{ scroll-margin-top:82px; }

.inline-head{
  padding:5rem var(--pad) 0;
  max-width:var(--max);
  margin:0 auto;
}
.inline-head .crumb{ margin-bottom:1.4rem; }
.inline-head h1{ font-size:clamp(2.3rem, 4.5vw, 3.4rem); max-width:22ch; }
.inline-head p{ color:var(--stone); max-width:60ch; margin-top:1rem; font-size:1.15rem; }

.divider{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  border:none;
}

/* ---------- background bond-line texture (signature motif) ---------- */
.bond-field{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.5;
  z-index:0;
}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(10,9,6,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0.85rem var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:0.7rem;
}
.brand img{
  height:38px;
  width:38px;
  border-radius:50%;
  object-fit:cover;
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.brand-text .vi{
  font-family:var(--display);
  font-size:1.15rem;
  color:var(--ivory);
  letter-spacing:0.02em;
}
.brand-text .tag{
  font-family:var(--mono);
  font-size:0.6rem;
  letter-spacing:0.24em;
  color:var(--gold);
  text-transform:uppercase;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:2.1rem;
}
.nav-links a{
  font-size:0.86rem;
  color:var(--stone);
  transition:color 0.25s;
  position:relative;
}
.nav-links a:hover, .nav-links a.active{ color:var(--gold-bright); }
.nav-links a.active::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:1px;
  background:var(--gold);
}
.nav-cta{
  border:1px solid var(--gold-dim);
  padding:0.55rem 1.3rem;
  font-size:0.8rem;
  letter-spacing:0.04em;
  border-radius:2px;
  transition:all 0.25s;
  white-space:nowrap;
}
.nav-cta:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  color:var(--gold);
  padding:0.5rem 0.7rem;
  border-radius:2px;
  font-size:1rem;
}

@media (max-width:860px){
  .nav-links{
    position:fixed;
    top:64px; left:0; right:0;
    background:var(--ink-2);
    border-bottom:1px solid var(--line-soft);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:0.5rem var(--pad) 1.2rem;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:all 0.25s;
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ padding:0.75rem 0; width:100%; border-bottom:1px solid var(--line-soft); }
  .nav-cta{ margin-top:0.75rem; text-align:center; }
  .nav-toggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:min(88vh, 760px);
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.hero-inner{
  position:relative;
  z-index:2;
  max-width:var(--max);
  margin:0 auto;
  padding:6rem var(--pad) 4rem;
  width:100%;
}
.hero .eyebrow{ margin-bottom:1.4rem; display:block; }
.hero h1{
  font-size:clamp(3rem, 7vw, 5.5rem);
  line-height:1.1;
  max-width:14ch;
  margin-bottom:1.6rem;
}
.hero h1 em{
  font-style:italic;
  color:var(--gold);
}
.hero p.lede{
  font-size:1.25rem;
  color:var(--stone);
  max-width:52ch;
  margin-bottom:2.3rem;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.9rem 1.9rem;
  font-family:var(--body);
  font-size:0.86rem;
  letter-spacing:0.03em;
  border-radius:2px;
  transition:all 0.25s;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-gold{ background:var(--gold); color:var(--ink); font-weight:600; }
.btn-gold:hover{ background:var(--gold-bright); }
.btn-ghost{ border-color:var(--line); color:var(--ivory); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-bright); }

/* ---------- pill nav / page-header (interior pages) ---------- */
.page-hero{
  position:relative;
  padding:7.5rem var(--pad) 3.5rem;
  border-bottom:1px solid var(--line-soft);
  max-width:var(--max);
  margin:0 auto;
}
.page-hero .eyebrow{ margin-bottom:1rem; }
.page-hero h1{ font-size:clamp(2.1rem, 4.4vw, 3.1rem); max-width:20ch; }
.page-hero p{ color:var(--stone); max-width:60ch; margin-top:1.1rem; font-size:1.02rem; }
.crumb{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--stone-dim);
  letter-spacing:0.06em;
  margin-bottom:1.6rem;
}
.crumb a:hover{ color:var(--gold); }

/* ---------- grids / cards ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.75rem; }
.grid-2{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2.5rem; }
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

.card{
  background:linear-gradient(180deg, var(--ink-2), var(--ink-3));
  border:1px solid var(--line-soft);
  padding:2.2rem 1.9rem;
  border-radius:3px;
  transition:border-color 0.3s, transform 0.3s;
}
.card:hover{ border-color:var(--line); transform:translateY(-3px); }
.card .num{
  font-family:var(--mono);
  color:var(--gold-dim);
  font-size:0.78rem;
  letter-spacing:0.1em;
  margin-bottom:1rem;
  display:block;
}
.card h3{ font-size:1.6rem; margin-bottom:0.75rem; }
.card p{ color:var(--stone); font-size:1.05rem; }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  margin-bottom:3rem;
  flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(2.2rem, 4vw, 3.2rem); max-width:16ch; }
.section-head .eyebrow{ margin-bottom:0.85rem; display:block; }
.section-head .side{ color:var(--stone); max-width:34ch; font-size:1.05rem; }

/* ---------- product tables ---------- */
.table-wrap{
  border:1px solid var(--line-soft);
  border-radius:3px;
  overflow:hidden;
  margin-bottom:2.5rem;
}
table{ width:100%; border-collapse:collapse; }
thead th{
  text-align:left;
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold);
  background:var(--ink-3);
  padding:0.9rem 1.1rem;
  border-bottom:1px solid var(--line);
}
tbody td{
  padding:0.8rem 1.1rem;
  font-size:1rem;
  border-bottom:1px solid var(--line-soft);
  color:var(--ivory);
}
tbody td.mono{ font-family:var(--mono); font-size:0.8rem; color:var(--stone); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background:rgba(201,162,74,0.04); }
.table-caption{
  font-family:var(--display);
  font-style:italic;
  color:var(--gold-bright);
  font-size:1.3rem;
  margin-bottom:1rem;
}

/* ---------- process / steps (real sequence → numbered) ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border:1px solid var(--line-soft);
  border-radius:3px;
  overflow:hidden;
}
.step{
  padding:2.4rem 2rem;
  border-right:1px solid var(--line-soft);
  position:relative;
}
.step:last-child{ border-right:none; }
.step .step-num{
  font-family:var(--display);
  font-style:italic;
  font-size:2.6rem;
  color:var(--gold-dim);
  line-height:1;
  margin-bottom:1rem;
}
.step h3{ font-size:1.4rem; margin-bottom:0.7rem; }
.step p{ color:var(--stone); font-size:1.05rem; }
@media (max-width:860px){
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:none; border-bottom:1px solid var(--line-soft); }
  .step:last-child{ border-bottom:none; }
}

/* ---------- quote / open letter block ---------- */
.letter{
  border:1px solid var(--line-soft);
  border-radius:3px;
  padding:clamp(2rem,4vw,3.5rem);
  background:var(--ink-2);
  position:relative;
}
.letter::before{
  content:'"';
  font-family:var(--display);
  font-size:6rem;
  color:var(--gold-dim);
  position:absolute;
  top:0.5rem; left:1.5rem;
  line-height:1;
  opacity:0.5;
}
.letter p{ margin-bottom:1.1rem; color:var(--stone); }
.letter p:last-of-type{ margin-bottom:0; }
.letter .sign{ margin-top:1.5rem; font-family:var(--display); font-style:italic; color:var(--gold-bright); font-size:1.2rem; }

/* ---------- stat strip ---------- */
.stat-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.stat{
  padding:2.2rem 1.5rem;
  text-align:center;
  border-right:1px solid var(--line-soft);
}
.stat:last-child{ border-right:none; }
.stat .n{ font-family:var(--display); font-size:2.4rem; color:var(--gold); display:block; }
.stat .l{ font-size:0.78rem; color:var(--stone); letter-spacing:0.04em; margin-top:0.4rem; }
@media (max-width:760px){
  .stat-strip{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:none; }
}

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:3rem; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.info-line{
  display:flex;
  gap:1rem;
  padding:1.1rem 0;
  border-bottom:1px solid var(--line-soft);
}
.info-line .k{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold);
  min-width:120px;
}
.info-line .v{ color:var(--ivory); font-size:0.95rem; }
.info-line .v a:hover{ color:var(--gold-bright); }

.field{ margin-bottom:1.3rem; }
.field label{
  display:block;
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:0.5rem;
}
.field input, .field textarea, .field select{
  width:100%;
  background:var(--ink-2);
  border:1px solid var(--line);
  color:var(--ivory);
  padding:0.8rem 1rem;
  font-family:var(--body);
  font-size:0.92rem;
  border-radius:2px;
  transition:border-color 0.25s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--gold);
  outline:none;
}
.field textarea{ resize:vertical; min-height:120px; }

/* ---------- privacy consent checkbox ---------- */
.privacy-field{ margin-bottom:1.3rem; }
.privacy-control{
  display:flex;
  align-items:flex-start;
  gap:0.7rem;
}
.privacy-control input[type="checkbox"]{
  flex-shrink:0;
  width:22px;
  height:22px;
  margin-top:3px;
  accent-color:var(--gold);
  cursor:pointer;
}
.privacy-control .privacy-label{
  font-family:var(--body);
  font-size:0.88rem;
  color:var(--stone);
  line-height:1.5;
  cursor:pointer;
  user-select:none;
}
.privacy-control .privacy-label a{
  color:var(--gold-bright);
  text-decoration:underline;
  text-underline-offset:2px;
}
.privacy-control .privacy-label a:hover{ color:var(--gold); }
.privacy-error{
  display:none;
  font-family:var(--body);
  font-size:0.78rem;
  color:#e57373;
  margin-top:0.4rem;
  padding-left:2rem;
}
.privacy-error.show{ display:block; }

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line-soft);
  padding:3.5rem var(--pad) 2rem;
  background:var(--ink-2);
}
.footer-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .brand{ margin-bottom:1rem; }
.footer-brand p{ color:var(--stone); font-size:0.88rem; max-width:34ch; }
.footer-col h4{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.1rem;
}
.footer-col li{ margin-bottom:0.6rem; }
.footer-col a{ color:var(--stone); font-size:0.9rem; transition:color 0.25s; }
.footer-col a:hover{ color:var(--gold-bright); }
.footer-bottom{
  max-width:var(--max);
  margin:0 auto;
  padding-top:1.8rem;
  border-top:1px solid var(--line-soft);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  font-size:0.78rem;
  color:var(--stone-dim);
  font-family:var(--mono);
}

/* ---------- reveal-on-scroll (subtle) ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- scroll to top button ---------- */
.scroll-top{
  position:fixed;
  bottom:calc(24px + 52px + 10px);
  right:24px;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:44px;
  padding:0 18px;
  background:var(--ink-4);
  border:1px solid var(--line);
  color:var(--gold);
  border-radius:4px;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s;
  opacity:0;
  transform:translateY(16px) scale(0.95);
  pointer-events:none;
  text-decoration:none;
  will-change:transform, opacity;
}
.scroll-top.visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.scroll-top:hover{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}
@media (max-width:860px){
  .scroll-top{ bottom:calc(16px + 46px + 8px); right:16px; height:38px; padding:0 14px; font-size:0.9rem; }
}
@media (max-width:600px){
  .scroll-top{ bottom:calc(16px + 42px + 6px); right:16px; height:34px; padding:0 12px; font-size:0.85rem; }
}

/* ---------- floating Zalo button ---------- */
.zalo-float{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:999;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  background:#0068ff;
  color:#fff;
  border-radius:50%;
  font-family:var(--body);
  font-size:0.9rem;
  font-weight:700;
  box-shadow:0 4px 20px rgba(0,104,255,0.35);
  transition:transform 0.25s, box-shadow 0.25s;
  text-decoration:none;
  border:none;
  cursor:pointer;
}
.zalo-float:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 28px rgba(0,104,255,0.5);
  color:#fff;
}
.zalo-float .zalo-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  background:#fff;
  border-radius:50%;
  color:#0068ff;
  font-size:1.1rem;
  font-weight:700;
  line-height:1;
}
@media (max-width:600px){
  .zalo-float{ bottom:16px; right:16px; width:46px; height:46px; }
  .zalo-float .zalo-icon{ width:24px; height:24px; font-size:0.95rem; }
}

/* ---------- product table search ---------- */
.search-bar{
  margin-bottom:1.2rem;
  position:relative;
}
.search-bar input{
  width:100%;
  background:var(--ink-2);
  border:1px solid var(--line);
  color:var(--ivory);
  padding:0.75rem 1rem 0.75rem 2.6rem;
  font-family:var(--body);
  font-size:0.9rem;
  border-radius:2px;
  transition:border-color 0.25s;
}
.search-bar input:focus{ border-color:var(--gold); outline:none; }
.search-bar input::placeholder{ color:var(--stone-dim); }
.search-bar .search-icon{
  position:absolute;
  left:1rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--stone-dim);
  font-size:0.85rem;
  pointer-events:none;
}

/* ---------- Privacy Policy Modal ---------- */
.privacy-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--pad);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}
.privacy-modal.open{
  opacity:1;
  pointer-events:auto;
}
.privacy-modal .modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(4px);
}
.privacy-modal .modal-content{
  position:relative;
  z-index:1;
  max-width:860px;
  width:100%;
  max-height:85vh;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:4px;
  display:flex;
  flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
.privacy-modal .modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem 2rem;
  border-bottom:1px solid var(--line-soft);
  flex-shrink:0;
}
.privacy-modal .modal-header h2{
  font-size:1.5rem;
  color:var(--gold-bright);
}
.privacy-modal .modal-close{
  background:none;
  border:1px solid var(--line);
  color:var(--stone);
  width:38px;
  height:38px;
  border-radius:2px;
  font-size:1.2rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.25s;
}
.privacy-modal .modal-close:hover{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}
.privacy-modal .modal-body{
  padding:2rem;
  overflow-y:auto;
  color:var(--stone);
  font-size:0.92rem;
  line-height:1.8;
}
.privacy-modal .modal-body h3{
  font-family:var(--display);
  font-size:1.3rem;
  color:var(--gold-bright);
  margin:1.8rem 0 0.8rem;
}
.privacy-modal .modal-body h3:first-child{ margin-top:0; }
.privacy-modal .modal-body h4{
  font-family:var(--display);
  font-size:1.1rem;
  color:var(--ivory);
  margin:1.4rem 0 0.6rem;
}
.privacy-modal .modal-body p{ margin-bottom:0.8rem; }
.privacy-modal .modal-body ul{ list-style:disc; padding-left:1.5rem; margin-bottom:0.8rem; }
.privacy-modal .modal-body li{ margin-bottom:0.4rem; }
.privacy-modal .modal-body strong{ color:var(--gold-bright); }
.privacy-modal .modal-body em{ font-style:italic; }
.privacy-modal .modal-body a{ color:var(--gold-bright); text-decoration:underline; }
@media (max-width:600px){
  .privacy-modal .modal-header{ padding:1rem 1.2rem; }
  .privacy-modal .modal-header h2{ font-size:1.2rem; }
  .privacy-modal .modal-body{ padding:1.2rem; font-size:0.86rem; }
}

/* ---------- misc ---------- */
.tag-chip{
  display:inline-block;
  border:1px solid var(--line);
  color:var(--gold);
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  padding:0.3rem 0.7rem;
  border-radius:2px;
  text-transform:uppercase;
}