/* ============================================================
   ICONPHUKET — Green Theme override
   Requirement: Green_Theme "Website - 18 SEP .pdf"

   โหลด "ทับ" style.css เดิมของ designer (อย่าแก้ style.css)
   ถ้า designer ส่ง style.css ใหม่มา ทับไฟล์เดิมได้เลย ไฟล์นี้ยังทำงานต่อ

   สีตาม spec + ดูดจาก mockup จริง:
     เขียว   #007078  (พื้น + headline)
     เทา     #58595B  (ข้อความ = C0 M0 Y0 K80)
     ครีม    #F9F6ED  (พื้น section เนื้อหา)
   ============================================================ */

/* ── 0. ฟอนต์ custom ชุดล่าสุด (assets/new-fonts) ──────────────
   ประกาศทับ @font-face ของ style.css ที่ชี้ไป assets/html-beta/fonts
   @font-face ที่ family + weight + style ซ้ำกัน ตัวที่ประกาศทีหลังชนะ
   และไฟล์นี้โหลดหลัง style.css จึงทับได้โดยไม่ต้องแก้ไฟล์ designer

   FC Luxurious ใช้ไฟล์ชุด SS01 (custom ใหม่) แต่ตั้งชื่อ family ใน CSS
   เป็น "FC Luxurious" เหมือนเดิม ทุก rule ที่เรียกชื่อนี้อยู่จึงเปลี่ยนตามเอง
   font-weight อ่านจากค่า usWeightClass ในไฟล์ฟอนต์จริง
   เบราว์เซอร์โหลดเฉพาะน้ำหนักที่หน้าเว็บใช้จริง ประกาศครบไว้ก็ไม่เปลือง
   ── path อ้างอิงจาก assets/green-theme/css/ -> ../../new-fonts/ ── */
@font-face {
   font-family: 'FC Luxurious';
   src: url("../../new-fonts/FCLuxuriousSS01/FCLuxuriousSS01-Light.ttf") format("truetype");
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'FC Luxurious';
   src: url("../../new-fonts/FCLuxuriousSS01/FCLuxuriousSS01-LightItalic.ttf") format("truetype");
   font-weight: 300;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: 'FC Luxurious';
   src: url("../../new-fonts/FCLuxuriousSS01/FCLuxuriousSS01-Regular.ttf") format("truetype");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'FC Luxurious';
   src: url("../../new-fonts/FCLuxuriousSS01/FCLuxuriousSS01-Italic.ttf") format("truetype");
   font-weight: 500;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: 'FC Luxurious';
   src: url("../../new-fonts/FCLuxuriousSS01/FCLuxuriousSS01-Bold.ttf") format("truetype");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'FC Luxurious';
   src: url("../../new-fonts/FCLuxuriousSS01/FCLuxuriousSS01-BoldItalic.ttf") format("truetype");
   font-weight: 700;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-Thin.ttf") format("truetype");
   font-weight: 100;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-ThinItalic.ttf") format("truetype");
   font-weight: 100;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-ExtraLight.ttf") format("truetype");
   font-weight: 200;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-ExtraLightItalic.ttf") format("truetype");
   font-weight: 200;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-Light.ttf") format("truetype");
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-LightItalic.ttf") format("truetype");
   font-weight: 300;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-Regular.ttf") format("truetype");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-Italic.ttf") format("truetype");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-Medium.ttf") format("truetype");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-MediumItalic.ttf") format("truetype");
   font-weight: 500;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-SemiBold.ttf") format("truetype");
   font-weight: 600;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-SemiBoldItalic.ttf") format("truetype");
   font-weight: 600;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-Bold.ttf") format("truetype");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-BoldItalic.ttf") format("truetype");
   font-weight: 700;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-ExtraBold.ttf") format("truetype");
   font-weight: 800;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-ExtraBoldItalic.ttf") format("truetype");
   font-weight: 800;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-Heavy.ttf") format("truetype");
   font-weight: 850;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-HeavyItalic.ttf") format("truetype");
   font-weight: 850;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-Black.ttf") format("truetype");
   font-weight: 900;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'FC Quantum';
   src: url("../../new-fonts/FCQuantum/FCQuantum-BlackItalic.ttf") format("truetype");
   font-weight: 900;
   font-style: italic;
   font-display: swap;
}

:root {
   /* สีของธีม green (ค่า default) — ธีมอื่นโหลดไฟล์ assets/<theme>/css/<theme>.css ต่อท้าย
      แล้วประกาศตัวแปรชุดนี้ใหม่ (ชื่อ --ip-green = "สีหลักของธีม" แม้ธีมใหม่จะไม่ใช่สีเขียว)
      ห้ามเขียนรหัสสีตรงๆ ใน rule ด้านล่าง ให้ผ่านตัวแปรเสมอ เพื่อให้สลับธีมได้ครบ */
   --ip-green: #007078;
   --ip-green-dark: #00565C;
   --ip-gray: #58595B;
   --ip-cream: #F9F6ED;
   --ip-white: #FFFFFF;
   --ip-vdo-bg: #0C2F33;     /* พื้นกรอบ thumbnail VDO ระหว่างรอภาพโหลด */
   --ip-btn-hover: #434446;  /* hover ปุ่มส่งฟอร์ม Contact */
   --ip-black: #000;         /* ตัวดำ (quote ข่าว) + พื้นกรอบวิดีโอในข่าว */
   --ip-ci: #004E59;         /* สีเขียวอมฟ้าเข้มเดิมของ style.css ที่ยังเหลือใช้อยู่ (ดู section 25) */
}

/* ── 1. สีตัวอักษรหลัก: ทอง/แดง -> เขียว ────────────────────── */
.color-ci-2 { color: var(--ip-green) !important; }
.color-ci   { color: var(--ip-green) !important; }

body { color: var(--ip-gray); }

/* ── 2. Header ─────────────────────────────────────────────────
   หน้า Home ตอนยังไม่เลื่อน = โปร่งใสสนิท เห็น KV เต็มๆ
   (style.css เดิมใส่พื้นทึบจาง+ backdrop blur ไว้ ต้องล้างทั้งคู่
    ไม่งั้นจะยังเห็นเป็นแถบฝ้าพาดอยู่ด้านบน)

   ใช้ :not(.active) เพราะ plugins.js เติมคลาส .active ตอนเลื่อนเกิน 300px
   แล้ว header จะเปลี่ยนเป็นพื้นขาว — ถ้าใส่ !important ที่ .header เฉยๆ
   จะไปทับสถานะนั้นจน header ค้างโปร่งใสตลอด */
.header:not(.active) {
   background-color: transparent !important;
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
}

/* เลื่อนลงแล้ว: พื้นขาว (มาจาก style.css) + ตัวอักษรเขียว */
.header.active,
.header.active .main-menu > li > a,
.header.active .btn-lang a,
.header.active .btn-search { color: var(--ip-green) !important; }
.header.active .wsanimated-arrow span:after { background-color: var(--ip-green) !important; }

/* หน้าใน (พื้นขาวอยู่แล้ว) — ต้องประกาศหลัง :not(.active) เพราะ !important
   ความเฉพาะเจาะจงเท่ากัน ตัวที่อยู่ล่างกว่าเป็นฝ่ายชนะ */
.wrapper-header,
.wrapper-header .header { color: var(--ip-green) !important; }
.wrapper-header .header { background-color: var(--ip-white) !important; }
.wrapper-header .wsanimated-arrow span:after { background-color: var(--ip-green) !important; }

.main-menu > li > a.active { color: var(--ip-green) !important; }
.main-menu > li > a:hover  { color: var(--ip-green-dark) !important; }

/* โลโก้ 3D — style.css เดิมใส่ filter บังคับให้เป็นขาวตอนทับ hero
   (brightness(0) invert(1)) ซึ่งจะทำให้โลโก้ 3D กลายเป็นเงาขาวแบน
   จึงต้องปิด filter ทุกสถานะ ให้เห็นเนื้อโลหะทองแดงตามไฟล์จริง */
.header .logo,
.header.active .logo,
.wrapper-header .logo,
.boxmenu .header-boxmenu .logo-box { filter: none !important; }

/* เดิมใส่ drop-shadow ให้โลโก้ตอนทับ hero — เอาออกแล้ว (ผู้ใช้สั่ง 26 ก.ย.)
   ให้โลโก้เหมือนไฟล์ต้นฉบับทุกหน้า */

/* เมนูมือถือ (กดปุ่มแฮมเบอร์เกอร์) — style.css เดิมเป็นพื้นชมพู #EC008C
   ตกค้างจากธีมเก่า เปลี่ยนเป็นเขียวของแบรนด์ */
.boxmenu { background-color: var(--ip-green) !important; }
.boxmenu .main-menu > li > a,
.boxmenu .lang-box a { color: var(--ip-white) !important; }
.boxmenu .lang-box a.active { color: var(--ip-white) !important; font-weight: bold; }
.boxmenu .top-close { color: var(--ip-white) !important; }

/* ── 3. Hero หน้า Home = Key Visual ──────────────────────────
   ข้อความอยู่ในรูป KV แล้ว จึงไม่ต้องมี text ซ้อน
   ไฟล์ KV ต่อภาษา set เป็น inline style ใน view (kv-desktop-xx / kv-mobile-xx)
   PDF ระบุว่า KV ชุดนี้ยังไม่ final — พอได้ตัวจริงมาให้ทับไฟล์ชื่อเดิมได้เลย */
.hero-kv {
   min-height: 100dvh;
   width: 100%;
   position: relative;
   background-color: var(--ip-green);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
}

/* ── 4. Section concept (พื้นเขียว ตัวอักษรขาว) ──────────────── */
.new-icon-home {
   background-color: var(--ip-green) !important;
   background-image: none !important;
   color: var(--ip-white) !important;
}
.new-icon-home .color-ci-2,
.new-icon-home h1,
.new-icon-home h2,
.new-icon-home h3,
.new-icon-home p,
.new-icon-home strong { color: var(--ip-white) !important; }

.ip-symbol {
   display: block;
   width: 46px;
   height: auto;
   margin: 0 auto 30px;
}
.ip-rule {
   width: 34px;
   height: 1px;
   background: rgba(255, 255, 255, .8);
   margin: 26px auto 30px;
   border: 0;
   opacity: 1;
}

/* ── 4b. ข้อความ Branding ในกรอบเขียว ────────────────────────
   ต้องเขียน selector ให้ยาวเท่า style.css (.new-icon-home .detail-new-icon p
   = 3 คลาส) ไม่งั้นจะโดนทับ เพราะ specificity สูงกว่าชนะเสมอ
   ไม่ว่าไฟล์ไหนจะโหลดทีหลัง

   ขนาดตัวอักษรปล่อยให้ใช้ค่า responsive ของ designer ตามเดิม
   แก้เฉพาะ "น้ำหนัก" กับระยะเว้นบรรทัด */

/* ประโยคชูโรง — ตัวหนา
   ต้องเป็น "0 auto 1.4em" ไม่ใช่ "0 0 1.4em"
   เพราะ style.css ใช้ margin:0 auto เป็นตัวจัดบล็อกให้อยู่กึ่งกลาง
   ถ้าเขียนทับด้วย 0 ซ้าย-ขวา บล็อกจะหลุดไปชิดซ้ายทันที */
.new-icon-home .detail-new-icon .ip-lead {
   font-weight: bold;
   margin: 0 auto 1.4em;
}

/* ย่อหน้าอธิบาย — บังคับตัวธรรมดาทั้งก้อน ห้ามหนาเด็ดขาด
   ใช้ 300 = FCLuxurious-Light ซึ่งเป็นน้ำหนักที่เบาที่สุดที่ฟอนต์ชุดนี้มี
   (ถ้าใช้ 500 = Regular จะเท่ากับค่าเดิมของ style.css จึงไม่เห็นความต่าง)
   ใส่ !important + ครอบ strong/b กันเผลอใส่ตัวหนาแทรกในอนาคต */
.new-icon-home .detail-new-icon .ip-body,
.new-icon-home .detail-new-icon .ip-body *,
.new-icon-home .detail-new-icon .ip-body strong,
.new-icon-home .detail-new-icon .ip-body b {
   font-weight: 300 !important;
}
.new-icon-home .detail-new-icon .ip-body { margin-bottom: 0; }

/* ── 5. 4 เสาหลัก AWAKE / EVOLVE / UNITE / INSPIRE ─────────────
   ตาม mockup อ้างอิง: ต้องใหญ่และกินความกว้างเต็ม ไม่กระจุกกลาง */
.ip-pillars {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 0;
   margin: 76px auto 0;
   width: 100%;
   max-width: 1400px;
}

/* คอลัมน์กว้างตามเนื้อหา ไม่บังคับให้เท่ากันทุกช่อง
   (ถ้าบังคับเท่ากัน คำยาวอย่าง INSPIRE จะถูกบีบจนตกบรรทัด/ล้น) */
.ip-pillar {
   flex: 0 1 auto;
   padding: 4px clamp(10px, 1.4vw, 24px);
   text-align: center;
   border-left: 1px solid rgba(255, 255, 255, .45);
}
.ip-pillar:first-child { border-left: 0; }

/* ขนาดยืดตามความกว้างจอ มีเพดานบน-ล่าง
   วัดจากไฟล์ฟอนต์จริง: AWAKE+EVOLVE+UNITE+INSPIRE รวมกว้าง 14.62em
   ที่เพดาน 62px -> 14.62 x 62 = 907px + padding 192px = 1099px
   กรอบมี 1400px เหลือที่ว่าง ~300px จึงไม่ตกบรรทัดทุกขนาดจอ
   (เพดานปลอดภัยสูงสุดคือ ~78px ถ้าอยากใหญ่กว่านี้อีก) */
.ip-pillar h3 {
   font-family: "FC Luxurious", sans-serif;
   font-feature-settings: "ss01" 1;
   color: var(--ip-white) !important;
   font-size: clamp(26px, 3.6vw, 62px);
   font-weight: bold;
   letter-spacing: .03em;
   margin: 0 0 11px;
   line-height: 1.05;
   white-space: nowrap;
}
.ip-pillar p {
   font-family: "FC Quantum", sans-serif;
   color: rgba(255, 255, 255, .92) !important;
   font-size: clamp(14px, 1.05vw, 18px);
   line-height: 1.45;
   margin: 0;
}

/* ── 6. Section ข่าว (พื้นครีม หัวเรื่องเขียว) ────────────────── */
.news-home {
   background: var(--ip-cream) !important;
   color: var(--ip-gray) !important;
}
.news-home .news-label,
.news-home .title-news,
.news-home .title-detail-news { color: var(--ip-green) !important; }
.news-home .date-news,
.news-home .news-copy { color: var(--ip-gray) !important; }
.news-home .readmore-news { color: var(--ip-green) !important; }

/* ── 7. Section VDO (ใหม่ตาม requirement ข้อ 4) ───────────────
   คลิกแล้วเปิด pop-up ด้วย Fancybox (มีอยู่ในหน้าเว็บแล้ว) */
.ip-vdo { background: var(--ip-white); padding: 70px 0 90px; }
/* ป้าย VDO — ขนาด/ฟอนต์/responsive มาจากคลาส .news-label ของ designer
   (ป้ายเดียวกับ NEWS UPDATE) ตรงนี้กำหนดแค่สีอย่างเดียว
   ห้ามใส่ font-size ที่นี่ เพราะ specificity เท่ากันและไฟล์เราโหลดทีหลัง
   จะไปทับค่า responsive ของ designer ทั้งชุด */
.ip-vdo-label {
   color: var(--ip-green);
}
.ip-vdo-frame {
   position: relative;
   display: block;
   border-radius: 14px;
   overflow: hidden;
   background: var(--ip-vdo-bg);
}
.ip-vdo-frame img { width: 100%; height: auto; display: block; }
.ip-vdo-frame .ip-play {
   position: absolute;
   left: 50%; top: 50%;
   transform: translate(-50%, -50%);
   width: 76px; height: 76px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .92);
   color: var(--ip-green);
   display: flex; align-items: center; justify-content: center;
   font-size: 30px;
   transition: transform .25s ease;
}
.ip-vdo-frame:hover .ip-play { transform: translate(-50%, -50%) scale(1.08); }
.ip-vdo-title {
   color: var(--ip-green);
   font-size: 24px;
   letter-spacing: .03em;
   margin: 34px 0 16px;
}
.ip-vdo-copy { color: var(--ip-gray); line-height: 1.8; margin: 0; }

/* ── 8. หน้า Project Details ──────────────────────────────────
   .hero-page .img-hero เดิมหุบเพราะเป็น flex item -> บังคับเต็มกว้าง */
.hero-page .img-hero { width: 100%; }

.ip-pd { background: var(--ip-cream); padding: 74px 0 90px; }
.ip-pd-label {
   font-family: "FC Quantum", sans-serif;
   color: var(--ip-gray);
   font-size: 14px;
   letter-spacing: .12em;
   text-transform: uppercase;
   margin-bottom: 10px;
}
.ip-pd-vision {
   color: var(--ip-green);
   font-size: 42px;
   line-height: 1.18;
   letter-spacing: .02em;
   margin: 0 0 46px;
}
.ip-pd-mission {
   color: var(--ip-green);
   font-size: 26px;
   line-height: 1.35;
   letter-spacing: .02em;
   margin: 0 0 44px;
}
.ip-pd-head {
   color: var(--ip-green);
   font-size: 19px;
   letter-spacing: .03em;
   margin: 0 0 18px;
}
/* body text ในหน้านี้ตัวเล็กไป — ขยายขึ้นตามที่ขอ */
.ip-pd-list { list-style: none; padding: 0; margin: 0 0 40px; font-size: 18px; }
.ip-pd-list li {
   position: relative;
   padding-left: 20px;
   margin-bottom: 14px;
   color: var(--ip-gray);
   line-height: 1.7;
}
.ip-pd-list li::before {
   content: "•";
   position: absolute;
   left: 0; top: 0;
   color: var(--ip-gray);
}
.ip-pd-spec { margin: 0 0 30px; font-size: 18px; }
.ip-pd-spec div { display: flex; gap: 14px; margin-bottom: 8px; color: var(--ip-gray); }
.ip-pd-spec dt { min-width: 110px; font-weight: 400; }
.ip-pd-spec dd { margin: 0; font-weight: 600; }
.ip-pd-copy { color: var(--ip-gray); font-size: 18px; line-height: 1.8; margin: 0 0 22px; }
.ip-pd-label { font-size: 15px; }
.ip-pd-map { font-size: 18px; }
.ip-pd-map {
   display: inline-block;
   color: var(--ip-green);
   border-bottom: 1px solid currentColor;
   text-decoration: none;
}
.ip-pd-map:hover { color: var(--ip-green-dark); }

/* รูป masterplan ฝั่งขวา (กดเพื่อขยายเป็น pop-up) */
.ip-pd-figure { border-radius: 14px; overflow: hidden; display: block; }
.ip-pd-figure img { width: 100%; height: auto; display: block; }

/* ── 9. หน้า Contact ──────────────────────────────────────────
   ตาม mockup: headline เขียว / ปุ่ม SEND เทาเข้ม ไม่ใช่เขียว  */
.contact-section { color: var(--ip-gray); }
.contact-form label { color: var(--ip-gray); }
.contact-info,
.contact-address p,
.contact-address h4 { color: var(--ip-gray); }

.btn-send,
.btn-cut-wrap {
   background-color: var(--ip-gray) !important;
   color: var(--ip-white) !important;
   border-color: var(--ip-gray) !important;
}
.btn-send:hover,
.btn-cut-wrap:hover { background-color: var(--ip-btn-hover) !important; }

.contact-thankyou { color: var(--ip-gray); font-size: 17px; line-height: 1.8; }
.contact-thankyou p { margin-bottom: 14px; }

/* ── 10. Footer (พื้นเขียว ตัวอักษรขาว) ───────────────────────── */
.footer {
   background-color: var(--ip-green) !important;
   background-image: none !important;
   color: var(--ip-white) !important;
}
.footer h2,
.footer p,
.footer a { color: var(--ip-white) !important; }
.footer a:hover { color: rgba(255, 255, 255, .75) !important; }
.footer .logo-about-footer { max-width: 106px; height: auto; }

/* ── 11. หัวเรื่องทั่วไปที่เดิมเป็นทอง -> เขียว ────────────────── */
.title-news,
.title-detail-news,
.news-label,
.project-overview-title,
.project-overview-subtitle,
.title-new-icon,
.sub-title-new-icon { color: var(--ip-green); }

/* ── 11b. ลดขนาดหัวเรื่องบนจอใหญ่ ─────────────────────────────
   style.css ไล่ขนาดเป็นขั้นบันไดด้วย max-width ตั้งแต่ 1621px ลงมา
   ตรงนี้จึงใช้ "min-width" แทน เพื่อให้มีผลเฉพาะจอใหญ่
   ถ้าใช้ max-width จะไปทับค่าของจอเล็กด้วย (ไฟล์เราโหลดทีหลัง)
   จอ 1450px ลงมายังใช้ค่าเดิมของ designer ทั้งหมด            */

/* จอใหญ่สุด (> 1621px) */
@media (min-width: 1622px) {
   .new-icon-home .title-new-icon   { font-size: 88px; }  /* เดิม 110px */
   .news-home .title-news           { font-size: 52px; }  /* เดิม  64px */
   .news-home .title-detail-news    { font-size: 34px; }  /* เดิม  42px */
}

/* จอกลางใหญ่ (1451–1621px)
   ค่าต้องอยู่ "ระหว่าง" ขั้นล่าง (จอ <=1450) กับขั้นบน (จอ >1621)
   ไม่งั้นจอใหญ่กว่าจะได้ตัวเล็กกว่า ดูแปลกตอนย่อ-ขยายหน้าต่าง */
@media (min-width: 1451px) and (max-width: 1621px) {
   .new-icon-home .title-new-icon   { font-size: 83px; }  /* เดิม 90px | ขั้นล่าง 78 */
   .news-home .title-news           { font-size: 50px; }  /* เดิม 54px | ขั้นล่าง 48 */
   .news-home .title-detail-news    { font-size: 35px; }  /* เดิม 36px | ขั้นล่าง 36 */
}

/* ── 12. Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
   .ip-pillars { margin-top: 48px; }
   .ip-pillar {
      flex: 0 0 50%;
      max-width: 50%;
      border-left: 0;
      padding: 18px 10px;
   }
   .ip-pillar h3 { font-size: clamp(26px, 6.5vw, 44px); }
   .ip-pillar p { font-size: 15px; }
   .ip-pd-vision { font-size: 31px; }
   .ip-pd-mission { font-size: 21px; }
   .ip-symbol { width: 38px; margin-bottom: 24px; }
}

@media (max-width: 575px) {
   .ip-pillar { flex: 0 0 100%; max-width: 100%; }
   /* เรียงแนวตั้ง: เส้นสั้นกึ่งกลางคั่นระหว่างแต่ละคำ (ไม่ใส่ใต้ตัวสุดท้าย)
      สีเดียวกับเส้นคั่นแนวตั้งตอน desktop */
   .ip-pillar:not(:last-child)::after {
      content: "";
      display: block;
      width: 48px;
      height: 1px;
      margin: 18px auto 0;
      background: rgba(255, 255, 255, .45);
   }
   .ip-vdo-frame .ip-play { width: 58px; height: 58px; font-size: 23px; }
}

/* ── 13. หน้าข่าวชั่วคราว news-detail-temp (.ip-pr-*) ──────────
   สเปกจาก Fix_Requirement/Screenshot 2569-09-22 at 23.20.14.png
      Headline  = FC Luxurious bold  สีเขียว
      Subhead   = FC Luxurious Medium สีเขียว และเล็กกว่า Headline
      Bullets   = FC Quantum Bold
      Body      = ไม่เต็มเฟรม (จำกัดความกว้างคอลัมน์)
      Quote CEO = ตัวหนา สีเขียว
      และเว้นบรรทัดให้ห่างขึ้นเพื่อให้อ่านง่าย

   หมายเหตุฟอนต์: ชุด assets/new-fonts มี FCQuantum-Bold (700) จริงแล้ว
   weight 700 ด้านล่างจึงใช้ไฟล์ Bold ตรง ๆ ไม่ต้องให้เบราว์เซอร์ทำหนาเอง
   ──────────────────────────────────────────────────────────── */

.ip-pr-hero { padding: 0 0 clamp(28px, 3.4vw, 56px); }

.ip-pr-kv {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 12px;
}

.ip-pr { padding: 0 0 clamp(60px, 7vw, 120px); }

/* คอลัมน์เนื้อหา — ชิดซ้ายแนวเดียวกับขอบ KV (เยื้องเข้ามานิดตามม็อก)
   ข้อความไม่เต็มเฟรมตามที่ดีไซเนอร์สั่ง แต่รูปใหญ่กลางข่าวกว้างเต็ม KV */
.ip-pr-doc {
   margin: 0;
   padding-left: clamp(0px, 2vw, 32px);
}
.ip-pr-doc > :not(.ip-pr-figure) { max-width: 1100px; }
.ip-pr-doc > .ip-pr-figure { margin-left: calc(-1 * clamp(0px, 2vw, 32px)); }

.ip-pr-headline {
   font-family: "FC Luxurious", sans-serif;
   font-weight: bold;
   color: var(--ip-green);
   font-size: clamp(30px, 3.3vw, 54px);
   line-height: 1.25;
   margin: 0 0 .30em;
}

.ip-pr-subhead {
   font-family: "FC Luxurious", sans-serif;
   font-weight: 500;
   color: var(--ip-green);
   font-size: clamp(21px, 2.05vw, 34px);
   line-height: 1.4;
   margin: 0 0 1.1em;
}

.ip-pr-bullets {
   font-family: "FC Quantum", sans-serif;
   font-weight: 700;
   color: var(--ip-green);
   font-size: clamp(15px, 1.05vw, 18px);
   line-height: 2;
   margin: 0 0 2.2em;
   padding-left: 1.15em;
   list-style: none;
}

.ip-pr-bullets li { position: relative; margin-bottom: .85em; }

.ip-pr-bullets li::before {
   content: "";
   position: absolute;
   left: -1.15em;
   top: .78em;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background-color: var(--ip-green);
}

.ip-pr-body {
   font-family: "FC Quantum", sans-serif;
   font-weight: 300;
   color: var(--ip-gray);
   font-size: clamp(15px, 1.05vw, 18px);
   line-height: 2.05;
   margin: 0 0 1.75em;
}

.ip-pr-h3 {
   font-family: "FC Luxurious", sans-serif;
   font-weight: bold;
   color: var(--ip-green);
   font-size: clamp(23px, 2.2vw, 36px);
   line-height: 1.35;
   margin: 2.1em 0 .75em;
}

.ip-pr-doc > .ip-pr-h3:first-child { margin-top: 0; }

/* คำพูดผู้บริหาร — ตัวหนา สีเขียว */
.ip-pr-quote {
   font-family: "FC Quantum", sans-serif;
   font-weight: 700;
   color: var(--ip-green);
   font-size: clamp(16px, 1.15vw, 20px);
   line-height: 2;
   margin: 0 0 1.9em;
   padding: 0;
}

/* คำพูด CEO ช่วงหลังของข่าว — ดีไซเนอร์สั่งเป็นตัวสีดำ (เฉพาะช่วงแรกที่เป็นสีเขียว) */
.ip-pr-quote-black { color: var(--ip-black); }

/* ช่วง "At Siam Piwat, we believe…" และคำพูดปิดท้าย — ไม่หนา ขนาดเท่าเนื้อความปกติ */
.ip-pr-quote-regular {
   font-weight: 300;
   font-size: clamp(15px, 1.05vw, 18px);
   line-height: 2.05;
}

/* ย่อหน้าสรุปปิดท้าย (ในเอกสารเป็นตัวหนา แต่ไม่ใช่คำพูด CEO) */
.ip-pr-emphasis {
   font-family: "FC Quantum", sans-serif;
   font-weight: 500;
   color: var(--ip-gray);
   font-size: clamp(15px, 1.05vw, 18px);
   line-height: 2.05;
   margin: 2em 0 1.5em;
}

.ip-pr-contact {
   font-family: "FC Quantum", sans-serif;
   font-weight: 500;
   color: var(--ip-green);
   font-size: clamp(15px, 1.05vw, 18px);
   line-height: 2;
   margin: 0 0 .6em;
}

.ip-pr-tags {
   font-family: "FC Quantum", sans-serif;
   font-weight: 300;
   color: var(--ip-gray);
   font-size: clamp(14px, .95vw, 16px);
   line-height: 1.9;
   word-break: break-word;
   margin: 0;
}

.ip-pr-figure {
   margin: clamp(34px, 4vw, 64px) 0;
}

.ip-pr-figure img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 12px;
}

.ip-pr-gallery {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: clamp(14px, 1.6vw, 28px);
   max-width: 900px;
   margin: clamp(38px, 4.5vw, 72px) 0 0;
}

.ip-pr-gallery img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   aspect-ratio: 4 / 3;
   border-radius: 12px;
}

@media (max-width: 767px) {
   .ip-pr-doc { padding-left: 0; }
   .ip-pr-doc > .ip-pr-figure { margin-left: 0; }
   .ip-pr-gallery { grid-template-columns: 1fr; }
}

/* ── หน้าเล่นวิดีโอพิเศษ /{lang}/special-video (.ip-video-*) ─────────── */
.ip-video { padding: 0 0 clamp(60px, 7vw, 120px); }

.ip-video-frame {
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;
   border-radius: 12px;
   overflow: hidden;
   background: var(--ip-black);
}

.ip-video-frame iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

/* special-video: mobile/tablet กว้าง 100%, desktop (>=1200px) กว้าง 95% อยู่กึ่งกลาง */
.ip-video-page .ip-video { padding: 0 0 32px; }   /* เว้น 1 บรรทัดใต้วิดีโอก่อนถึง footer */
.ip-video-page .ip-video .container-fluid { padding: 0; max-width: none; }
.ip-video-page .ip-video-frame { width: 100%; margin: 0 auto; border-radius: 0; }
@media (min-width: 1200px) {
   .ip-video-page .ip-video-frame { width: 95%; }
}

/* simple_menu (special-video): เมนูเหลือแค่ Home — ย้ายจากกลางจอมาชิดซ้ายต่อจากโลโก้
   (เมนูนี้แสดงเฉพาะ >=1200px จอเล็กกว่านั้นใช้เมนู ☰ เหมือนเดิม) */
.header.ip-simple-menu .wrap-logo { margin-right: 0; }
.header.ip-simple-menu .main-menu {
   position: static;
   transform: none;
   margin-left: clamp(24px, 3vw, 56px);
   margin-right: auto;
}

/* ── 14. ลดขนาดหัวข้อใหญ่ทั้งเว็บ ~15% (×0.85) ─────────────────
   ผู้ใช้สั่ง 2026-09-25: "font ตัวสำคัญที่ใหญ่ๆ ลดลงมาหน่อย ทั้งเว็บ"
   generate จาก font-size เดิมของหัวข้อใหญ่ใน style.css + ไฟล์นี้ (ทุก breakpoint)
   แล้วคูณ 0.85 เรียงลำดับเหมือนต้นฉบับ cascade จึงทำงานเหมือนเดิม แค่เล็กลง
   อยากปรับอีก: เปลี่ยนตัวคูณแล้ว generate ใหม่ หรือลบทั้ง section นี้ = กลับขนาดเดิม
   (ไม่รวมเมนู / ป้าย NEWS UPDATE, VDO / เนื้อความปกติ)
   ──────────────────────────────────────────────────────────── */
.font-title-l { font-size: 76px; }   /* เดิม 90px */
@media (max-width: 1621px) { .font-title-l { font-size: 60px; }   /* เดิม 70px */ }
@media (max-width: 1199.98px) { .font-title-l { font-size: 42px; }   /* เดิม 50px */ }
@media (max-width: 767.98px) { .font-title-l { font-size: 30px; }   /* เดิม 35px */ }
.blog-detail-first h1 { font-size: 34px; }   /* เดิม 40px */
@media (max-width: 991.98px) { .blog-detail-first h1 { font-size: 26px; }   /* เดิม 30px */ }
@media (max-width: 575.98px) { .blog-detail-first h1 { font-size: 26px; }   /* เดิม 30px */ }
.font-title { font-size: 51px; }   /* เดิม 60px */
@media (max-width: 991.98px) { .font-title { font-size: 26px; }   /* เดิม 30px */ }
.left-detail h2 { font-size: 30px; }   /* เดิม 35px */
@media (max-width: 991.98px) { .left-detail h2 { font-size: 17px; }   /* เดิม 20px */ }
.new-icon-home .title-new-icon { font-size: 94px; }   /* เดิม 110px */
@media (max-width: 1621px) { .new-icon-home .title-new-icon { font-size: 76px; }   /* เดิม 90px */ }
@media (max-width: 1450px) { .new-icon-home .title-new-icon { font-size: 66px; }   /* เดิม 78px */ }
@media (max-width: 1199.98px) { .new-icon-home .title-new-icon { font-size: 58px; }   /* เดิม 68px */ }
@media (max-width: 991.98px) { .new-icon-home .title-new-icon { font-size: 48px; }   /* เดิม 56px */ }
@media (max-width: 767.98px) { .new-icon-home .title-new-icon { font-size: 39px; }   /* เดิม 46px */ }
@media (max-width: 575.98px) { .new-icon-home .title-new-icon { font-size: 34px; }   /* เดิม 40px */ }
@media (max-width: 450.98px) { .new-icon-home .title-new-icon { font-size: 29px; }   /* เดิม 34px */ }
.new-icon-home .sub-title-new-icon { font-size: 53px; }   /* เดิม 62px */
@media (max-width: 1621px) { .new-icon-home .sub-title-new-icon { font-size: 42px; }   /* เดิม 50px */ }
@media (max-width: 1450px) { .new-icon-home .sub-title-new-icon { font-size: 37px; }   /* เดิม 44px */ }
@media (max-width: 1199.98px) { .new-icon-home .sub-title-new-icon { font-size: 32px; }   /* เดิม 38px */ }
@media (max-width: 991.98px) { .new-icon-home .sub-title-new-icon { font-size: 29px; }   /* เดิม 34px */ }
@media (max-width: 767.98px) { .new-icon-home .sub-title-new-icon { font-size: 26px; }   /* เดิม 30px */ }
@media (max-width: 575.98px) { .new-icon-home .sub-title-new-icon { font-size: 22px; }   /* เดิม 26px */ }
.new-icon-home .detail-new-icon h2 { font-size: 42px; }   /* เดิม 50px */
@media (max-width: 1621px) { .new-icon-home .detail-new-icon h2 { font-size: 36px; }   /* เดิม 42px */ }
@media (max-width: 1450px) { .new-icon-home .detail-new-icon h2 { font-size: 31px; }   /* เดิม 36px */ }
@media (max-width: 1199.98px) { .new-icon-home .detail-new-icon h2 { font-size: 27px; }   /* เดิม 32px */ }
@media (max-width: 991.98px) { .new-icon-home .detail-new-icon h2 { font-size: 24px; }   /* เดิม 28px */ }
@media (max-width: 767.98px) { .new-icon-home .detail-new-icon h2 { font-size: 22px; }   /* เดิม 26px */ }
@media (max-width: 575.98px) { .new-icon-home .detail-new-icon h2 { font-size: 20px; }   /* เดิม 23px */ }
.news-home .title-news { font-size: 54px; }   /* เดิม 64px */
@media (max-width: 1621px) { .news-home .title-news { font-size: 46px; }   /* เดิม 54px */ }
@media (max-width: 1450px) { .news-home .title-news { font-size: 41px; }   /* เดิม 48px */ }
@media (max-width: 1199.98px) { .news-home .title-news { font-size: 36px; }   /* เดิม 42px */ }
@media (max-width: 991.98px) { .news-home .title-news { font-size: 32px; }   /* เดิม 38px */ }
@media (max-width: 767.98px) { .news-home .title-news { font-size: 29px; }   /* เดิม 34px */ }
@media (max-width: 575.98px) { .news-home .title-news { font-size: 26px; }   /* เดิม 30px */ }
.news-home .title-detail-news { font-size: 36px; }   /* เดิม 42px */
@media (max-width: 1621px) { .news-home .title-detail-news { font-size: 31px; }   /* เดิม 36px */ }
@media (max-width: 1199.98px) { .news-home .title-detail-news { font-size: 27px; }   /* เดิม 32px */ }
@media (max-width: 991.98px) { .news-home .title-detail-news { font-size: 24px; }   /* เดิม 28px */ }
@media (max-width: 575.98px) { .news-home .title-detail-news { font-size: 20px; }   /* เดิม 24px */ }
.project-overview .project-overview-title { font-size: 56px; }   /* เดิม 66px */
@media (max-width: 1621px) { .project-overview .project-overview-title { font-size: 48px; }   /* เดิม 56px */ }
@media (max-width: 1450px) { .project-overview .project-overview-title { font-size: 42px; }   /* เดิม 50px */ }
@media (max-width: 1199.98px) { .project-overview .project-overview-title { font-size: 37px; }   /* เดิม 44px */ }
@media (max-width: 991.98px) { .project-overview .project-overview-title { font-size: 34px; }   /* เดิม 40px */ }
@media (max-width: 767.98px) { .project-overview .project-overview-title { font-size: 30px; }   /* เดิม 35px */ }
@media (max-width: 575.98px) { .project-overview .project-overview-title { font-size: 26px; }   /* เดิม 30px */ }
.project-overview .project-overview-subtitle { font-size: 34px; }   /* เดิม 40px */
@media (max-width: 1621px) { .project-overview .project-overview-subtitle { font-size: 29px; }   /* เดิม 34px */ }
@media (max-width: 1450px) { .project-overview .project-overview-subtitle { font-size: 26px; }   /* เดิม 30px */ }
@media (max-width: 1199.98px) { .project-overview .project-overview-subtitle { font-size: 23px; }   /* เดิม 27px */ }
@media (max-width: 991.98px) { .project-overview .project-overview-subtitle { font-size: 24px; }   /* เดิม 28px */ }
@media (max-width: 575.98px) { .project-overview .project-overview-subtitle { font-size: 20px; }   /* เดิม 23px */ }
.ip-pillar h3 { font-size: clamp(22px, 3.06vw, 53px); }   /* เดิม clamp(26px, 3.6vw, 62px) */
.ip-pd-vision { font-size: 36px; }   /* เดิม 42px */
@media (min-width: 1622px) { .new-icon-home .title-new-icon { font-size: 75px; }   /* เดิม 88px */ }
@media (min-width: 1622px) { .news-home .title-news { font-size: 44px; }   /* เดิม 52px */ }
@media (min-width: 1622px) { .news-home .title-detail-news { font-size: 29px; }   /* เดิม 34px */ }
@media (min-width: 1451px) and (max-width: 1621px) { .new-icon-home .title-new-icon { font-size: 71px; }   /* เดิม 83px */ }
@media (min-width: 1451px) and (max-width: 1621px) { .news-home .title-news { font-size: 42px; }   /* เดิม 50px */ }
@media (min-width: 1451px) and (max-width: 1621px) { .news-home .title-detail-news { font-size: 30px; }   /* เดิม 35px */ }
@media (max-width: 991px) { .ip-pillar h3 { font-size: clamp(22px, 5.52vw, 37px); }   /* เดิม clamp(26px, 6.5vw, 44px) */ }
@media (max-width: 991px) { .ip-pd-vision { font-size: 26px; }   /* เดิม 31px */ }
.ip-pr-headline { font-size: clamp(26px, 2.8vw, 46px); }   /* เดิม clamp(30px, 3.3vw, 54px) */
.ip-pr-subhead { font-size: clamp(18px, 1.74vw, 29px); }   /* เดิม clamp(21px, 2.05vw, 34px) */
.ip-pr-h3 { font-size: clamp(20px, 1.87vw, 31px); }   /* เดิม clamp(23px, 2.2vw, 36px) */

/* ── 15. หัวข้อ NEWS บนหน้า Home ลดลงอีก ~10% (×0.9 จาก section 14) ─────
   ผู้ใช้สั่ง 2026-09-25: "THE NEW ICONIC LANDMARK IN PHUKET" (.title-news)
   กับ "VIVID WONDERS OF THE SOUTHERN THAI HORIZON" (.title-detail-news) ลดลงนิด
   .title-detail-news ลดเพิ่มอีก ×0.9 ตามที่ผู้ใช้ขอรอบที่สอง
   ──────────────────────────────────────────────────────────── */
.news-home .title-news { font-size: 49px; }   /* section 14 = 54px */
@media (max-width: 1621px) { .news-home .title-news { font-size: 41px; }   /* section 14 = 46px */ }
@media (max-width: 1450px) { .news-home .title-news { font-size: 37px; }   /* section 14 = 41px */ }
@media (max-width: 1199.98px) { .news-home .title-news { font-size: 32px; }   /* section 14 = 36px */ }
@media (max-width: 991.98px) { .news-home .title-news { font-size: 29px; }   /* section 14 = 32px */ }
@media (max-width: 767.98px) { .news-home .title-news { font-size: 26px; }   /* section 14 = 29px */ }
@media (max-width: 575.98px) { .news-home .title-news { font-size: 23px; }   /* section 14 = 26px */ }
.news-home .title-detail-news { font-size: 29px; }   /* section 14 = 36px, 25 ก.ย. ลดอีกรอบจาก 32px */
@media (max-width: 1621px) { .news-home .title-detail-news { font-size: 25px; }   /* section 14 = 31px, 25 ก.ย. ลดอีกรอบจาก 28px */ }
@media (max-width: 1199.98px) { .news-home .title-detail-news { font-size: 22px; }   /* section 14 = 27px, 25 ก.ย. ลดอีกรอบจาก 24px */ }
@media (max-width: 991.98px) { .news-home .title-detail-news { font-size: 20px; }   /* section 14 = 24px, 25 ก.ย. ลดอีกรอบจาก 22px */ }
@media (max-width: 575.98px) { .news-home .title-detail-news { font-size: 16px; }   /* section 14 = 20px, 25 ก.ย. ลดอีกรอบจาก 18px */ }
@media (min-width: 1622px) { .news-home .title-news { font-size: 40px; }   /* section 14 = 44px */ }
@media (min-width: 1622px) { .news-home .title-detail-news { font-size: 23px; }   /* section 14 = 29px, 25 ก.ย. ลดอีกรอบจาก 26px */ }
@media (min-width: 1451px) and (max-width: 1621px) { .news-home .title-news { font-size: 38px; }   /* section 14 = 42px */ }
@media (min-width: 1451px) and (max-width: 1621px) { .news-home .title-detail-news { font-size: 24px; }   /* section 14 = 30px, 25 ก.ย. ลดอีกรอบจาก 27px */ }

/* ── 17. หน้า News Detail (/{lang}/news-detail) ─────────────────
   ตาม Fix_25092026/Website - 25 SEP .pptx slide 1-2 (แทน section 16 เดิมทั้งก้อน)
   โครงหน้าใช้ชุด .ip-pr-* (section 13) ส่วนนี้ปรับให้ตรง mockup ผูกกับ .ip-news-page
      Headline = FC Luxurious Bold ตัวพิมพ์ใหญ่ สีเขียว
      SubHead  = FC Luxurious Medium ตัวพิมพ์ใหญ่ สีเขียว
      Body     = ตัวใหญ่ขึ้นอีกนิด สีเทา (bullet + คำพูด CEO ช่วงแรก = เขียว)
   ──────────────────────────────────────────────────────────── */
.ip-news-page .ip-pr-headline {
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: .03em;
   font-size: clamp(28px, 3vw, 48px);
   line-height: 1.2;
   margin-bottom: .35em;
}
.ip-news-page .ip-pr-subhead {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .02em;
   font-size: clamp(19px, 1.85vw, 30px);
   line-height: 1.35;
   margin-bottom: 1.3em;
}
/* body ใหญ่ขึ้นจาก clamp(15px, 1.05vw, 18px) -> ~18px ที่จอ 1440 */
.ip-news-page .ip-pr-body,
.ip-news-page .ip-pr-bullets,
.ip-news-page .ip-pr-quote,
.ip-news-page .ip-pr-contact {
   font-size: clamp(16px, 1.25vw, 20px);
   line-height: 1.9;
}
.ip-news-page .ip-pr-bullets,
.ip-news-page .ip-pr-quote { font-weight: 500; }
.ip-news-page .ip-pr-body { color: var(--ip-gray); }
/* mockup ไม่มีตัวหนาแทรกกลางย่อหน้า (tag <strong> จาก Word ยังอยู่ใน view
   ถ้าอยากให้หนาตาม Word เปลี่ยนเป็น font-weight: 700 ที่บรรทัดนี้บรรทัดเดียว) */
.ip-news-page .ip-pr-doc strong { font-weight: inherit; }
.ip-news-page .ip-pr-h3 {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .02em;
   font-size: clamp(20px, 1.7vw, 28px);
}
/* thumbnail ท้ายข่าว 4 ช่อง ขนาดเท่ากัน */
.ip-news-thumbs { margin-top: clamp(38px, 4.5vw, 72px); }
.ip-news-thumbs a { display: block; border-radius: 14px; overflow: hidden; }
.ip-news-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ip-news-thumbs .ip-vdo-frame img.ip-news-thumb { height: auto; }

/* ── 18. Home ส่วน NEWS: bullet 2 ข้อของข่าวเปิดตัว (pptx 25 SEP slide 3-4) ── */
.news-home .ip-home-news-bullets { padding-left: 1.2em; margin-bottom: 1.6em; }
.news-home .ip-home-news-bullets li { margin-bottom: .6em; }
.news-home .ip-home-news-bullets li::marker { color: var(--ip-green); }

/* ── 19. หัวข้อใต้วิดีโอหน้า Home (ICONPHUKET — A NEW DESTINATION…) ──────
   เดิมตั้ง .ip-vdo-title 24px แต่ .font-title ใน section 14 อยู่ท้ายไฟล์และ
   specificity เท่ากัน เลยทับเป็น 51px -> ใช้ selector 2 คลาสให้ชนะ (ผู้ใช้สั่ง 26 ก.ย. "ใหญ่ไปนิด") */
.ip-vdo .ip-vdo-title { line-height: 1.35; }
/* 1 ต.ค. ผู้ใช้สั่งให้ขนาดเท่าหัวข้อรองข่าว (.news-home .title-detail-news) ทุก breakpoint
   ค่าด้านล่าง = ค่าสุดท้ายที่ .title-detail-news ได้จริงหลังรวม style.css + section 14, 15 และ
   rule มือถือ 1 ต.ค. แล้ว ถ้าแก้ขนาด .title-detail-news ที่ไหน ให้แก้ตรงนี้ให้ตรงกันด้วย */
.ip-vdo .ip-vdo-title { font-size: 29px; }
@media (max-width: 1621px)    { .ip-vdo .ip-vdo-title { font-size: 25px; } }
@media (max-width: 1199.98px) { .ip-vdo .ip-vdo-title { font-size: 22px; } }
@media (max-width: 991.98px)  { .ip-vdo .ip-vdo-title { font-size: 20px; } }
@media (min-width: 1622px)    { .ip-vdo .ip-vdo-title { font-size: 23px; } }
@media (min-width: 1451px) and (max-width: 1621px) { .ip-vdo .ip-vdo-title { font-size: 24px; } }

/* ── 20. Home ส่วน NEWS: bullet ข่าวใหญ่ขึ้น (ผู้ใช้สั่ง 1 ต.ค. "เล็กไป โดยเฉพาะมือถือ") ──
   เดิมสืบทอดจาก body = 18px, line-height 1.3 (วัดจริงทั้ง desktop/มือถือ) */
.news-home .ip-home-news-bullets { font-size: 20px; line-height: 1.5; }   /* 1 ต.ค. ลดจาก 1.7 */
@media (max-width: 767.98px) {
   .news-home .ip-home-news-bullets { font-size: 19px; }   /* 1 ต.ค. ลดจาก 21px ตามที่ผู้ใช้ขอ */
}
/* subhead ข่าวหน้า Home บนมือถือ ใหญ่ขึ้นนิด (ผู้ใช้สั่ง 1 ต.ค.) — เดิม 16px จาก section 15 */
@media (max-width: 575.98px) {
   .news-home .title-detail-news { font-size: 20px; }   /* 1 ต.ค. ขยายอีกรอบจาก 18px */
}

/* ── 21. ป้าย "VDO" หน้า Home = ฟอนต์/ขนาด/ระยะเท่าป้าย "NEWS UPDATE" (ผู้ใช้สั่ง 1 ต.ค.)
   rule ของ .news-label ใน style.css ผูกกับ .news-home เท่านั้น ป้ายนี้อยู่ใน .ip-vdo
   จึงไม่ได้ค่าเหล่านั้นเลย -> คัดลอกค่าชุดเดียวกันมาทุก breakpoint */
.ip-vdo .ip-vdo-label {
   font-family: "FC Luxurious", sans-serif;
   font-feature-settings: "ss01" 1;
   font-size: 35px;
   font-weight: 500;
   line-height: 1;
   letter-spacing: .04em;
   margin-bottom: 32px;
}
@media (max-width: 1621px)   { .ip-vdo .ip-vdo-label { font-size: 36px; margin-bottom: 28px; } }
@media (max-width: 991.98px) { .ip-vdo .ip-vdo-label { font-size: 30px; margin-bottom: 25px; } }
@media (max-width: 575.98px) { .ip-vdo .ip-vdo-label { font-size: 26px; margin-bottom: 20px; } }

/* ── 22. หน้า Project Details: โลโก้ SYNTHESIS ARK ใต้ลิงก์ Google Map (pptx 1 OCT slide 5)
   "ขนาดไม่ใหญ่" -> กว้าง 110px (มือถือ 90px) ไฟล์ต้นฉบับเป็นโลโก้ดำเกือบจัตุรัส */
.ip-pd-synthesis { display: block; width: 110px; margin-top: 36px; }
.ip-pd-synthesis img { display: block; width: 100%; height: auto; }
.ip-pd-synthesis:hover { opacity: .75; }
@media (max-width: 767.98px) { .ip-pd-synthesis { width: 90px; margin-top: 28px; } }

/* ── 23. Hero หน้า Home = VDO 15 วิ (pptx 1 OCT slide 1) ใช้คลาส .hero-video ของ style.css
   ไฟล์ VDO แนวนอน (hero-vdo-xx-h.mp4) มีแถบดำฝังมาในไฟล์ บน/ล่างข้างละ 108px (ภาพจริง 1920x866)
   -> ไม่แก้ไฟล์ แต่ขยายกรอบวิดีโอสูง 125% และเลื่อนขึ้น 12.5% ให้แถบดำล้นออกนอก section
   (ใช้เฉพาะจอแนวนอน ให้ตรงกับ JS ใน index.php ที่เลือกไฟล์ด้วย orientation; แนวตั้งไม่มีแถบดำ)
   ถ้าได้ไฟล์ใหม่ที่ไม่มีแถบดำ ให้ลบ @media ด้านล่างทิ้ง */
.hero-kv { overflow: hidden; }
@media (orientation: landscape) {
   .hero-kv .hero-video { top: -12.5%; height: 125%; }
}

/* ── 24. หน้า Project Details: ภาพ hero ต้องแสดงเต็มภาพ ห้ามครอปเด็ดขาด (ผู้ใช้สั่ง 2 ต.ค.)
   ภาพ assets/02102026/project-hero.jpg มีข้อความทางกฎหมาย "Conceptual Masterplan" ที่มุมขวาบน
   style.css ตั้ง .hero-page { height:100dvh } + img { object-fit:cover } ทำให้ครอปทุกจอ
   -> เฉพาะ section นี้ (คลาส ip-pd-hero) ให้กรอบสูงตามสัดส่วนภาพจริง ไม่ใช้ cover */
.hero-page.ip-pd-hero { height: auto; }
.hero-page.ip-pd-hero .img-hero img { display: block; height: auto; object-fit: initial; }

/* ── 25. สีที่ style.css (designer) เขียนตายตัวเป็น #004E59 และยังแสดงอยู่จริง (2 ต.ค. แยกธีม)
   ผูกเข้าตัวแปร --ip-ci ค่าเดิม #004E59 -> ธีม green หน้าตาเหมือนเดิมทุกจุด แต่ธีมอื่นเปลี่ยนสีตามได้
   - เส้นบน/กลางของปุ่มเมนูแฮมเบอร์เกอร์ (เส้นล่าง :after ถูกตั้งเป็น --ip-green ไว้แล้วใน section 2) */
.header.active .wsanimated-arrow span,
.header.active .wsanimated-arrow span:before,
.wrapper-header .wsanimated-arrow span,
.wrapper-header .wsanimated-arrow span:before { background-color: var(--ip-ci); }

/* ── 26. หน้าข่าว: ชื่อ-ตำแหน่งผู้พูดหน้าคำพูด ("นางชฎาทิพ ... กล่าวว่า") เป็นสีเทา (ผู้ใช้สั่ง 2 ต.ค.)
   ส่วนคำพูดใน “...” ยังเป็นสีหลักตาม .ip-pr-quote */
.ip-pr-quote .ip-pr-quote-by { color: var(--ip-gray); }
/* 4 ต.ค. (Fix_04102026/revision_latest 4 oct - 1 pm.pptx slide 2) ตัวหนาเฉพาะชื่อ "นางชฎาทิพ จูตระกูล"
   ส่วน "ประธานเจ้าหน้าที่บริหาร … กล่าวว่า" ไม่หนา */
.ip-news-page .ip-pr-quote .ip-pr-quote-name { font-weight: 700; }

/* ── 27. หน้า Project Details: ลำดับขนาดหัวข้อตามแบบ (Green_Theme/Website - 18 SEP .pdf หน้า 7) (ผู้ใช้สั่ง 3 ต.ค.)
   หัวข้อ Mission + หัวข้อย่อย (ทำเลยุทธศาสตร์… / ส่วนหนึ่งของ SYNTHESIS ARK…) มีคลาส .font-title ด้วย
   .font-title ใน section 14 (51px) ประกาศหลัง section 8 specificity เท่ากัน จึงทับจนใหญ่กว่า Vision (36px)
   -> ใช้ selector 3 คลาสตั้งขนาดตรงๆ: Vision 36 > Mission 24 > หัวข้อย่อย 20 > เนื้อความ 18 (มือถือ 26 > 21 > 20 > 18) */
.ip-pd .ip-pd-mission.font-title { font-size: 24px; }
.ip-pd .ip-pd-head.font-title    { font-size: 20px; }
@media (max-width: 991.98px) {
   .ip-pd .ip-pd-mission.font-title { font-size: 21px; }
   .ip-pd .ip-pd-head.font-title    { font-size: 20px; }
}

/* ── 28. Fix_03102026/revision_latest 3 oct.pptx (ผู้ใช้สั่ง 4 ต.ค.) ─────────────────────────────
   28a หน้าข่าว (slide 4-5): ย่อหน้าคำกล่าว “...” นางชฎาทิพ กล่าว… = ทั้งย่อหน้าตัวหนา
       ส่วนในฟันหนูเป็นสีหลักของหน้า / ชื่อผู้พูดท้ายย่อหน้าคงสีเทาของ .ip-pr-body
       (คลาสใส่โดย _tools/news/gen_news_th.py) */
.ip-news-page .ip-pr-body.ip-pr-said { font-weight: 700; }
.ip-news-page .ip-pr-said .ip-pr-said-q { color: var(--ip-green); }

/* 28b หน้า Project Details (slide 6-9)
   - บน: กล่องพื้นสีหลักของหน้า (ธีม creative-spirits = Ocean) ตัวขาว Vision + Mission ขนาดเท่ากัน
         ครึ่งซ้าย / ภาพ (swiper ภาพจัตุรัสจาก style.css) ครึ่งขวา — grid 2 ช่องเท่ากัน สูงเท่ากันด้วย stretch
   - ล่าง: เกี่ยวกับไอคอนภูเก็ต = ป้ายสีหลัก / หัวข้อสีหลัก ตัวหนา ใหญ่กว่าเนื้อความ / bullet เทาเดิม (.ip-pd-list)
   - section 22 (โลโก้ SYNTHESIS ARK), .ip-pd-head, .ip-pd-spec, .ip-pd-copy ไม่ได้ใช้แล้วหลังจัดใหม่ */
.ip-pd-top {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   align-items: stretch;
}
.ip-pd-gallery { min-width: 0; }   /* ให้ swiper คำนวณความกว้างตามช่อง grid ไม่ดันจนล้น */
/* ถ้าข้อความในกล่องสูงกว่าภาพ (จอ lg แคบ + EN) ให้ภาพยืดเต็มความสูงแถว (cover) — 2 ฝั่งสูงเท่ากันเสมอ */
@media (min-width: 992px) {
   .ip-pd-gallery .slide-project-update,
   .ip-pd-gallery .ip-pd-figure { height: 100%; }
   .ip-pd-gallery .ip-pd-figure img { height: 100%; object-fit: cover; }
}
.ip-pd-intro {
   background: var(--ip-green);
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 48px;
}
.ip-pd .ip-pd-intro .ip-pd-label { color: var(--ip-white); }
/* ขนาดไล่ตามจอ: บรรทัดไทยที่ยาวสุด (รังสรรค์สัญลักษณ์ใหม่แห่งแดนใต้) ต้องไม่ล้นช่องที่จอ 1200px — สูงสุด 36px
   EN ไม่มี <br> ใน view ใช้ text-wrap: balance ให้แต่ละบรรทัดยาวใกล้กัน */
.ip-pd .ip-pd-intro .ip-pd-vision.font-title,
.ip-pd .ip-pd-intro .ip-pd-mission.font-title {
   color: var(--ip-white);
   font-size: clamp(30px, 2.5vw, 36px);
   line-height: 1.25;
   text-wrap: balance;
}
.ip-pd .ip-pd-intro .ip-pd-vision { margin-bottom: 40px; }
.ip-pd .ip-pd-intro .ip-pd-mission { margin-bottom: 0; }

.ip-pd-about { max-width: 1100px; margin-top: 64px; }
.ip-pd-about-label {
   color: var(--ip-green);
   font-size: 20px;
   line-height: 1.4;
   margin-bottom: 6px;
}
.ip-pd .ip-pd-about-head {
   font-family: "FC Quantum", sans-serif;
   color: var(--ip-green);
   font-size: 24px;
   font-weight: 700;
   line-height: 1.35;
   text-transform: none;   /* style.css ตั้ง h4 เป็นตัวพิมพ์ใหญ่ — หัวข้อ EN ใช้ตัวพิมพ์ตาม pptx */
   margin: 0 0 14px;
}
.ip-pd-about .ip-pd-list { margin-bottom: 36px; }

@media (max-width: 1199.98px) {
   .ip-pd-intro { padding: 36px 40px; }
   .ip-pd .ip-pd-intro .ip-pd-vision.font-title,
   .ip-pd .ip-pd-intro .ip-pd-mission.font-title { font-size: 26px; }
   .ip-pd .ip-pd-intro .ip-pd-vision { margin-bottom: 30px; }
}
@media (max-width: 991.98px) {
   .ip-pd-top { grid-template-columns: 1fr; }
   .ip-pd-intro { padding: 36px 28px; }
   .ip-pd .ip-pd-intro .ip-pd-vision.font-title,
   .ip-pd .ip-pd-intro .ip-pd-mission.font-title { font-size: 26px; }
   .ip-pd-about { margin-top: 44px; }
   .ip-pd-about-label { font-size: 18px; }
   .ip-pd .ip-pd-about-head { font-size: 21px; }
}

/* 28c หน้าข่าว headline แบ่ง 2 ประโยค (slide 3: "สยามพิวรรธน์ ปักธง “ไอคอนภูเก็ต” สัญลักษณ์ใหม่แห่งแดนใต้" / "สู่จุดหมายระดับโลก")
   คอลัมน์ข่าวจำกัด 1100px (section 13) ทำให้บรรทัดแรกล้นจน "แดนใต้" ตกบรรทัด
   -> เฉพาะ headline ให้กว้างได้ถึงขอบภาพ KV / จอแคบที่ยังไม่พอ ให้ตัดแบบ balance แทนการเหลือคำเดียวท้ายบรรทัด */
.ip-news-page .ip-pr-doc > .ip-pr-headline { max-width: none; text-wrap: balance; }

/* ── 29. หน้าข่าว 5 ต.ค. (Fix_05102026: Word "Press Release 5 OCT CEO version" + pptx slide 2) ──────────
   คำพูด CEO ใน “…” = ตัวหนาสีหลักของหน้า / ชื่อ (+ ตำแหน่งตามที่ Word ทำตัวหนาไว้) = ตัวหนาสีเทา
   คลาสใส่โดย _tools/news/gen_news_0510.py ตามสี/ตัวหนาใน Word (run สีเขียว 70AD47 / run ตัวหนาที่มีชื่อ) */
.ip-news-page .ip-pr-body .ip-pr-q  { color: var(--ip-green); font-weight: 700; }
.ip-news-page .ip-pr-body .ip-pr-by { color: var(--ip-gray);  font-weight: 700; }