/* ===========================
   PAVENTRA — style.css (NEW)
   Put this file in: /assets/style.css
   Images must be in: /assets/
   =========================== */

:root{
  --bg:#0b0d10;
  --card: rgba(18,23,34,.28);
  --text:#e9edf5;
  --muted:#aab3c3;
  --line: rgba(255,255,255,.10);

  --gold:#d6b15e;
  --gold2:#f1d38a;

  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --r: 22px;
  --r2: 28px;
  --max: 1160px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body {
  margin: 0;
  color: var(--text);
  /* เพิ่ม IBM Plex Sans Thai เข้าไปเป็นอันดับ 2 ต่อจาก Inter */
  font-family: 'Inter', 'IBM Plex Sans Thai', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(214,177,94,.14), transparent 60%),
    radial-gradient(900px 700px at 15% 10%, rgba(241,211,138,.06), transparent 55%),
    linear-gradient(180deg, #07080a 0%, #0b0d10 40%, #07080a 100%);
}

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

/* ===== Typography ===== */
.kicker{
  color:var(--gold2);
font-family: 'Inter', sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:700;
  font-size:11px;
}
.h1{
  font-family:"Playfair Display", serif;
  font-weight:600;
  font-size:clamp(34px,4.4vw,54px);
  margin:14px 0 10px;
letter-spacing: -0.02em;
}
.h2{
  font-family:"Playfair Display", serif;
  font-weight:600;
  font-size:clamp(26px,3.2vw,38px);
  margin:0 0 10px;
letter-spacing: -0.02em;
}
.lead{
  margin:0;
  color:var(--muted);
  font-size:clamp(16px,1.6vw,18px);
}

.muted{ color:var(--muted); }
.fine{ color:rgba(170,179,195,.85); font-size:12px; }
.fineNote{ color:rgba(170,179,195,.85); font-size:12px; margin-top:12px; }

/* ===== Pills / Buttons ===== */
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  background: rgba(18,23,34,.35);
  backdrop-filter: blur(10px);
}
.dot{
  width:7px; height:7px;
  border-radius:99px;
  background: var(--gold);
}

.btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(18,23,34,.40);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  font-weight:700;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(214,177,94,.55);
  background: rgba(18,23,34,.55);
}
.btn.primary{
  border-color: rgba(214,177,94,.55);
  background: linear-gradient(180deg, rgba(214,177,94,.20), rgba(214,177,94,.12));
}
.btn svg{ width:18px; height:18px; opacity:.95; }

/* ===== Header / Nav ===== */
header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(11,13,16,.25);
  backdrop-filter: blur(12px);
  border-bottom:1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
header.solid{
  background: rgba(11,13,16,.82);
  border-bottom: 1px solid var(--line);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 180px;
}
.brand img{
  width:42px; height:42px;
  border-radius:12px;
  /* IMPORTANT: keep transparent (no white box) */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.brandText b{ display:block; letter-spacing:.08em; }
.brandText small{
  display:block;
  color:var(--muted);
  margin-top:2px;
  font-size:12px;
}

.navLinks{ display:flex; gap:16px; align-items:center; }
.navLinks a{
  color:var(--muted);
  font-weight:700;
  font-size:14px;
  padding:10px 10px;
  border-radius:12px;
  transition: color .15s ease, background .15s ease;
}
.navLinks a:hover{
  color:var(--text);
  background: rgba(255,255,255,.05);
}

.navRight{ display:flex; gap:10px; align-items:center; }

.burger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(18,23,34,.35);
  align-items:center;
  justify-content:center;
}
.burger span{
  width:18px; height:2px;
  background: var(--text);
  position:relative;
  display:block;
  border-radius:10px;
}
.burger span:before,
.burger span:after{
  content:"";
  position:absolute;
  left:0;
  width:18px; height:2px;
  background: var(--text);
  border-radius:10px;
}
.burger span:before{ top:-6px; }
.burger span:after{ top:6px; }

.mobilePanel{
  display:none;
  border-top:1px solid var(--line);
  padding:10px 0 14px;
}
.mobilePanel a{
  display:block;
  padding:12px 10px;
  border-radius:14px;
  color:var(--muted);
  font-weight:700;
}
.mobilePanel a:hover{
  background: rgba(255,255,255,.05);
  color: var(--text);
}

/* ===== Sections ===== */
.section{ padding:70px 0; }
.section.tight{ padding:52px 0; }

/* ===== HERO ===== */
.hero{ padding:28px 0 24px; }

/* --- แก้ไข CSS ส่วน Hero Card ให้แม่นยำ --- */

.heroCard {
  border-radius: var(--r2);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: #121722; 
  box-shadow: var(--shadow);
  position: relative;
  min-height: 560px;
  /* ใช้ Flexbox เพื่อจัด Content ให้อยู่ด้านล่าง */
  display: flex;
  align-items: flex-end; 
  isolation: isolate; /* สำคัญ: สร้าง Stack ใหม่ */
}

/* ชั้นที่ 1: รูปภาพพื้นหลัง (ล่างสุด) */
.heroBg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ชั้นที่ 2: ฟิล์มดำ Overlay (อยู่ทับรูป) */
.heroCard::after {
  content: "";
  position: absolute;
  inset: 0;
  /* ปรับ Gradient ให้ไล่ระดับเนียนขึ้น: ด้านล่างเข้ม ด้านบนใส */
  background: linear-gradient(0deg, rgba(7,8,10,0.95) 0%, rgba(11,13,16,0.6) 45%, rgba(11,13,16,0.1) 100%);
  z-index: 1;
  pointer-events: none;
}

/* ชั้นที่ 3: เนื้อหา/ตัวหนังสือ (บนสุด) */
.heroInner {
  position: relative;
  z-index: 10; /* ให้ค่าสูงกว่า ::after (1) แน่นอน */
  padding: 40px; /* เพิ่ม Padding ให้ดูหรู */
  max-width: 800px;
  width: 100%;
}

/* เพิ่ม Text Shadow ให้ตัวหนังสืออ่านง่ายขึ้นแม้พื้นหลังสว่าง */
.heroInner h1, 
.heroInner p,
.heroInner .pill {
  text-shadow: 0 2px 10px rgba(0,0,0,0.5); 
}
.heroMeta{ display:flex; gap:10px; flex-wrap:wrap; }
.heroHighlights{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
.tag{
  padding:8px 12px;
  border-radius:999px;
  background: rgba(18,23,34,.45);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(233,237,245,.85);
  font-size:14px;
}

/* ===== Trust bar ===== */
.trustBar{
  margin-top:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,23,34,.25);
  backdrop-filter: blur(10px);
  border-radius: var(--r);
  padding:14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}
.trustGrid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:10px;
}
.trustItem{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(18,23,34,.25);
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.trustItem:hover .ico {
  background: rgba(214,177,94, 0.25);
  border-color: rgba(214,177,94, 0.8);
  box-shadow: 0 0 15px rgba(214,177,94, 0.3);
}
.ico{
  width:34px; height:34px;
  border-radius:14px;
  border:1px solid rgba(214,177,94,.35);
  background: radial-gradient(circle at 30% 30%, rgba(214,177,94,.18), rgba(255,255,255,.03));
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.trustItem b{ display:block; font-size:14px; }
.trustItem span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }

/* ===== Cards / Split ===== */
.card{
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,23,34,.25);
  box-shadow: 0 14px 35px rgba(0,0,0,.25);
  overflow:hidden;
}
.cardPad{ padding:22px; }

.split{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:stretch;
}

/* Make right image fill full height */
.mediaCard{ display:flex; flex-direction:column; }
.media{
  flex:1;
  min-height: 360px;
  background:
    linear-gradient(180deg, rgba(11,13,16,.20), rgba(11,13,16,.75)),
    url("Why.jpg") center/cover no-repeat;
}

/* ===== List ===== */
.list{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(18,23,34,.18);
}
.check{
  width:22px; height:22px;
  border-radius:8px;
  border:1px solid rgba(214,177,94,.45);
  background: rgba(214,177,94,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
  flex: 0 0 auto;
}

/* ===== Pain Points ===== */
.painWrap{ margin-top:14px; }
.painGrid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:12px;
  margin-top:10px;
}
.painCard {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(18,23,34,.18);
  border-radius: 18px;
  overflow: hidden;
  /* ส่วนที่เพิ่มใหม่: จัดโครงสร้างให้ยืดหยุ่น */
  display: flex;
  flex-direction: column;
  height: 100%; 
}
.painImg {
  width: 100%;
  height: 140px;
  object-fit: cover; /* สำคัญมาก: ทำให้รูปไม่เบี้ยวแม้ยืดหด */
  display: block;
  /* ลบ background-image, background-position ฯลฯ ออกให้หมด */
}
.painBody {
  padding: 12px;
  /* ส่วนที่เพิ่มใหม่: ให้พื้นที่นี้ยืดจนเต็มการ์ด และจัดเรียงลูกเป็นแนวตั้ง */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.painBody b{ display:block; }
.painBody p{ margin:6px 0 10px; color:var(--muted); font-size:13px; }
.painFix {
  /* เทคนิคดันลงล่างสุด: margin-top: auto จะผลักตัวเองไปจนสุดขอบ */
  margin-top: auto;
  
  /* สไตล์ตัวอักษรสีทอง (แบบไม่มีกรอบ) */
  display: block;
  padding-top: 14px;         /* เว้นระยะห่างด้านบนนิดหน่อย */
  color: #d6b15e;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  
  /* ล้างค่าเดิม */
  border: none;
  background: none;
  border-radius: 0;
}

/* เครื่องหมายถูกหน้าข้อความ */
.painFix::before {
  content: "✓";
  display: inline-block;
  margin-right: 8px;
  color: #d6b15e;
  font-weight: 900;
  transform: scale(1.2);
}

/* ===== Section header ===== */
.sectionHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

/* ===== Collections ===== */
.tiles{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:18px;
}

.tile{
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,23,34,.22);
  overflow:hidden;
  box-shadow: 0 14px 35px rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.tile:hover{
  transform: translateY(-2px);
  border-color: rgba(214,177,94,.45);
  background: rgba(18,23,34,.30);
}
/* ลบอันเดิมทิ้ง แล้วแทนด้วยอันนี้ */
.tileImg, 
/* --- แก้ไข CSS ส่วน Collections Image --- */

/* 1. ล้างค่า Default ของ tag figure */
.tileImgWrapper {
  margin: 0;      /* สำคัญ: ลบขอบขาวที่ Browser แถมมา */
  padding: 0;
  width: 100%;
  height: 240px;  /* ความสูงรูป */
  overflow: hidden;
  position: relative;
}

/* 2. บังคับรูปให้เต็มกรอบ */
.tileImgObj {
  width: 100%;
  height: 100%;
  object-fit: cover; /* รูปไม่เบี้ยว */
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* เอฟเฟกต์สมูท */
}

/* Zoom Effect ตอน Hover */
.tile:hover .tileImgObj {
  transform: scale(1.08);
}.tileBody{ padding:18px; }
.tileBody .name{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.tileBody h3{
  margin:0;
  font-family:"Playfair Display", serif;
  font-size:22px;
}
.badge{
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  color: rgba(241,211,138,.95);
  text-transform:uppercase;
}
.tileBody p{ margin:10px 0 0; color:var(--muted); }
.tileFoot{ padding:0 18px 18px; }

/* ===== Applications ===== */
.appsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:stretch;
}
.chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.chip{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,23,34,.20);
  font-weight:800;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.chip:hover{
  transform: translateY(-1px);
  border-color: rgba(214,177,94,.45);
}
.chip.active{
  border-color: rgba(214,177,94,.55);
  background: linear-gradient(180deg, rgba(214,177,94,.18), rgba(18,23,34,.20));
}

.appsMedia{
  flex:1;
  min-height:300px;
  background:
    linear-gradient(180deg, rgba(11,13,16,.12), rgba(11,13,16,.78)),
    url("Applications.jpg") center/cover no-repeat;
}
.appsCaption{
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.appsCaption b{ display:block; }
.appsCaption span{ display:block; color:var(--muted); margin-top:4px; font-size:13px; }

/* ===== Installation ===== */
.installGrid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:12px;
}
.installCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,23,34,.20);
  border-radius:18px;
  padding:14px;
}
.installCard b{ display:block; }
.installCard p{ margin:8px 0 0; color:var(--muted); }

/* ===== Journal ===== */
.posts{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:18px;
}
.post:hover{
  transform: translateY(-2px);
  border-color: rgba(214,177,94,.40);
}
/* --- แก้ไข CSS ส่วน Journal Card Alignment --- */

.post {
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(18,23,34,.20);
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(0,0,0,.20);
  transition: transform .18s ease, border-color .18s ease;
  
  /* เพิ่ม Flex Column เพื่อจัดระเบียบแนวตั้ง */
  display: flex;
  flex-direction: column;
  height: 100%; /* ให้การ์ดสูงเท่ากันในแถว */
}

.postTop {
  /* คงเดิม */
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(241,211,138,.95);
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
}

.postBody {
  padding: 16px;
  /* สั่งให้ส่วนนี้ "ยืด" จนเต็มพื้นที่ว่าง */
  flex: 1; 
  display: flex;
  flex-direction: column;
}

/* ดันปุ่ม Read more ให้สวยงาม */
.postFoot {
  padding: 0 16px 20px; /* เพิ่ม padding ล่างหน่อย */
  margin-top: auto; /* ดันตัวเองลงล่างสุด (Double lock) */
}
.link{ display:inline-flex; align-items:center; gap:8px; font-weight:900; }

/* ===== Contact ===== */
.cta{
  border-radius: var(--r2);
  border:1px solid rgba(214,177,94,.30);
  background:
    radial-gradient(900px 600px at 10% 30%, rgba(214,177,94,.18), transparent 55%),
    linear-gradient(180deg, rgba(18,23,34,.35), rgba(18,23,34,.20));
  padding:26px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.ctaGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:center;
}
.ctaActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.socialRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.social{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,23,34,.22);
  font-weight:900;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.social:hover{
  transform: translateY(-1px);
  border-color: rgba(214,177,94,.45);
  background: rgba(18,23,34,.30);
}
.contactMeta{
  margin-top:16px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:16px;
  display:grid;
  gap:10px;
}

/* ===== Footer ===== */
/* ===========================
   A+ LUXURY FOOTER
   =========================== */
footer {
  background: #080a0c;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 60px 0 30px;
  font-size: 14px;
}

.footerGrid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr; /* แบ่ง 3 ส่วน: แบรนด์ / เมนู / ชำระเงิน */
  gap: 40px;
  margin-bottom: 40px;
}

/* --- Col 1: Brand & Trust --- */
.footerBrand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.fLogo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.fLogo img {
  border-radius: 10px;
  background: transparent;
}
.fLogo b {
  display: block;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: #fff;
}
.fLogo span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 2px;
}

/* DBD Trust Box - ไฮไลท์สำคัญ */
.dbdBox {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.03); /* พื้นหลังจางๆ */
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px 14px;
  border-radius: 12px;
  max-width: fit-content;
}
.dbdImgContainer {
  background: #fff; /* พื้นขาวเพื่อให้โลโก้ DBD เด่น */
  padding: 4px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.dbdText {
  display: flex;
  flex-direction: column;
}
.dbdText b {
  color: var(--text);
  font-size: 12px;
}
.dbdText span {
  color: var(--muted);
  font-size: 11px;
}

/* --- Col 2: Navigation Links --- */
.footerNav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footerNav b {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  opacity: 0.5;
}
.footerNav a {
  color: var(--muted);
  transition: color 0.2s, transform 0.2s;
  display: inline-block;
}
.footerNav a:hover {
  color: var(--gold);
  transform: translateX(4px);
}

/* --- Col 3: Payment & Contact --- */
.footerInfo {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start; /* Desktop ชิดซ้ายของ col */
}
.payRow {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.payRow span {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.payBadges {
  display: flex;
  gap: 8px;
}
.pBadge {
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.02);
}

/* --- Bottom Bar --- */
.footerBottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 12px;
  color: rgba(170,179,195,0.5);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 900px) {
  .footerGrid {
    grid-template-columns: 1fr; /* เรียงเป็นแนวตั้ง */
    gap: 40px;
  }
  .footerInfo {
    align-items: flex-start;
  }
}
/* ===== Responsive ===== */
@media (max-width:1080px){
  .painGrid{ grid-template-columns:1fr; }
}
@media (max-width:960px){
  .trustGrid{ grid-template-columns: repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .tiles{ grid-template-columns:1fr; }
  .appsGrid{ grid-template-columns:1fr; }
  .installGrid{ grid-template-columns:1fr; }
  .posts{ grid-template-columns:1fr; }
  .ctaGrid{ grid-template-columns:1fr; }
  .ctaActions{ justify-content:flex-start; }
}
@media (max-width:860px){
  .navLinks{ display:none; }
  .burger{ display:flex; }
  .mobilePanel{ display:block; }
  .mobilePanel[hidden]{ display:none; }
  .heroInner{ padding:22px; }
  .heroCard{ min-height:540px; }
}
/* ปรับ Footer Grid สำหรับมือถือ */
@media (max-width: 768px) {
  .footerGrid {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 30px;
  }
.footerInfo {
    align-items: center !important; /* บังคับจัดกึ่งกลางแกน Flex */
  }
  .footerBrand, 
  .footerBrand > div, 
  .footerBrand div[style*="flex-direction:column"] {
    align-items: center !important; /* จัดกลางหมดในมือถือ */
  }
  .footerLinks {
    justify-content: center !important;
  }
  div[style*="align-items:flex-end"] {
    align-items: center !important;
  }
}
/* ===== Collection Page Add-ons ===== */
.seriesHero{
  position:relative;
  min-height:520px;
  overflow:hidden;
  border-radius: var(--r2, 28px);
}
.seriesHeroMedia{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter: saturate(1.05) contrast(1.05);
}
.seriesHeroInner{
  position:relative;
  padding:34px;
  max-width:820px;
}

.factsGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.factCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,23,34,.20);
  border-radius:18px;
  padding:14px;
}
.factCard b{ display:block; }
.factCard p{ margin:8px 0 0; color: var(--muted); }

.galleryGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.galleryItem{
  margin:0;
  border-radius: var(--r, 22px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,23,34,.18);
}
.galleryItem img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}
.galleryItem figcaption{
  padding:12px 14px;
  color: var(--muted);
  font-size:13px;
}

.specGrid{
  display:grid;
  gap:10px;
}
.specRow{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(18,23,34,.18);
}
.specRow b{ font-weight:900; }

@media (max-width: 960px){
  .factsGrid{ grid-template-columns: 1fr 1fr; }
  .galleryGrid{ grid-template-columns: 1fr; }
  .seriesHero{ min-height:560px; }
  .seriesHeroInner{ padding:22px; }
}
/* ===========================
   Application-first Enhancements
   (added for applications.html + home decision flow)
   =========================== */

/* Secondary decision link (e.g., Not sure? Choose by application) */
.textLink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-weight:900;
  font-size:13px;
  color: var(--gold2);
  letter-spacing:.02em;
  opacity:.9;
  transition: opacity .15s ease, transform .15s ease;
  text-decoration:none;
}
.textLink:hover{
  opacity:1;
  transform: translateX(2px);
}
.textLink::after{
  content:"→";
  transition: transform .15s ease;
}
.textLink:hover::after{
  transform: translateX(2px);
}

/* Emphasize Applications section as an entry point */
.appsGrid{
  position:relative;
}
.appsGrid::before{
  content:"Start here";
  position:absolute;
  top:-14px;
  left:18px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--gold2);
  opacity:.85;
  pointer-events:none;
}

/* Optional: secondary CTA button style */
.btn.alt{
  border-color: rgba(214,177,94,.25);
  background: rgba(18,23,34,.35);
}
.btn.alt:hover{
  border-color: rgba(214,177,94,.55);
}

/* Optional: highlight primary link in mobile panel */
.mobilePanel a.primaryLink{
  border:1px solid rgba(214,177,94,.35);
  background: rgba(214,177,94,.10);
  color: var(--text);
}
.btn, button, input, select, textarea { font: inherit; 
}
/* ===========================
   ADD-ON: Sticky LINE Button
   =========================== */
.sticky-line {
  position: fixed;
  bottom: 24px;
  right: 24px;
  /* เปลี่ยนจากเขียว เป็น Gradient ทอง */
  background: linear-gradient(135deg, #d6b15e 0%, #f1d38a 100%);
  color: #121722; /* เปลี่ยนตัวหนังสือเป็นสีเข้ม ให้อ่านง่ายบนพื้นทอง */
  padding: 12px 24px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  /* เปลี่ยนเงาเป็นสีทองฟุ้งๆ */
  box-shadow: 0 4px 25px rgba(214, 177, 94, 0.4);
  z-index: 999;
  font-weight: 800; /* หนาขึ้นอีกนิด */
  text-decoration: none;
  font-size: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sticky-line:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 35px rgba(214, 177, 94, 0.6);
  /* ปรับสีตอน hover */
  background: linear-gradient(135deg, #f1d38a 0%, #d6b15e 100%);
}
.sticky-line svg {
  width: 24px;
  height: 24px;
  fill: #121722; /* เปลี่ยนไอคอนเป็นสีเข้ม */
}
/* ===========================
   ADD-ON: Luxury Dark Scrollbar
   =========================== */
/* สำหรับ Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0b0d10; /* สีเดียวกับพื้นหลังเว็บ */
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15); /* สีแท่งเลื่อนแบบจางๆ */
  border-radius: 5px;
  border: 2px solid #0b0d10; /* ขอบเพื่อให้ดูมีมิติ */
}
::-webkit-scrollbar-thumb:hover {
  background: #d6b15e; /* พอเอาเมาส์ชี้ กลายเป็นสีทอง */
}

/* สำหรับ Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) #0b0d10;
}
/* ===========================
   Luxury Comparison Table (FINAL FIX)
   =========================== */
.compareWrap {
  overflow-x: auto; /* ให้เลื่อนแนวนอนได้ถ้าจอเล็ก */
  -webkit-overflow-scrolling: touch;
  margin: 30px 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.02); /* พื้นหลังจางๆ สบายตา */
}

.compareTable {
  width: 100%;
  min-width: 800px; /* ความกว้างขั้นต่ำ เพื่อไม่ให้ตัวหนังสือบีบ */
  border-collapse: separate;
  border-spacing: 0;
}

/* จัดระเบียบช่องตาราง */
.compareTable th, .compareTable td {
  padding: 18px 24px; /* เพิ่มพื้นที่หายใจ */
  text-align: left; /* ชิดซ้ายทั้งหมด ตามที่ต้องการ */
  vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 15px;
  color: #b0b8c6;
  white-space: nowrap; /* บังคับบรรทัดเดียว ความสูงจะเท่ากันเป๊ะ */
}

/* หัวตาราง */
.compareTable th {
  background: rgba(214,177,94,0.08); /* สีทองจางๆ */
  color: #d6b15e;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
}

.compareTable tr:last-child td {
  border-bottom: none;
}

/* --- แก้ไขตัวหนังสือสีทอง (ล้างค่าที่ตีกัน) --- */
.compareTable .check {
  /* ล้างค่าเดิมของปุ่ม .check หน้าแรกทิ้งให้หมด */
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: table-cell !important;
  box-shadow: none !important;
  
  /* ใส่สไตล์ใหม่: ตัวหนังสือทอง */
  color: #d6b15e !important;
  font-weight: 700;
}

/* ใส่เครื่องหมายถูกข้างหน้า */
.compareTable .check::before {
  content: "✓";
  display: inline-block;
  margin-right: 8px; /* ระยะห่างระหว่าง ✓ กับตัวหนังสือ */
  color: #d6b15e;
  font-weight: 900;
  font-size: 1.1em;
}

/* ตัวหนังสือสีเทา (ช่องอื่น) */
.compareTable .cross {
  color: #6e7683;
  opacity: 0.6;
}
/* เพิ่มใน style.css หรือใน <style> ของหน้า choose-style.html */
.compareTable td {
  white-space: normal; /* ยอมให้ขึ้นบรรทัดใหม่ได้เพื่อให้ข้อความอธิบายไม่ล้น */
  min-width: 150px;
  line-height: 1.4;
}
.compareTable .check {
  color: #d6b15e !important;
  font-weight: 600;
}
/* --- CSS สำหรับ Crop รูป DBD --- */

/* 1. สร้างกรอบเพื่อจำกัดพื้นที่แสดงผล */
.dbdImgContainer {
    /* กำหนดความกว้างที่ต้องการ (เท่าเดิมคือ 80px) */
    width: 92px;

    /* [จุดสำคัญ] กำหนดความสูงให้ *น้อยกว่า* รูปจริง เพื่อบังคับให้เกิดการตัด */
    /* ลองปรับแก้ตัวเลขนี้ดูนะครับ ถ้าอยากให้ crop เยอะขึ้นให้ลดตัวเลขลง (เช่นเหลือ 60px) */
    height: 44px; 

    /* คำสั่งสำคัญ: ซ่อนส่วนที่ล้นออกจากกรอบความสูงที่เราตั้งไว้ (เสมือนการ crop) */
    overflow: hidden;

    /* จัดตำแหน่ง */
    display: inline-block; /* หรือใช้ block แล้วแต่ layout เดิม */
    vertical-align: middle;
}

/* 2. ปรับตัวรูปภาพให้พอดีกับกรอบ */
.dbdImgContainer a,
.dbdImgContainer img {
    display: block;
    width: 100%; /* บังคับกว้างเต็ม 80px */
    height: auto; /* สูงตามสัดส่วน */

    
    /* บังคับให้รูปชิดขอบบนสุดเสมอ เพื่อให้ส่วนที่โดนตัดคือส่วนล่าง */
    object-fit: cover;
    object-position: top center;
}