/* PSUNHM — หน้า "ติดต่อเรา" (mockup) · flat + light: ไม่มี glow, gradient, glass, เส้นขอบ, แถบเส้นบาง
   ทุกกฎขึ้นต้นด้วย .ct */
.ct { --p:#9e5da5; --pd:#7d4485; --tint:#f5eef6; font-family:"LINE Seed Sans TH",sans-serif; line-height:1.75; }
.ct h1,.ct h2,.ct h3 { line-height:1.5; }
.ct .wrap { max-width:1320px; }
.ct .hero { position:relative; border-radius:24px; overflow:hidden; background:#e9eef4;
  height:clamp(420px,70vh,760px); margin:8px 0 28px; }
.ct .hero iframe,.ct .hero img { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; object-fit:cover; }
.ct .hero img { z-index:0 } .ct .hero iframe { z-index:1 }
.ct .hero .say { position:absolute; z-index:2; left:24px; bottom:24px; max-width:460px; background:#fff;
  border-radius:18px; padding:22px 26px 24px; }
.ct .say .k { margin:0; color:var(--p); font-size:14px; font-weight:700; }
.ct .say h1 { margin:4px 0 8px; font-size:clamp(28px,3vw,40px); color:#2b2330; }
.ct .say p { margin:0 0 14px; color:#4c4452; }
.ct .btns { display:flex; flex-wrap:wrap; gap:10px; }
.ct .btn { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px;
  background:var(--p); color:#fff !important; font-weight:700; text-decoration:none; }
.ct .btn:hover { background:var(--pd); }
.ct .btn.alt { background:var(--tint); color:var(--pd) !important; }
.ct .btn.alt:hover { background:#ecdfee; }
.ct .credit { position:absolute; z-index:2; right:18px; bottom:18px; background:#fff; border-radius:999px;
  padding:4px 14px; font-size:13px; color:#4c4452; }
.ct .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 0 32px; }
.ct .card { background:var(--tint); border-radius:18px; padding:22px 24px; }
.ct .card.big { grid-column:span 2; background:#fff; }
.ct .card h2 { margin:0 0 6px; font-size:18px; color:var(--pd); }
.ct .card p { margin:0 0 8px; }
.ct .card .num { font-size:24px; font-weight:700; color:#2b2330; text-decoration:none; }
.ct .card a { color:var(--pd); }
.ct .tag { display:inline-block; background:#fff3d6; color:#7a5300; border-radius:999px; padding:0 10px; font-size:13px; line-height:1.9; }
.ct .soc { display:flex; flex-wrap:wrap; gap:8px; }
.ct .two { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:16px; }
.ct .formcard { background:#fff; border-radius:18px; padding:24px; }
.ct .formcard h2 { margin-top:0; }
.ct .formcard input,.ct .formcard textarea { border:0; background:var(--tint); border-radius:10px; }
.ct .note { color:#6a6270; font-size:14px; }
.ct .hero.static iframe { display:none; }
@media (min-width:1600px){ .ct .wrap{ margin:0 auto 0 0; } }
@media (max-width:1100px){ .ct .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ct .two{ grid-template-columns:1fr; } }
@media (max-width:640px){
  .ct .grid{ grid-template-columns:1fr; } .ct .card.big{ grid-column:auto; }
  .ct .hero{ height:auto; min-height:0; background:none; border-radius:18px; }
  .ct .hero img{ position:static; height:260px; border-radius:18px; }
  .ct .hero .say{ position:static; max-width:none; padding:18px 4px 0; }
  .ct .credit{ display:none; }
}

/* v2: ฉากเต็มกว้างเป็นพื้นหลัง ไม่อยู่ในกล่อง ข้อความวางบนส่วนที่เฟดเป็นสีพื้นหน้า */
.ct .hero { border-radius:0; background:var(--bg,#ececec);
  margin:calc(-1 * var(--g)) 0 28px calc(-1 * (var(--g) + 380px));
  width:100vw; max-width:none; height:clamp(520px,82vh,860px); }
.ct .hero::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,#ececec 0,#ececec calc(380px + var(--g)),rgba(236,236,236,.88) calc(380px + 34%),rgba(236,236,236,0) 72%),
             linear-gradient(0deg,#ececec 0,rgba(236,236,236,0) 26%); }
.ct .hero .say { z-index:2; background:none; border-radius:0; padding:0;
  left:calc(380px + 2 * var(--g)); bottom:64px; max-width:520px; }
.ct .hero .say p { color:#3c3442; }
.ct .credit { background:none; color:#3c3442; z-index:2; }
.ct .crumb { position:relative; z-index:2; }
@media (min-width:1600px){ .ct .wrap{ margin:0; } }
@media (max-width:900px){
  .ct .hero { margin:-160px -16px 24px; }
  .ct .hero::after { background:linear-gradient(0deg,#ececec 0,#ececec 30%,rgba(236,236,236,0) 70%); }
  .ct .hero .say { left:16px; right:16px; bottom:32px; }
}
@media (max-width:640px){
  .ct .hero { height:auto; margin:-160px -16px 20px; width:auto; background:none; }
  .ct .hero img { position:static; height:420px; border-radius:0; }
  .ct .hero::after { inset:0; background:linear-gradient(0deg,#ececec 0,#ececec 38%,rgba(236,236,236,0) 62%); }
  .ct .hero .say { position:absolute; left:16px; right:16px; bottom:0; padding:0; }
}
@media (min-width:901px){
  .ct .hero::after { background:linear-gradient(90deg,#ececec 0,#ececec calc(380px + var(--g)),rgba(236,236,236,.72) calc(380px + 22%),rgba(236,236,236,0) 58%),
             linear-gradient(0deg,#ececec 0,rgba(236,236,236,.6) 22%,rgba(236,236,236,0) 44%); }
}

/* ป้าย "ตอนนี้เปิดอยู่ / ตอนนี้ปิด" (visit-today.js) แบบเรียบ ไม่มีเส้นขอบ ไม่มีเงา */
.ct .ob { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0 0 12px; padding:10px 14px; border:0; border-radius:12px; box-shadow:none; background:#eef1f4; color:#3b4652; }
.ct .ob b { font-size:16px; }
.ct .ob-dot { width:10px; height:10px; border-radius:50%; background:currentColor; flex:none; }
.ct .ob-sub, .ct .ob-reason { flex-basis:100%; font-size:14px; padding-left:20px; }
.ct .ob.open { background:#e3f4e8; color:#17663a; }
.ct .ob.closed { background:#fbe9e9; color:#9b2c2c; }
.ct .ob-reason[hidden] { display:none; }

/* v3: รอยต่อหัว/การ์ด — เฟดด้วย mask ให้ฉากจางเป็นโปร่งใส เห็นพื้นหลังเงาต้นไม้/ไดโนเสาร์ของเว็บต่อเนื่อง
   ไม่มีพื้นสีของตัวเอง ไม่มีชั้นสีทับ */
.ct .hero { background:none; }
.ct .hero::after { content:none; }
.ct .hero iframe,.ct .hero img {
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent calc(380px + var(--g)),rgba(0,0,0,.28) calc(380px + 22%),#000 58%),
                     linear-gradient(180deg,#000 0,#000 40%,rgba(0,0,0,.55) 64%,rgba(0,0,0,.18) 84%,transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  mask-image:linear-gradient(90deg,transparent 0,transparent calc(380px + var(--g)),rgba(0,0,0,.28) calc(380px + 22%),#000 58%),
             linear-gradient(180deg,#000 0,#000 40%,rgba(0,0,0,.55) 64%,rgba(0,0,0,.18) 84%,transparent 100%); }
@media (max-width:900px){
  .ct .hero iframe,.ct .hero img { -webkit-mask-image:linear-gradient(180deg,#000 0,#000 30%,rgba(0,0,0,.45) 58%,rgba(0,0,0,.12) 80%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 30%,rgba(0,0,0,.45) 58%,rgba(0,0,0,.12) 80%,transparent 100%); -webkit-mask-composite:source-over; mask-composite:add; }
}

/* v4: ฉากชัดเต็มเหมือน v2 — จางเฉพาะแถบล่าง ~110px ให้เชื่อมพื้นหลังเว็บ; ซ้ายจางเท่า v2 */
.ct .hero iframe,.ct .hero img {
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent calc(380px + var(--g)),rgba(0,0,0,.28) calc(380px + 22%),#000 58%),
                     linear-gradient(180deg,#000 0,#000 calc(100% - 110px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,transparent calc(380px + var(--g)),rgba(0,0,0,.28) calc(380px + 22%),#000 58%),
             linear-gradient(180deg,#000 0,#000 calc(100% - 110px),transparent 100%); }
@media (max-width:900px){
  .ct .hero iframe,.ct .hero img { -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 90px),transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 90px),transparent 100%); }
}
@media (max-width:640px){
  /* มือถือ: ข้อความวางทับภาพนิ่ง — จางเท่า v2 (ทึบถึง 38% จากบน, โปร่งใสที่ 62%) */
  .ct .hero img { -webkit-mask-image:linear-gradient(180deg,#000 0,#000 38%,transparent 62%);
    mask-image:linear-gradient(180deg,#000 0,#000 38%,transparent 62%); }
}

/* v5: ข้อความหัวย้ายไปฝั่งขวา ให้ต้นศรีตรังชัด — ไม่มีม่านจางฝั่งซ้ายแล้ว (เหลือเฟดสั้นใต้แถบเมนูและเฟดขอบล่าง)
   พื้นอ่านง่ายอยู่หลังข้อความเท่านั้น */
@media (min-width:901px){
  .ct .hero iframe,.ct .hero img {
    -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent calc(300px + var(--g)),#000 calc(420px + var(--g))),
                       linear-gradient(180deg,#000 0,#000 calc(100% - 110px),transparent 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect;
    mask-image:linear-gradient(90deg,transparent 0,transparent calc(300px + var(--g)),#000 calc(420px + var(--g))),
               linear-gradient(180deg,#000 0,#000 calc(100% - 110px),transparent 100%); }
  .ct .hero .say { left:auto; right:calc(var(--g) + 24px); bottom:72px; max-width:460px;
    background:rgba(246,244,247,.82); border-radius:18px; padding:22px 26px; }
  .ct .credit { left:auto; right:calc(var(--g) + 24px); bottom:24px; }
}
@media (min-width:641px) and (max-width:900px){
  .ct .hero .say { background:rgba(246,244,247,.82); border-radius:16px; padding:18px 20px; }
}