/*-----------------------------------------------------------------------------------
Paint N Play - Theme color override
เปลี่ยนสีธีมหลักของเทมเพลตเดิม (#F59831, #1F90A2) ให้เป็นสีของ Paint N Play
--it-theme-1 (สีหลัก/ปุ่ม)  -> #17548b (น้ำเงินเข้ม)
--it-theme-2 (สีรอง/accent) -> #eee4ac (เหลืองครีม)
ไฟล์นี้ต้อง include ต่อจาก assets/css/main.css เสมอ เพื่อให้ override ทับของเดิม
-----------------------------------------------------------------------------------*/
:root {
    --it-theme-1: #eee4ac;
    --it-theme-2: #17548b;
    --it-theme-3: #f6911f;
}

/* main.css มีบางที่ hard-code เป็น rgba() ของสีเดิมแทนตัวแปร ต้อง override ตรงนี้ด้วย */
.it-event-item,
.it-event-item:hover {
  border: 1px solid rgba(23, 84, 139, 0.15);
}

.it-feature-2-thumb,
[class*="-icon-circle"] {
  background: rgba(23, 84, 139, 0.1);
}

.it-classes-item-wrap {
  border: 1px solid rgba(238, 228, 172, 0.6);
}

.it-classes-meta-box {
  border-top: 1px solid rgba(238, 228, 172, 0.6);
}

*[style*="background: rgba(31, 144, 162"],
.it-price-tag,
.it-schoolbell-badge {
  background: rgba(238, 228, 172, 0.35);
}

/* ปุ่มหลัก / hover ให้เข้ากับธีมใหม่ */
.it-btn,
.it-btn.circle-effect,
.theme-2-bg {
  background-color: var(--it-theme-2);
}

.it-btn.black-bg.theme-style {
  background-color: var(--it-common-black);
  border-color: var(--it-theme-2);
}

a:hover,
.it-header-top-left a:hover,
.it-footer-list a:hover {
  color: var(--it-theme-2);
}

.it-copyright-area.theme-bg {
  background-color: var(--it-theme-3);
}

/* งานศิลปะเด็ก: เน้นความสดใส เป็นกันเอง แต่ยังอยู่ในโทนน้ำเงิน-ครีมของแบรนด์ */
.it-hero-3-title-box h1 span {
  color: var(--it-theme-2);
}

/* -----------------------------------------------------------------
   สีจาก Logo จริงของ Paint N Play (สุ่มค่าสีจากไฟล์โลโก้)
   เดิมใช้แค่ 2 สี (น้ำเงิน/ครีม) ตอนนี้เพิ่มสีสันจากจุดสีบน logo
   มาใช้กับส่วนตกแต่ง (ไอคอน, เส้นขอบการ์ด) ให้ดูสนุกสีสันแบบ logo มากขึ้น
   ----------------------------------------------------------------- */
:root {
  --pnp-navy: #17548b;   /* หมวกเบเร่ต์ */
  --pnp-cream: #eee4ac;  /* พระจันทร์เสี้ยว */
  --pnp-red: #e4231f;    /* ตัวอักษร P และหลอดสี */
  --pnp-orange: #f09c24; /* จุดสี/พู่กัน */
  --pnp-blue: #3c90cc;   /* จุดสี/ตัวอักษร n */
  --pnp-teal: #0c9c84;   /* จุดสี/ตัวอักษร play */
  --pnp-pink: #cc3d8f;   /* จุดสี/ตัวอักษร a */
  --pnp-yellow: #f2d65c; /* จุดสี */
}

/* ไอคอน feature หน้าแรก - ใส่วงกลมสีสันแบบจุดสีบน logo ไล่ทีละไอคอน */
.it-feature-2-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  /* main.css sets mask-image to a file that no longer exists (assets/img/feature/thumb-2-1.png -> 404),
     which makes the whole circle invisible in every browser. Clear it so the colored circle + icon show. */
  mask-image: none;
  -webkit-mask-image: none;
}
.it-feature-2-thumb img { max-width: 55%; }
.it-feature-2-thumb i {
  color: #ffffff;
  font-size: 38px;
}
.col-xl-3:nth-of-type(4n+1) .it-feature-2-thumb { background-color: var(--pnp-red); }
.col-xl-3:nth-of-type(4n+2) .it-feature-2-thumb { background-color: var(--pnp-orange); }
.col-xl-3:nth-of-type(4n+3) .it-feature-2-thumb { background-color: var(--pnp-teal); }
.col-xl-3:nth-of-type(4n+4) .it-feature-2-thumb { background-color: var(--pnp-blue); }

/* การ์ดคอร์ส/สินค้า (หน้าแรก, Classes, Shop) ใช้สีตาม logo
   แต่ละการ์ดได้ 1 สี (--pnp-card) ใช้กับขอบบน, ตัวเลข Age/Time/Capacity,
   เส้นคั่น และสีตอน hover ของชื่อคอร์ส (เดิมเป็นเหลืองครีมอ่านไม่ออก) */
.it-classes-item-wrap { --pnp-card: var(--pnp-navy); border-top: 4px solid var(--pnp-card) !important; }
.swiper-slide:nth-of-type(6n+1) .it-classes-item-wrap, .col-xl-4:nth-of-type(6n+1) .it-classes-item-wrap { --pnp-card: var(--pnp-red); }
.swiper-slide:nth-of-type(6n+2) .it-classes-item-wrap, .col-xl-4:nth-of-type(6n+2) .it-classes-item-wrap { --pnp-card: var(--pnp-orange); }
.swiper-slide:nth-of-type(6n+3) .it-classes-item-wrap, .col-xl-4:nth-of-type(6n+3) .it-classes-item-wrap { --pnp-card: var(--pnp-teal); }
.swiper-slide:nth-of-type(6n+4) .it-classes-item-wrap, .col-xl-4:nth-of-type(6n+4) .it-classes-item-wrap { --pnp-card: var(--pnp-blue); }
.swiper-slide:nth-of-type(6n+5) .it-classes-item-wrap, .col-xl-4:nth-of-type(6n+5) .it-classes-item-wrap { --pnp-card: var(--pnp-pink); }
.swiper-slide:nth-of-type(6n+6) .it-classes-item-wrap, .col-xl-4:nth-of-type(6n+6) .it-classes-item-wrap { --pnp-card: var(--pnp-navy); }

.it-classes-item-wrap,
.it-classes-item-wrap:hover { border: 1px solid rgba(23, 84, 139, 0.15); }
.it-classes-item-wrap:hover { box-shadow: 0 10px 30px rgba(23, 84, 139, 0.12); }
.it-classes-meta-box { border-top: 1px solid rgba(23, 84, 139, 0.12) !important; }
.it-classes-meta-box ul li:not(:last-child) { border-right: 1px dashed var(--pnp-card) !important; }
.it-classes-meta h6 { color: var(--pnp-navy); }
.it-classes-meta span { color: var(--pnp-card) !important; font-weight: 600; }
.it-classes-title a:hover { color: var(--pnp-card) !important; }

/* หัวข้อ section ให้มีจุดสีสันเล็กๆ กำกับแบบ logo */
.it-section-title { position: relative; }

/* -----------------------------------------------------------------
   เพิ่มเงาใต้แถบเมนู (header) ให้เห็นการแบ่งชั้นจาก banner ด้านล่างชัดเจน
   ปกติ .header-sticky (ตอนสกอร์ลแล้วเมนูลอย) มีเงาอยู่แล้วจาก main.css
   แต่ตอนโหลดหน้าแรก (ยังไม่สกอร์ล) เมนูแบนราบไม่มีเงาเลย เลยเพิ่มให้ตรงนี้
   ----------------------------------------------------------------- */
.it-header-area {
  position: relative;
  z-index: 10;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

/* -----------------------------------------------------------------
   แก้ Hero banner หน้าแรกให้พอดีจอ (ไม่ล้น/ไม่บิดเบี้ยว)
   รูป banner1.jpg ที่ใส่มาเป็นรูปแนวนอนบาง (960x400) ความสูง 795px เดิม
   ของเทมเพลตใหญ่เกินไป ทำให้รูปถูกขยาย/ครอปแปลกๆ ปรับความสูงให้เหมาะสมกับรูปจริง
   ----------------------------------------------------------------- */
body {
  overflow-x: hidden;
}

.it-hero-3-bg.pnp-hero {
  height: auto;
  aspect-ratio: 960 / 400; /* matches assets/img/hero/banner1.jpg's real size, so cover never crops the sides */
  background-position: center top;
}

.it-hero-3-content,
.it-hero-3-title-box,
.it-hero-title,
.it-hero-2-text {
  max-width: 100%;
}

/* -----------------------------------------------------------------
   Hover ของปุ่ม .it-btn : เปลี่ยนจากพื้นดำ+ตัวอักษรขาว
   เป็นพื้นครีม #eee4ac + ตัวอักษรน้ำเงิน #17548b
   ----------------------------------------------------------------- */
.it-btn.circle-effect::after {
  background-color: #eee4ac;
}
.it-btn:hover {
  color: #17548b;
}

/* -----------------------------------------------------------------
   แท็บเลือกสาขาในหน้า Gallery (#branchTabs) - เดิมเป็น Bootstrap nav-pills
   เปล่าๆ ไม่มีสไตล์ ดูเป็นแค่ลิงก์ตัวหนังสือ ปรับให้เป็นปุ่มมีสีสันตามโทน logo
   ----------------------------------------------------------------- */
#branchTabs .nav-link {
  border-radius: 30px;
  padding: 10px 22px;
  font-weight: 600;
  border: 2px solid transparent;
  background-color: #fff;
  transition: 0.25s;
}
#branchTabs .nav-link:hover:not(.active) {
  background-color: rgba(23, 84, 139, 0.08);
}
#branchTabs .nav-item:nth-child(6n+1) .nav-link { color: var(--pnp-red); border-color: var(--pnp-red); }
#branchTabs .nav-item:nth-child(6n+2) .nav-link { color: var(--pnp-orange); border-color: var(--pnp-orange); }
#branchTabs .nav-item:nth-child(6n+3) .nav-link { color: var(--pnp-teal); border-color: var(--pnp-teal); }
#branchTabs .nav-item:nth-child(6n+4) .nav-link { color: var(--pnp-blue); border-color: var(--pnp-blue); }
#branchTabs .nav-item:nth-child(6n+5) .nav-link { color: var(--pnp-pink); border-color: var(--pnp-pink); }
#branchTabs .nav-item:nth-child(6n+6) .nav-link { color: #b8960a; border-color: var(--pnp-yellow); }

#branchTabs .nav-item:nth-child(6n+1) .nav-link.active { background-color: var(--pnp-red); color: #fff; }
#branchTabs .nav-item:nth-child(6n+2) .nav-link.active { background-color: var(--pnp-orange); color: #fff; }
#branchTabs .nav-item:nth-child(6n+3) .nav-link.active { background-color: var(--pnp-teal); color: #fff; }
#branchTabs .nav-item:nth-child(6n+4) .nav-link.active { background-color: var(--pnp-blue); color: #fff; }
#branchTabs .nav-item:nth-child(6n+5) .nav-link.active { background-color: var(--pnp-pink); color: #fff; }
#branchTabs .nav-item:nth-child(6n+6) .nav-link.active { background-color: var(--pnp-yellow); color: var(--pnp-navy); }

/* accordion รายชื่อสาขาในหน้า Contact Us ก็เป็น Bootstrap เปล่าเหมือนกัน ปรับให้เข้าธีม */
#branchAccordion .accordion-item {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
}
#branchAccordion .accordion-button {
  font-weight: 700;
  color: var(--pnp-navy);
  background-color: #fff;
}
#branchAccordion .accordion-button:not(.collapsed) {
  background-color: var(--pnp-navy);
  color: #fff;
  box-shadow: none;
}
#branchAccordion .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

/* -----------------------------------------------------------------
   หัวข้อหน้า (Contact Us / Classes / Shop / Gallery / About us) ตัวอักษรขาว
   บนพื้น theme-bg อ่านไม่ชัด (โดยเฉพาะตอนพื้นเป็นสีอ่อนอย่างครีม)
   ปักสีพื้นหลัง/ตัวอักษรของแถบหัวข้อนี้ตายตัวด้วยสีจาก logo (กันไม่ให้จางหายไป
   อีกเวลาปรับ --it-theme-1/2/3 เล่นสีอื่นต่อ) ใช้ผลกับทุกหน้าที่มีแถบนี้พร้อมกัน
   ----------------------------------------------------------------- */
.it-breadcurmb-area.theme-bg {
  background-color: #eee4ac !important;
}
.it-breadcurmb-area p {
  color: var(--pnp-navy) !important;
}

/* หัวข้อหน้า (h1) ให้ตัวอักษรสีสันสุ่มไล่ตามโทนสีจาก logo Paint n play
   (แดง/ส้ม/เขียวมิ้นต์/ฟ้า/ชมพู/น้ำเงิน) ทีละตัวอักษร เหมือนสไตล์ตัวหนังสือ logo */
.pnp-rainbow-text {
  color: var(--pnp-navy) !important;
}
.pnp-rainbow-text span:nth-child(6n+1) { color: var(--pnp-red); }
.pnp-rainbow-text span:nth-child(6n+2) { color: var(--pnp-orange); }
.pnp-rainbow-text span:nth-child(6n+3) { color: var(--pnp-teal); }
.pnp-rainbow-text span:nth-child(6n+4) { color: var(--pnp-blue); }
.pnp-rainbow-text span:nth-child(6n+5) { color: var(--pnp-pink); }
.pnp-rainbow-text span:nth-child(6n+6) { color: var(--pnp-navy); }
.pnp-rainbow-text span { display: inline-block; }

/* -----------------------------------------------------------------
   Font ภาษาไทย (แบบไม่มีหัว / loopless)
   - หัวข้อ : Mitr   (ทรงมน นุ่มๆ เข้ากับ DynaPuff)
   - เนื้อหา: Anuphan (สะอาด อ่านง่าย เข้ากับ Open Sans)
   โหลด font ผ่าน <link> ใน Site.master (เดิมใช้ @import กลางไฟล์
   ซึ่ง browser ไม่อ่าน ทำให้ตัวไทยหลุดไปใช้ font ของเครื่อง)
   ----------------------------------------------------------------- */
:root {
  --it-ff-heading: 'DynaPuff', 'Mitr', sans-serif;
  --it-ff-body: 'Open Sans', 'Anuphan', sans-serif;
}


/* ===== ปุ่ม "แอด LINE" ให้สดใสขึ้น (โทนเขียว LINE) ===== */
a.it-btn[href="https://lin.ee/NWefoHs"] {
  background-color: #06C755 !important;
  border-color: #06C755 !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  box-shadow: 0 8px 20px rgba(6, 199, 85, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
a.it-btn[href="https://lin.ee/NWefoHs"] i.fa-line {
  color: #ffffff;
  margin-right: 8px;
  font-size: 1.1em;
}
a.it-btn[href="https://lin.ee/NWefoHs"]::after {
  background-color: #05a648 !important;
}
a.it-btn[href="https://lin.ee/NWefoHs"]:hover {
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 26px rgba(6, 199, 85, 0.5);
}

/* ===== ไอคอนเมนูหลัก ===== */
.it-header-menu > nav.it-menu-content > ul {
  text-align: center;
}
.it-header-menu > nav.it-menu-content > ul > li > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  line-height: 1.2 !important;
  padding: 20px 8px !important;
  padding-top: 20px !important;
}
.it-menu-content > ul > li > a i {
  font-size: 18px;
  margin-right: 0 !important;
}
.it-menu-content > ul > li:nth-child(6n+1) > a i { color: var(--pnp-red); }
.it-menu-content > ul > li:nth-child(6n+2) > a i { color: var(--pnp-orange); }
.it-menu-content > ul > li:nth-child(6n+3) > a i { color: var(--pnp-teal); }
.it-menu-content > ul > li:nth-child(6n+4) > a i { color: var(--pnp-blue); }
.it-menu-content > ul > li:nth-child(6n+5) > a i { color: var(--pnp-pink); }
.it-menu-content > ul > li:nth-child(6n+6) > a i { color: var(--pnp-navy); }

/* ===== การ์ดสินค้าในหน้า Shop: การ์ดสไตล์ it-shop-item ของเทมเพลต (ไม่มี SALE/ราคา/ดาว/หัวใจ-ตา) ===== */
.it-shop-item { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.it-shop-item:hover { transform: translateY(-4px); box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.1); }
.pnp-shop-desc {
  color: var(--it-text-body, #6b6b6b);
  font-size: 15px;
  line-height: 1.6;
}
.pnp-shop-line-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #06C755;
  color: #ffffff !important;
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 10px;
  box-shadow: 0 6px 14px rgba(6, 199, 85, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pnp-shop-line-btn:hover {
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(6, 199, 85, 0.45);
}


/* ===== ปุ่ม Admin ในแถบบนสุด ===== */
.it-header-top-right .pnp-admin-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 14px;
  transition: background-color 0.25s ease;
}
.it-header-top-right .pnp-admin-link:hover {
  background-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}
.it-header-top-right ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* About us - รูปใน mask (เดิมเทมเพลตใช้ thumb-3-1.jpg ซึ่งไม่มีไฟล์) */
.pnp-about-thumb img { width: 605px; max-width: 100%; aspect-ratio: 605 / 624; object-fit: cover; }
.pnp-about-story .it-about-3-text p,
.pnp-about-story ol li { line-height: 1.9; margin-bottom: 14px; color: var(--it-common-black); }
.pnp-about-story ol { padding-left: 22px; margin-bottom: 18px; }
/* About us - ปุ่มสาขา: ทุกกล่องสูงเท่ากัน ชื่อสาขา 1 บรรทัด + ชั้น/จังหวัด 1 บรรทัด */
.pnp-branch-box { height: 100%; min-height: 84px; gap: 14px; }
.pnp-branch-box .it-about-3-icon { flex: 0 0 auto; }
.pnp-branch-box .it-about-3-icon > span { margin-right: 0 !important; }
.pnp-branch-box .it-about-3-text { min-width: 0; }
.pnp-branch-box .pnp-branch-name { display: block; line-height: 1.4; font-size: 15px; }
.pnp-branch-box .pnp-branch-loc { display: block; line-height: 1.4; font-size: 13px; color: #6b6b6b; margin-top: 2px; }

/* หน้าแรก - โลโก้ในส่วน "รู้จัก Paint N Play" ลดขนาดลง (เดิม 600px) */
.pnp-home-logo { text-align: center; }
.pnp-home-logo img { width: 440px; max-width: 100%; }
@media (max-width: 767px) { .pnp-home-logo img { width: 300px; } }

/* -----------------------------------------------------------------
   หน้าแรก - สีพื้นหลังแยกแต่ละ section (โทนอ่อนจากสี logo)
   Hero (รูป) -> รู้จัก Paint N Play (ขาว) -> Classes (ครีมอ่อน)
   -> CTA (ส้ม) -> Footer
   ----------------------------------------------------------------- */
.pnp-sec-cream { background-color: #ffffff; }  /* รู้จัก Paint N Play: สีขาว */
.pnp-sec-blue  { background-color: #fbf6df; }  /* Classes: ครีมอ่อน */
.pnp-sec-cream,
.pnp-sec-blue { position: relative; }
/* เส้นโค้งเล็กๆ ด้านบน section Classes (สีขาวจาก section ก่อนหน้า) */
.pnp-sec-blue::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 40px;
  background: #ffffff;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  pointer-events: none;
}
.pnp-sec-blue > .container { position: relative; z-index: 1; }
/* การ์ดคอร์สบนพื้นฟ้า ให้พื้นการ์ดเป็นสีขาว */
.pnp-sec-blue .it-classes-item-wrap { background-color: #ffffff; }
.pnp-sec-blue .it-classes-title-box p { color: #5b6b7a; }

/* -----------------------------------------------------------------
   หน้าแรก - แถบ CTA "แอด LINE สอบถาม"
   ลดความสูง (เดิม padding 133px) และใช้พื้นน้ำเงินเข้มของ logo ให้เด่น
   ตัดกับ section Classes (ครีม) ด้านบน
   ----------------------------------------------------------------- */
.pnp-cta.it-cta-ptb { padding: 60px 0; }
.pnp-cta.theme-bg { background-color: var(--pnp-navy); }
.pnp-cta .it-cta-content p {
  padding: 0;
  margin-bottom: 22px;
  color: #ffffff;
  font-family: var(--it-ff-heading);
  font-size: 26px;
  font-weight: 500;
}
/* ลายตกแต่งใน CTA: จัดตำแหน่งเองทั้งหมด ให้อยู่ในกรอบครบ ไม่โดนตัด และไม่ทับข้อความ/ปุ่ม */
.pnp-cta { min-height: 230px; }
.pnp-cta > [class*="-shape-"] {
  position: absolute !important;
  top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
  margin: 0 !important; z-index: 0; pointer-events: none;
}
.pnp-cta > [class*="-shape-"] img { width: auto; max-width: none; opacity: .95; }
.pnp-cta > .container { position: relative; z-index: 1; }
/* สามเหลี่ยมส้ม - มุมซ้ายบน */
.pnp-cta > .it-about-2-shape-4 { top: 28px !important; left: 6% !important; }
.pnp-cta > .it-about-2-shape-4 img { height: 80px; }
/* แมว - ซ้ายล่าง ห่างจากปุ่ม */
.pnp-cta > .it-testimonial-2-shape-1 { bottom: 24px !important; left: 17% !important; }
.pnp-cta > .it-testimonial-2-shape-1 img { height: 110px; }
/* รถ - ขวากลาง */
.pnp-cta > .it-newsletter-2-shape-4 { top: 50% !important; right: 7% !important; transform: translateY(-50%); }
.pnp-cta > .it-newsletter-2-shape-4 img { height: 100px; }
@media (max-width: 1399px) {
  .pnp-cta > .it-testimonial-2-shape-1 { left: 8% !important; }
  .pnp-cta > .it-about-2-shape-4 { left: 3% !important; }
}
@media (max-width: 991px) {
  .pnp-cta > .it-newsletter-2-shape-4 img { height: 70px; }
  .pnp-cta > .it-newsletter-2-shape-4 { right: 3% !important; }
}
@media (max-width: 767px) {
  .pnp-cta.it-cta-ptb { padding: 45px 0; }
  .pnp-cta .it-cta-content p { font-size: 20px; }
}

/* -----------------------------------------------------------------
   Banner หัวหน้าแต่ละหน้า (About us / Classes / Contact Us / Gallery / Shop)
   ใช้ layout breadcrumb ของเทมเพลต (มีดาว จรวด จุดสี ลอยไปมา)
   แต่เปลี่ยนพื้นจากดำเป็นน้ำเงินเข้มของ logo + แสงสีจางๆ ให้ดูสดใส
   ----------------------------------------------------------------- */
.pnp-banner {
  background-color: var(--pnp-navy);
  background-image:
    radial-gradient(circle at 12% 25%, rgba(240, 156, 36, 0.28) 0%, transparent 32%),
    radial-gradient(circle at 88% 30%, rgba(204, 61, 143, 0.22) 0%, transparent 30%),
    radial-gradient(circle at 70% 95%, rgba(12, 156, 132, 0.25) 0%, transparent 35%),
    radial-gradient(circle at 30% 100%, rgba(242, 214, 92, 0.18) 0%, transparent 30%);
  padding-top: 90px;
  padding-bottom: 110px;
}
/* ขอบล่างโค้งเป็นคลื่น ต่อกับเนื้อหาสีขาว */
.pnp-banner::after {
  content: "";
  position: absolute; left: -5%; right: -5%; bottom: -1px; height: 50px;
  background: #ffffff;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 1;
}
.pnp-banner .container { position: relative; z-index: 2; }
.pnp-banner [class*="it-breadcrumb-shape-"] { z-index: 1; }
.pnp-banner [class*="it-breadcrumb-shape-"] img { max-height: 90px; }

/* หัวข้อตัวอักษรสีสัน บนพื้นน้ำเงิน: เปลี่ยนสีที่กลืนกับพื้น (น้ำเงิน) เป็นเหลือง/ฟ้าสว่าง */
.pnp-banner .pnp-banner-title {
  font-size: 64px;
  text-transform: none;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}
.pnp-banner .pnp-rainbow-text { color: #ffffff !important; }
.pnp-banner .pnp-rainbow-text span:nth-child(6n+1) { color: #ff5a4f; }
.pnp-banner .pnp-rainbow-text span:nth-child(6n+2) { color: #f7a93b; }
.pnp-banner .pnp-rainbow-text span:nth-child(6n+3) { color: #2fc4a4; }
.pnp-banner .pnp-rainbow-text span:nth-child(6n+4) { color: #7cc3f5; }
.pnp-banner .pnp-rainbow-text span:nth-child(6n+5) { color: #f06bb6; }
.pnp-banner .pnp-rainbow-text span:nth-child(6n+6) { color: #f2d65c; }
.pnp-banner p.pnp-banner-sub {
  color: var(--pnp-cream) !important;
  font-size: 18px;
}
.pnp-banner .it-breadcrumb-list {
  margin-top: 10px;
  padding: 6px 22px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 30px;
}
.pnp-banner .it-breadcrumb-list span,
.pnp-banner .it-breadcrumb-list a { color: #ffffff; font-size: 16px; }
.pnp-banner .it-breadcrumb-list a:hover,
.pnp-banner .it-breadcrumb-list span.color { color: var(--pnp-yellow); }
.pnp-banner .it-breadcrumb-list .dvdr { margin: 0 10px; color: var(--pnp-cream); }
@media (max-width: 767px) {
  .pnp-banner { padding-top: 70px; padding-bottom: 90px; }
  .pnp-banner .pnp-banner-title { font-size: 42px; }
  .pnp-banner p.pnp-banner-sub { font-size: 15px; }
}

/* -----------------------------------------------------------------
   แก้เมนูไม่ลอยตาม (sticky) ตอนเลื่อนลง
   สาเหตุ: rule ".it-header-area { position: relative; z-index: 10 }" ด้านบน
   (ที่ใส่ไว้เพื่อเพิ่มเงา) โหลดทีหลัง main.css เลยไปทับ ".header-sticky
   { position: fixed }" ที่ JS เติมให้ตอนเลื่อนเกิน 400px -> เมนูไม่ลอย
   ใช้ selector ที่เจาะจงกว่า ให้ตอน sticky กลับไปเป็น fixed อยู่บนสุด
   ----------------------------------------------------------------- */
.it-header-area.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background-color: #ffffff;
  box-shadow: 0 8px 20px rgba(23, 84, 139, 0.15);
}
.it-header-area.header-sticky .it-header-logo img { max-height: 60px; width: auto; transition: max-height .3s; }

/* -----------------------------------------------------------------
   หน้าแรก - หัวข้อแฟรนไชส์ (ใช้พื้น/ลายตกแต่งเดียวกับแถบ CTA เดิม .pnp-cta)
   ----------------------------------------------------------------- */
.pnp-franchise.it-cta-ptb { padding: 70px 0; }
.pnp-franchise .pnp-franchise-tag {
  display: inline-block;
  padding: 4px 16px;
  margin-bottom: 14px;
  border-radius: 30px;
  background: var(--pnp-cream);
  color: var(--pnp-navy);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
}
.pnp-franchise .pnp-franchise-title {
  color: #ffffff;
  font-family: var(--it-ff-heading);
  font-size: 40px;
  margin-bottom: 14px;
}
.pnp-cta.pnp-franchise .it-cta-content p.pnp-franchise-sub {
  font-family: var(--it-ff-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 22px;
}
.pnp-franchise .pnp-franchise-points {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}
.pnp-franchise .pnp-franchise-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 16px;
}
.pnp-franchise .pnp-franchise-points i { color: var(--pnp-cream); }
.pnp-franchise .pnp-franchise-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.pnp-franchise .it-btn i { margin-right: 8px; }
.pnp-franchise .it-btn.pnp-btn-outline {
  background: transparent;
  border: 2px solid var(--pnp-cream);
  color: var(--pnp-cream);
}
.pnp-franchise .it-btn.pnp-btn-outline:hover { background: var(--pnp-cream); color: var(--pnp-navy); }
@media (max-width: 767px) {
  .pnp-franchise.it-cta-ptb { padding: 50px 0; }
  .pnp-franchise .pnp-franchise-title { font-size: 28px; }
  .pnp-cta.pnp-franchise .it-cta-content p.pnp-franchise-sub { font-size: 16px; }
  .pnp-franchise .pnp-franchise-points li { font-size: 14px; padding: 6px 14px; }
}

/* -----------------------------------------------------------------
   Popup ประกาศ / โปรโมชั่น (Site.master + Admin/ManageAnnouncements.aspx)
   1 รายการ = Popup ปกติ / หลายรายการ = สไลด์เลื่อนดูใน Popup
   ----------------------------------------------------------------- */
.pnp-popup { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pnp-popup[hidden] { display: none; }
.pnp-popup-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 30, 50, 0.65);
  opacity: 0; transition: opacity .25s ease;
}
.pnp-popup-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  opacity: 0; transform: translateY(20px) scale(.97);
  transition: opacity .25s ease, transform .25s ease;
}
.pnp-popup.is-open .pnp-popup-backdrop { opacity: 1; }
.pnp-popup.is-open .pnp-popup-box { opacity: 1; transform: none; }
.pnp-popup-swiper { border-radius: 18px 18px 0 0; overflow: hidden; }
.pnp-popup-box:not(.is-multi) .pnp-popup-swiper { border-radius: 18px; }
.pnp-popup-item:not(.has-image) { border-top: 8px solid var(--pnp-navy); }
.pnp-popup-close {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, 0.92);
  color: var(--pnp-navy); font-size: 18px; line-height: 38px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.pnp-popup-close:hover { background: var(--pnp-navy); color: #ffffff; }
.pnp-popup-img { display: block; }
.pnp-popup-img img { display: block; width: 100%; height: auto; }
.pnp-popup-body { padding: 24px 26px 26px; text-align: center; }
.pnp-popup-title { color: var(--pnp-navy); font-family: var(--it-ff-heading); font-size: 24px; margin-bottom: 10px; }
.pnp-popup-text { color: #4a5a6a; font-size: 16px; line-height: 1.7; margin-bottom: 18px; }
.pnp-popup-text:last-child { margin-bottom: 0; }
/* แถบเลื่อนสไลด์ใต้ Popup: ลูกศร + จุด */
.pnp-popup-nav {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 12px 16px 16px;
  border-top: 1px solid #eef1f4;
}
.pnp-popup-prev, .pnp-popup-next {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--pnp-navy); background: #ffffff; color: var(--pnp-navy);
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: background .2s, color .2s;
}
.pnp-popup-prev:hover, .pnp-popup-next:hover { background: var(--pnp-navy); color: #ffffff; }
.pnp-popup-dots { position: static !important; width: auto !important; display: flex; align-items: center; }
.pnp-popup-dots .swiper-pagination-bullet { width: 9px; height: 9px; margin: 0 4px !important; background: var(--pnp-navy); opacity: .25; }
.pnp-popup-dots .swiper-pagination-bullet-active { opacity: 1; width: 24px; border-radius: 6px; }
.pnp-popup-preview { background: #fff3cd; color: #664d03; text-align: center; font-size: 13px; padding: 6px; border-radius: 0 0 18px 18px; }
body.pnp-popup-lock { overflow: hidden; }
@media (max-width: 575px) {
  .pnp-popup-box { max-width: 100%; }
  .pnp-popup-title { font-size: 20px; }
}

/* -----------------------------------------------------------------
   หน้าแรก - Slide Highlights (โปรโมชั่น / แคมเปญ / ประกาศ)
   จัดการที่ Admin/ManageHighlights.aspx - รูปแนะนำ 1600x700 (16:7)
   ----------------------------------------------------------------- */
.pnp-highlights { background: #ffffff; }
.pnp-hl-tag {
  display: inline-block;
  padding: 4px 16px;
  margin-bottom: 10px;
  border-radius: 30px;
  background: var(--pnp-cream);
  color: var(--pnp-navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}
.pnp-hl-wrap { position: relative; }
.pnp-highlight-active { border-radius: 20px; overflow: hidden; box-shadow: 0 12px 30px rgba(23, 84, 139, 0.15); }
.pnp-hl-slide {
  position: relative;
  display: block;
  aspect-ratio: 16 / 7;
  background: #fbf6df;
  overflow: hidden;
}
.pnp-hl-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.pnp-hl-slide[href]:hover img { transform: scale(1.03); }
.pnp-hl-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: block;
  padding: 70px 40px 32px;
  background: linear-gradient(to top, rgba(10, 35, 60, 0.85) 0%, rgba(10, 35, 60, 0.55) 55%, transparent 100%);
  color: #ffffff;
}
.pnp-hl-title { display: block; font-family: var(--it-ff-heading); font-size: 32px; line-height: 1.3; margin-bottom: 6px; color: #ffffff; }
.pnp-hl-text { display: block; font-size: 17px; line-height: 1.6; max-width: 720px; color: rgba(255, 255, 255, 0.92); }
.pnp-hl-btn { margin-top: 16px; pointer-events: none; }
.pnp-hl-prev, .pnp-hl-next {
  position: absolute; top: 50%; z-index: 5;
  width: 48px; height: 48px; margin-top: -40px;
  border: 0; border-radius: 50%;
  background: #ffffff; color: var(--pnp-navy);
  font-size: 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: background .2s, color .2s;
}
.pnp-hl-prev { left: -24px; }
.pnp-hl-next { right: -24px; }
.pnp-hl-prev:hover, .pnp-hl-next:hover { background: var(--pnp-navy); color: #ffffff; }
.pnp-hl-dots .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 5px; background: var(--pnp-navy); opacity: .25; }
.pnp-hl-dots .swiper-pagination-bullet-active { opacity: 1; width: 28px; border-radius: 6px; }
.pnp-hl-wrap.is-single .pnp-hl-prev,
.pnp-hl-wrap.is-single .pnp-hl-next,
.pnp-hl-wrap.is-single .pnp-hl-dots { display: none; }
@media (max-width: 1199px) {
  .pnp-hl-prev { left: 10px; }
  .pnp-hl-next { right: 10px; }
}
@media (max-width: 767px) {
  .pnp-highlights.pt-60 { padding-top: 40px; }
  .pnp-highlights.pb-60 { padding-bottom: 40px; }
  .pnp-highlight-active { border-radius: 14px; }
  .pnp-hl-caption { padding: 40px 16px 14px; }
  .pnp-hl-title { font-size: 18px; margin-bottom: 2px; }
  .pnp-hl-text { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pnp-hl-btn { display: none; }
  .pnp-hl-prev, .pnp-hl-next { display: none; } /* มือถือใช้ปัดนิ้ว + จุดด้านล่าง */
}

/* -----------------------------------------------------------------
   หน้าแรก - การ์ดประกาศ / โปรโมชั่น ใน section Highlights (เลื่อนเป็นสไลด์)
   รายการที่ติ๊ก "แสดงเป็น Popup" กดแล้วไปหน้ารายละเอียด Promotion.aspx
   ----------------------------------------------------------------- */
.pnp-hl-wrap + .pnp-ann-wrap { margin-top: 44px; }
.pnp-ann-wrap { position: relative; }
.pnp-ann-active { padding: 6px 4px 14px; }
.pnp-ann-active .swiper-slide { height: auto; }
.pnp-ann-card {
  display: flex; flex-direction: column;
  height: 100%;
  border: 1px solid #e6ebf0; border-radius: 16px;
  background: #ffffff; overflow: hidden;
  box-shadow: 0 6px 18px rgba(23, 84, 139, 0.08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  color: inherit;
}
.pnp-ann-card:hover, .pnp-ann-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--pnp-navy);
  box-shadow: 0 12px 26px rgba(23, 84, 139, 0.16);
  color: inherit; outline: none;
}
.pnp-ann-thumb {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; background: #fbf6df; overflow: hidden;
}
.pnp-ann-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.pnp-ann-card:hover .pnp-ann-thumb img { transform: scale(1.04); }
.pnp-ann-thumb.is-empty i { font-size: 46px; color: var(--pnp-navy); opacity: .75; }
.pnp-ann-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 16px 18px 18px; }
.pnp-ann-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--pnp-navy); font-family: var(--it-ff-heading); font-size: 19px; line-height: 1.35; margin-bottom: 6px;
}
.pnp-ann-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #5b6b7a; font-size: 14px; line-height: 1.6;
}
.pnp-ann-meta {
  margin-top: auto; padding-top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: 13px;
}
.pnp-ann-date { color: #c0392b; }
.pnp-ann-date i { margin-right: 4px; }
.pnp-ann-more { color: var(--pnp-navy); font-weight: 600; margin-left: auto; }
.pnp-ann-more i { transition: transform .2s; margin-left: 2px; }
.pnp-ann-card:hover .pnp-ann-more i { transform: translateX(3px); }
.pnp-ann-prev, .pnp-ann-next {
  position: absolute; top: 40%; z-index: 5;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #ffffff; color: var(--pnp-navy); font-size: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: background .2s, color .2s;
}
.pnp-ann-prev { left: -22px; }
.pnp-ann-next { right: -22px; }
.pnp-ann-prev:hover, .pnp-ann-next:hover { background: var(--pnp-navy); color: #ffffff; }
.pnp-ann-prev.swiper-button-disabled, .pnp-ann-next.swiper-button-disabled { opacity: .35; cursor: default; }
.pnp-ann-prev.swiper-button-lock, .pnp-ann-next.swiper-button-lock { display: none; }
.pnp-ann-dots .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 5px; background: var(--pnp-navy); opacity: .25; }
.pnp-ann-dots .swiper-pagination-bullet-active { opacity: 1; width: 28px; border-radius: 6px; }
@media (max-width: 1199px) {
  .pnp-ann-prev { left: 4px; }
  .pnp-ann-next { right: 4px; }
}
@media (max-width: 767px) {
  .pnp-ann-prev, .pnp-ann-next { display: none; } /* มือถือใช้ปัดนิ้ว + จุดด้านล่าง */
  .pnp-ann-title { font-size: 17px; }
}

/* -----------------------------------------------------------------
   หน้ารายละเอียดประกาศ / โปรโมชั่น (Promotion.aspx)
   ----------------------------------------------------------------- */
.pnp-promo-img { border-radius: 18px; overflow: hidden; background: #fbf6df; box-shadow: 0 12px 30px rgba(23, 84, 139, 0.15); }
.pnp-promo-img img { display: block; width: 100%; height: auto; }
.pnp-promo-period {
  display: inline-block; margin-bottom: 14px; padding: 5px 14px; border-radius: 30px;
  background: #fdecea; color: #c0392b; font-size: 14px; font-weight: 600;
}
.pnp-promo-period i { margin-right: 6px; }
.pnp-promo-title { color: var(--pnp-navy); font-family: var(--it-ff-heading); font-size: 36px; line-height: 1.3; margin-bottom: 16px; }
.pnp-promo-text { color: #4a5a6a; font-size: 17px; line-height: 1.8; margin-bottom: 26px; }
.pnp-promo-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.text-center .pnp-promo-btns { justify-content: center; }
.pnp-promo-btns .it-btn i { margin-right: 8px; }
.pnp-promo-back { color: var(--pnp-navy); font-weight: 600; }
.pnp-promo-back:hover { text-decoration: underline; }
.pnp-promo-others { margin-top: 20px; padding-top: 36px; border-top: 1px solid #e6ebf0; }
.pnp-promo-other {
  display: flex; align-items: center; gap: 12px; height: 100%;
  padding: 10px; border: 1px solid #e6ebf0; border-radius: 12px; background: #ffffff; color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.pnp-promo-other:hover { border-color: var(--pnp-navy); box-shadow: 0 6px 16px rgba(23, 84, 139, 0.12); color: inherit; }
.pnp-promo-other-thumb {
  flex: 0 0 72px; width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  background: #fbf6df; display: flex; align-items: center; justify-content: center;
}
.pnp-promo-other-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pnp-promo-other-thumb.is-empty i { color: var(--pnp-navy); font-size: 24px; opacity: .75; }
.pnp-promo-other-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--pnp-navy); font-weight: 600; line-height: 1.4;
}
@media (max-width: 767px) {
  .pnp-promo-title { font-size: 26px; }
  .pnp-promo-text { font-size: 16px; }
}