/* ============================================================
   Viet Nam Good Rice — Indochine design layer
   Sits on top of Tailwind Play CDN. Shared by every page.
   ============================================================ */

:root{
  --primary:#0F4C3A; --primary-d:#0A3629;
  --gold:#C8962F; --gold-l:#E0B860;
  --terracotta:#A24E36;
  --cream:#F5EFE0; --paper:#FBF7EE; --soft:#E8EBDC;
  --line:#DAD0BC; --text:#2A2017; --muted:#6E6357;
}

html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--text);
  font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}

h1,h2,h3,.font-serif{font-family:"Playfair Display","Noto Serif",serif}

/* ---- Gạch bông (encaustic tile) motif, used as subtle texture ---- */
.tile-bg{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23C8962F' stroke-width='1.1' opacity='0.5'%3E%3Ccircle cx='24' cy='24' r='11'/%3E%3Cpath d='M24 0a24 24 0 0 0 0 48 24 24 0 0 0 0-48z' opacity='0'/%3E%3Cpath d='M13 13a15.5 15.5 0 0 1 22 0M35 35a15.5 15.5 0 0 1-22 0M13 35a15.5 15.5 0 0 1 0-22M35 13a15.5 15.5 0 0 1 0 22'/%3E%3Ccircle cx='0' cy='0' r='4'/%3E%3Ccircle cx='48' cy='0' r='4'/%3E%3Ccircle cx='0' cy='48' r='4'/%3E%3Ccircle cx='48' cy='48' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:48px 48px;
}

/* thin gold rule with a centered diamond — Indochine divider */
.rule-gold{display:flex;align-items:center;gap:.75rem;color:var(--gold)}
.rule-gold::before,.rule-gold::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.rule-gold span{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase}

/* ---- Header ---- */
.idc-header{position:sticky;top:0;z-index:50;background:rgba(251,247,238,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  box-shadow:0 2px 0 0 rgba(200,150,47,.25)}
.brand-name{font-family:"Playfair Display",serif;font-weight:800;color:var(--primary);
  font-size:1.3rem;line-height:1.05}
.brand-sub{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.nav-link{position:relative;color:var(--muted);font-weight:600;font-size:.875rem;transition:color .2s}
.nav-link:hover{color:var(--primary)}
.nav-link::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:var(--gold);transition:width .25s}
.nav-link:hover::after{width:100%}
.nav-link.active{color:var(--primary)}
.nav-link.active::after{width:100%}

/* Material Symbols (font-face comes from Google Fonts link) */
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}

/* ---- Buttons ---- */
.btn{display:inline-block;font-weight:700;border-radius:.7rem;padding:.85rem 1.6rem;
  text-align:center;transition:transform .15s,box-shadow .2s,opacity .2s;letter-spacing:.01em}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px rgba(15,76,58,.25)}
.btn-primary:hover{background:var(--primary-d)}
.btn-gold{background:var(--gold);color:#23200f;box-shadow:0 8px 20px rgba(200,150,47,.3)}
.btn-gold:hover{background:var(--gold-l)}
.btn-ghost{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-outline{border:1.5px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-sm{padding:.6rem 1.15rem;font-size:.875rem}

/* ---- Hero ---- */
.idc-hero{position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%,rgba(200,150,47,.22),transparent 30%),
    radial-gradient(circle at 88% 12%,rgba(162,78,54,.28),transparent 30%),
    linear-gradient(135deg,#0c3c2d 0%,#0F4C3A 50%,#0A3629 100%)}
.idc-hero .tile-overlay{position:absolute;inset:0;opacity:.10;pointer-events:none}
.eyebrow{text-transform:uppercase;letter-spacing:.28em;font-size:.78rem;font-weight:700;color:var(--gold-l)}

/* cinematic photo hero (Ken Burns + jade veil for legibility) */
.idc-hero--photo .hero-photo{position:absolute;inset:0;background-size:cover;background-position:center 62%;
  transform:scale(1.06);animation:kenburns 28s ease-in-out infinite alternate;will-change:transform}
.idc-hero--photo .hero-veil{position:absolute;inset:0;
  background:linear-gradient(110deg,rgba(8,46,34,.92) 0%,rgba(10,54,41,.74) 42%,rgba(10,54,41,.34) 78%,rgba(10,54,41,.12) 100%)}
.idc-hero--photo .hero-veil::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,46,34,.55),transparent 32%)}
@keyframes kenburns{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1.5%,0)}}
@media (prefers-reduced-motion:reduce){.idc-hero--photo .hero-photo{animation:none;transform:scale(1.02)}}

/* full-bleed image band (story / emotional break in the page rhythm) */
.image-band{position:relative;overflow:hidden;color:#fff}
.image-band .band-photo{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04)}
.image-band .band-veil{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,46,34,.9) 0%,rgba(10,54,41,.62) 55%,rgba(162,78,54,.32) 100%)}

/* "from the field to your port" journey steps */
.journey-step{position:relative;padding-left:1.25rem}
.journey-step::before{content:"";position:absolute;left:0;top:.55rem;width:.55rem;height:.55rem;border-radius:9999px;
  background:var(--gold-l);box-shadow:0 0 0 4px rgba(224,184,96,.22)}

/* ---- Cards ---- */
.idc-card{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:1.1rem;box-shadow:0 12px 30px rgba(42,32,23,.06);transition:transform .2s,box-shadow .2s}
.idc-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(42,32,23,.10)}
/* decorative inner gold frame */
.idc-card.framed::before{content:"";position:absolute;inset:10px;border:1px solid rgba(200,150,47,.45);
  border-radius:.8rem;pointer-events:none}
.idc-card .num{font-family:"Playfair Display",serif;font-weight:700;color:var(--gold);font-size:1.4rem}

/* arch top accent for media/figures */
.arch{border-radius:9999px 9999px .9rem .9rem}

/* index hero stat tiles */
.glass{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:1rem}

/* ---- Footer ---- */
.idc-footer{background:var(--primary-d);color:#e8efe9}
.idc-footer a{color:#cfe0d6}
.idc-footer a:hover{color:var(--gold-l)}
.idc-footer h4{color:var(--gold-l);font-weight:700;letter-spacing:.04em}

/* ---- Forms ---- */
.field{width:100%;border:1px solid var(--line);background:#fff;border-radius:.6rem;
  padding:.75rem .9rem;color:var(--text);transition:border-color .15s,box-shadow .15s}
.field:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,150,47,.18)}

/* small reveal animation */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}