/* ==========================================================================
   DINGXIU SOLAR — product brochure, A4 print layout
   Shared by brochure-en.html and brochure-th.html
   ========================================================================== */
:root{
  --ink:#0E2433;
  --steel:#1B4A63;
  --muted:#5A6D7A;
  --line:#DFE5E9;
  --surface:#F5F8F9;
  --brand:#0A6B58;
  --brand-soft:#E6F2EF;
  --accent:#D98324;
  --white:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#8d9aa3}
body{
  font-family:"Inter","Helvetica Neue",Arial,"Leelawadee UI","Noto Sans Thai",Tahoma,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-size:10pt;
  line-height:1.5;
}
img{display:block;max-width:100%}

/* ---------- page ---------- */
.page{
  width:210mm;height:297mm;
  background:var(--white);
  margin:8mm auto;
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;
  padding:13mm 14mm 10mm;
  box-shadow:0 2mm 6mm rgba(0,0,0,.25);
}
.page.dark{background:var(--ink);color:#fff}

/* ---------- running head ---------- */
.rh{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:.4pt solid var(--line);
  padding-bottom:2.5mm;margin-bottom:6mm;
  font-size:7pt;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.rh b{color:var(--brand);font-weight:700;letter-spacing:.14em}
.page.dark .rh{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.55)}
.page.dark .rh b{color:#6FD3BC}

/* ---------- footer ---------- */
.pf{
  margin-top:auto;padding-top:3mm;
  border-top:.4pt solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  font-size:7pt;color:var(--muted);
}
.page.dark .pf{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.5)}

/* ---------- type ---------- */
.eyebrow{
  font-size:7.5pt;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand);font-weight:700;margin-bottom:2.5mm;
}
h1{font-size:33pt;line-height:1.06;font-weight:700;letter-spacing:-.025em}
h2{font-size:19pt;line-height:1.15;font-weight:700;letter-spacing:-.015em}
h3{font-size:10.5pt;font-weight:700;line-height:1.3}
.lead{font-size:10.5pt;line-height:1.6;color:var(--steel)}
p{font-size:9.2pt;line-height:1.62;color:var(--steel)}
.note{font-size:7.4pt;color:var(--muted);line-height:1.5}
.on-dark p,.on-dark .note{color:rgba(255,255,255,.72)}
.sec-num{font-size:8pt;font-weight:700;color:var(--brand);letter-spacing:.1em}

/* ---------- cover ---------- */
.cv-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14mm}
.logo{font-size:11pt;font-weight:700;letter-spacing:.16em}
.logo span{color:#6FD3BC}
.cv-tag{font-size:7.5pt;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);text-align:right;line-height:1.7}

.cv-title{margin-bottom:5mm}
.cv-title h1{color:#fff}
.cv-title h1 em{color:#6FD3BC;font-style:normal}
.cv-sub{font-size:12pt;color:rgba(255,255,255,.8);margin-top:4mm;line-height:1.45;max-width:145mm}

.cv-img{
  margin:7mm 0 0;height:96mm;overflow:hidden;border-radius:1.2mm;
  position:relative;
}
.cv-img img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.cv-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,36,51,.15),rgba(14,36,51,.55))}
.cv-cap{
  position:absolute;left:0;right:0;bottom:0;padding:4mm 5mm;
  font-size:7.5pt;color:rgba(255,255,255,.85);letter-spacing:.02em;z-index:2;
}

.cv-stats{
  margin-top:6mm;display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;border-top:.4pt solid rgba(255,255,255,.18);
}
.cv-stat{padding:4mm 3mm 0 0;border-right:.4pt solid rgba(255,255,255,.12)}
.cv-stat:last-child{border-right:0;padding-right:0}
.cv-stat b{display:block;font-size:17pt;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.1}
.cv-stat b small{font-size:9pt;font-weight:600;color:#6FD3BC}
.cv-stat span{display:block;font-size:6.8pt;color:rgba(255,255,255,.6);margin-top:1.5mm;letter-spacing:.05em;text-transform:uppercase;line-height:1.5}

/* ---------- generic grids ---------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:7mm}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:4mm}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:7mm;align-items:start}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:8.4pt}
th{
  text-align:left;font-size:7pt;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:2mm 2.5mm;border-bottom:.8pt solid var(--steel);
}
td{padding:2mm 2.5mm;border-bottom:.4pt solid var(--line);color:var(--steel);vertical-align:top;line-height:1.45}
tr:last-child td{border-bottom:0}
td.mono{font-variant-numeric:tabular-nums;white-space:nowrap}
td b,th b{color:var(--ink);font-weight:700}
.us{color:var(--brand);font-weight:700}
.old{color:var(--accent);font-weight:700}
tfoot td{font-weight:700;color:var(--ink);border-top:.8pt solid var(--steel);border-bottom:0;padding-top:2.2mm}

/* spec list */
.specs{display:grid;grid-template-columns:1fr;gap:0}
.specs div{
  display:flex;justify-content:space-between;align-items:baseline;gap:4mm;
  padding:2.1mm 0;border-bottom:.4pt solid var(--line);
}
.specs dt{font-size:8.2pt;color:var(--muted);flex:0 0 auto;max-width:46%}
.specs dd{font-size:8.4pt;color:var(--ink);text-align:right;font-weight:600}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:.4pt solid var(--line);border-radius:1.2mm;
  padding:4mm;
}
.card.brand{background:var(--brand-soft);border-color:#cfe4de}
.card.brand h3{color:var(--brand)}
.card h3{margin-bottom:1.6mm}
.card p{font-size:8.2pt;line-height:1.5}
.card .k{font-size:15pt;font-weight:700;color:var(--brand);letter-spacing:-.02em;line-height:1.1;display:block;margin-bottom:1.2mm}
.card .k small{font-size:7.5pt;font-weight:600;color:var(--muted);letter-spacing:0}

/* ---------- feature list ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:0 7mm}
.feat > div{padding:3mm 0;border-bottom:.4pt solid var(--line)}
.feat .n{font-size:7pt;font-weight:700;color:var(--brand);letter-spacing:.1em;display:block;margin-bottom:.8mm}
.feat h3{font-size:9.4pt;margin-bottom:.8mm}
.feat p{font-size:8pt;line-height:1.45}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:.8pt solid var(--steel)}
.steps > div{padding:3mm 3mm 3mm 0;border-right:.4pt solid var(--line)}
.steps > div:last-child{border-right:0}
.steps .n{font-size:7pt;font-weight:700;color:var(--brand);letter-spacing:.1em}
.steps h3{font-size:8.6pt;margin:1mm 0 .8mm}
.steps p{font-size:7.4pt;line-height:1.45}

/* ---------- callout ---------- */
.callout{
  border-left:1.2mm solid var(--brand);background:var(--brand-soft);
  padding:3.5mm 4mm;border-radius:0 1.2mm 1.2mm 0;
}
.callout b{color:var(--brand)}
.callout p{font-size:8.4pt}

/* ---------- cert badges ---------- */
.certs{display:grid;grid-template-columns:repeat(2,1fr);gap:4mm}
.cert{border:.4pt solid var(--line);border-radius:1.2mm;padding:3.5mm}
.cert b{display:block;font-size:12pt;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin-bottom:.6mm}
.cert span{font-size:7.2pt;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:2mm}
.cert p{font-size:7.8pt;line-height:1.5}

/* ---------- contact block ---------- */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:7mm;align-items:start}
.cl{margin-top:2mm}
.cl-row{display:flex;gap:3.5mm;padding:2.6mm 0;border-bottom:.4pt solid rgba(255,255,255,.14)}
.cl-row:last-child{border-bottom:0}
.cl-k{font-size:6.8pt;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);flex:0 0 24mm;padding-top:.6mm}
.cl-v{font-size:9.6pt;color:#fff;font-weight:600;line-height:1.4}
.cl-v small{display:block;font-size:7.4pt;color:rgba(255,255,255,.55);font-weight:400;margin-top:.5mm}
.qr-box{background:#fff;padding:3mm;border-radius:1.2mm;display:inline-block}
.qr-box img{width:30mm;height:30mm}

/* ---------- photo strip ---------- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:3mm}
.strip figure{margin:0}
.strip img{width:100%;height:27mm;object-fit:cover;border-radius:1.2mm}
.strip figcaption{font-size:6.8pt;color:var(--muted);margin-top:1.2mm;line-height:1.4}

/* ---------- thai tweaks ---------- */
html[lang="th"] body{
  font-family:"Leelawadee UI","Noto Sans Thai","Sarabun",Tahoma,"Inter",Arial,sans-serif;
  line-height:1.75;
}
html[lang="th"] h1{line-height:1.25;letter-spacing:-.01em}
html[lang="th"] h2{line-height:1.35}
html[lang="th"] h3{line-height:1.5}
html[lang="th"] p{line-height:1.7}
html[lang="th"] table{font-size:8pt}
html[lang="th"] td{line-height:1.6}
html[lang="th"] .cv-sub{line-height:1.6}
html[lang="th"] .rh{letter-spacing:.04em}
html[lang="th"] .card p{line-height:1.62}
html[lang="th"] .certs{gap:3mm}
html[lang="th"] .cert{padding:2.8mm}
html[lang="th"] .cert span{margin-bottom:1.2mm}
html[lang="th"] .cert p{font-size:7.4pt;line-height:1.52}


/* ---------- print ---------- */
@page{size:A4;margin:0}
@media print{
  html,body{background:#fff}
  body{font-size:10pt}
  .page{
    margin:0;box-shadow:none;break-after:page;page-break-after:always;
    width:210mm;height:297mm;
  }
  .page:last-child{break-after:auto;page-break-after:auto}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}