/* styles.css (Beauty Editorial v4 - DASU Tan Soft/Translucent) */
@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600&display=swap");

:root{
  /* Brand */
  --brand:#D1A47D;
  --brand-700:#B7835B;
  --brand-800:#8F6340;

  /* Surfaces */
  --paper:#fbf7f2;
  --bg:#ffffff;
  --card: rgba(255,255,255,.86);
  --card-strong:#ffffff;

  /* Soft fills (tinted, translucent) */
  --tint-1: rgba(209,164,125,.20);
  --tint-2: rgba(209,164,125,.12);
  --tint-3: rgba(209,164,125,.08);

  /* Text */
  --text:#15181c;
  --muted:#6A5A4F;

  /* Borders & shadow */
  --border: rgba(231,210,191,.90);
  --border-strong: rgba(197,150,110,.70);
  --shadow: 0 20px 60px rgba(17,24,39,.10);

  --r-xl: 26px;
  --r-lg: 18px;
  --r-md: 12px;
  --max: 1140px;
  --t: .18s ease;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;scroll-behavior:smooth;}
body{
  font-family:"Prompt",system-ui,-apple-system,"Segoe UI",sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;

  /* ทำให้เนียน: ใช้ gradient เดียว + สีฐาน */
  background:
    radial-gradient(1200px 650px at 50% 0%, rgba(209,164,125,.12), rgba(255,255,255,0) 70%),
    var(--paper);
}

a{color:inherit;text-decoration:none;}
img,video{max-width:100%;display:block;}
.container{max-width:var(--max);margin:0 auto;padding:0 22px;}
main{padding-top:92px;}
.section{padding:72px 0;}
.section-tight{padding:44px 0;}

.h1{
  font-family:"Playfair Display",serif;
  font-weight:500;
  font-size:52px;
  line-height:1.06;
  letter-spacing:-.02em;
}
.h2{
  font-family:"Playfair Display",serif;
  font-weight:500;
  font-size:28px;
  line-height:1.2;
}
.p{font-size:16px;line-height:1.75;color:#262b33;}
.small{font-size:13px;line-height:1.7;color:var(--muted);}
.eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}

/* Header */
header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; gap:16px;
}

.brand{display:flex;align-items:center;gap: 2px;}

.brand-mark{
  width:auto;height:auto;
  border:0;background:transparent;border-radius:0;
  overflow:visible;
  display:flex;align-items:center;justify-content:center;
}
.brand-mark img{
  width:46px;
  height:46px;
  object-fit:cover;
  display:block;
}

.brand-name{display:flex;flex-direction:column;gap:2px;}
.wordmark{
  height:34px;      /* เดิมน่าจะ ~22px ให้เพิ่มเป็น 32–38 */
  width:auto;
  display:block;
  margin-top:2px;   /* ช่วยให้ baseline ดูเสมอ */
}
.brand-name span{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.14em;
  text-transform:uppercase;
}


.nav-links{
  list-style:none;
  display:flex; gap:26px; align-items:center;
}
.nav-links a{
  font-size:14px;
  color:#2b2f36;
  padding:8px 0;
  line-height:1;          /* สำคัญ: ล็อกไม่ให้คำไหนสูงกว่า */
  display:inline-flex;     /* สำคัญ: ทำให้ baseline เท่ากัน */
  align-items:center;
  border-bottom:1px solid transparent;
  transition: border-color var(--t), color var(--t);
}

.nav-links a:hover{border-color: rgba(183,131,91,.55); color:#15181c;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.78);
  font-weight:500;
  transition: transform var(--t), border-color var(--t), background var(--t), color var(--t);
  backdrop-filter: blur(10px);
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(197,150,110,.75);
  background: rgba(255,255,255,.92);
}

.btn-primary{
  border-color: rgba(183,131,91,.70);
  background: rgba(209,164,125,.28);
  color:#15181c;
}
.btn-primary:hover{
  background: rgba(209,164,125,.40);
  border-color: rgba(183,131,91,.85);
}
.btn-ghost{background: rgba(255,255,255,.55);}

.burger{
  display:none;
  width:42px;height:42px;border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
}
.burger span{display:block;width:18px;height:2px;background:#111;margin:4px auto;border-radius:999px;}

/* Grid */
.grid{display:grid;gap:22px;}
.grid-2{grid-template-columns: 1fr 1fr;}
.grid-3{grid-template-columns: repeat(3, 1fr);}
@media (max-width: 980px){
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
  .h1{font-size:42px;}
}
@media (max-width: 960px){
  .nav-links{display:none;}
  .burger{display:inline-flex;align-items:center;justify-content:center;}
  header.nav-open .nav-links{
    display:flex; flex-direction:column; gap:14px;
    position:absolute; left:22px; right:22px; top:70px;
    background: rgba(255,255,255,.88);
    border:1px solid var(--border);
    border-radius: var(--r-xl);
    padding:16px; box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
  }
}

/* Hero */
.hero-wrap{
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid rgba(197,150,110,.55);
  padding: 34px;
  overflow: hidden;
.hero-tags{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 14px 0 12px; /* ระยะหายใจนิดนึง */
}

.tag{
  display:inline-flex;
  align-items:center;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.38);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  font-family:"Prompt",system-ui,sans-serif;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(255,255,255,.92);
}

.tag-primary{
  border-color: rgba(255,255,255,.60);
  background: rgba(255,255,255,.18);
}

  /* base tube-like gradient */
  background:
    linear-gradient(180deg,
      #E9B8AE 0%,
      #E9B8AE 18%,
      #F2D7CE 40%,
      #F6E8E2 62%,
      #F7F1EE 78%,
      #FBF8F7 100%
    );
}

/* soft shading + highlight like the tube curvature */
.hero-wrap::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;

  background:
    /* top highlight bloom */
    radial-gradient(120% 70% at 30% 10%,
      rgba(255,255,255,.70) 0%,
      rgba(255,255,255,.28) 28%,
      rgba(255,255,255,0) 60%
    ),
    /* warm edge vignette */
    radial-gradient(120% 120% at 50% 50%,
      rgba(209,164,125,.18) 0%,
      rgba(209,164,125,.10) 45%,
      rgba(209,164,125,.0) 75%
    ),
    /* bottom depth */
    radial-gradient(140% 90% at 50% 105%,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,0) 60%
    );
  mix-blend-mode: multiply;
  opacity: .55;
}

/* subtle glossy sheen strip */
.hero-wrap::after{
  content:"";
  position:absolute;
  inset: 8% 18% 8% 18%;
  pointer-events:none;

  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 18%,
    rgba(255,255,255,.06) 32%,
    rgba(255,255,255,0) 55%
  );
  transform: skewX(-10deg);
  filter: blur(1px);
  opacity: .55;
}


.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.kpis{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.kpi{
  padding:10px 14px;border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.86);
  font-size:13px;color:#2b2f36;
  backdrop-filter: blur(10px);
}

/* Media area */
.hero-media{
  border-radius: var(--r-xl);
  border:1px solid var(--border);
  background: rgba(255,255,255,.72);
  overflow:hidden;
  min-height: 420px;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter: blur(10px);
}
.hero-media img, .hero-media video{
  width:100%;height:100%;object-fit:cover;
}

/* Placeholder slot */
.slot{
  text-align:center;
  padding:28px;
  border-radius: 18px;
  border: 1px dashed rgba(183,131,91,.55);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
}
.slot code{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(183,131,91,.45);
  background: rgba(209,164,125,.16);
  display:inline-block;
}
.slot span{display:block;margin-top:8px;font-size:12px;color:var(--muted);}

/* Cards */
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.feature{padding:22px;}
.icon{
  width:44px;height:44px;border-radius:16px;
  border:1px solid rgba(183,131,91,.45);
  background: rgba(209,164,125,.14);
  display:flex;align-items:center;justify-content:center;
  color: var(--brand-800);
  font-weight:600;
  margin-bottom:12px;
}

/* Footer */
footer{padding:44px 0 84px;color:var(--muted);}
.footer-grid{display:grid;grid-template-columns: 1.2fr .8fr;gap:22px;}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr;}}
.footer-card{padding:22px;}

/* Mobile CTA */
.mobile-cta{
  position:fixed; inset:auto 0 0 0; z-index:60;
  padding:10px 12px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border-top:1px solid var(--border);
  display:none;
}
.mobile-cta .wrap{display:flex;gap:10px;}
.mobile-cta .wrap a{flex:1;}
@media (max-width: 980px){
  .mobile-cta{display:block;}
  footer{padding-bottom:120px;}
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,0) 40%, rgba(255,255,255,.25));
}

main, header, footer{
  position: relative;
  z-index: 1;
}
/* ===== HERO WORDMARK + TITLE ALIGN FIX ===== */
.hero-title{
  display:block;
}

.hero-wordmark{
  height: 78px;            /* ปรับได้ 72–92 */
  width: auto;
  display:block;
  margin: 0 0 10px -10px;  /* <- เลื่อนซ้ายแก้ whitespace ในไฟล์ SVG */
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.18));
}

.hero-title-rest{
  display:block;
  line-height: 1.06;
}

.hero-title-rest .lead{
  display:block;           /* ให้ Sunscreen ไม่ไปนั่งแถวเดียวกับบรรทัดอื่น */
  font-size: 0.95em;       /* ลดนิดให้บาลานซ์กับคำล่าง */
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
/* ===== HERO HEADLINE – make it softer & less “stiff” ===== */
.hero-headline{
  margin-top: 10px;
  text-wrap: balance;              /* Chrome ใหม่จะช่วยบาลานซ์บรรทัด */
}

.hero-headline .hero-line{
  display:block;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Sunscreen = kicker pill (ทำให้ไม่โดดเดี่ยวแข็ง ๆ) */
.hero-headline .hero-line-1{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width: fit-content;

  font-family:"Prompt",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;

  color: rgba(255,255,255,.92);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(8px);

  margin: 0 0 16px 2px;
}

/* เส้นเล็ก ๆ นำสายตา (ช่วยให้ดู editorial ขึ้น) */
.hero-headline .hero-line-1::before{
  content:"";
  width: 20px;
  height: 1px;
  background: rgba(255,255,255,.75);
  opacity: .75;
}

/* Main title blocks */
.hero-headline .hero-line-2,
.hero-headline .hero-line-3{
  color:#15181c;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* ให้ “Body Tone Up” ดูละมุนกว่า DD Cream นิดนึง */
.hero-headline .hero-line-2{
  font-size: clamp(40px, 4.6vw, 58px);
  letter-spacing: -0.03em;
}

/* ให้ “DD Cream” แน่น/คมขึ้นนิด เพื่อปิดท้ายสวย */
.hero-headline .hero-line-3{
  font-size: clamp(42px, 4.9vw, 62px);
  letter-spacing: -0.035em;
}

/* Mobile: กันไม่ให้ใหญ่เกิน */
@media (max-width: 980px){
  .hero-headline .hero-line-1{ font-size: 12px; }
}
/* 1) SUNSCREEN pill: ให้เป็นรอง + เนียนกับพื้น */
.hero-headline .hero-line-1{
  opacity: .82;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
}
.hero-headline .hero-line-1::before{ opacity:.55; }

/* 2) โลโก้ DASU (wordmark ขาว) ให้ชัดขึ้นนิดแบบหรู */
.hero-wordmark img,
.hero-wordmark{
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.14));
  opacity: .96;
}

/* 3) ทำหัวข้อให้นุ่มขึ้น: ให้บรรทัดแรกบางลงนิด + บรรทัดล่างหนักขึ้น */
.hero-headline .hero-line-2{
  font-weight: 500;
  letter-spacing: -0.03em;
}
.hero-headline .hero-line-3{
  font-weight: 600;
  letter-spacing: -0.04em;
}

/* 4) กล่อง media ขวา: ลดความขาวจั๊วะ ให้เข้ากับโทนครีม */
.hero-media{
  background: rgba(255,255,255,.72);
}

/* HERO pills: make them more readable */
.hero-pills{ 
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:18px 0 14px;
}

.hero-pill{
  display:inline-flex;
  align-items:center;
  padding:10px 16px;
  border-radius:999px;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);


  /* เดิมมันโปร่งมาก → เพิ่มความทึบ */
  background: rgba(255,255,255,.32);

  /* เส้นขอบชัดขึ้น */
  border: 1px solid rgba(255,255,255,.55);

  /* ตัวอักษรเข้มขึ้น */
  color: rgba(25,28,33,.72);

  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;

  /* เพิ่มความคมชัดบนพื้นหลังไล่สี */
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  backdrop-filter: blur(8px);
}

/* เวลา hover ให้เด้งนิดนึง */
.hero-pill:hover{
  background: rgba(255,255,255,.44);
  border-color: rgba(255,255,255,.72);
  color: rgba(15,18,22,.86);
}
/* === Full-bleed banner after hero === */
.full-bleed-banner{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);

  margin-top: 40px;
  margin-bottom: 40px;

  overflow: hidden;
  background: #fff;
}

.full-bleed-banner img{
  width: 100%;
  height: clamp(320px, 42vw, 720px);
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Full-bleed section (edge-to-edge) */
.full-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Banner under hero */
.banner{
  margin-top: 28px;      /* ระยะห่างจาก hero */
}

.banner img{
  width: 100%;
  height: auto;          /* สำคัญ: ไม่ตัดล่าง */
  display: block;
}