/*-----------------------------------------------------------------------------------
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;
}
.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 แทนสีเดียว */
.it-classes-item-wrap { border-top: 4px solid var(--pnp-navy); }
.col-xl-4:nth-of-type(6n+1) .it-classes-item-wrap { border-top-color: var(--pnp-red); }
.col-xl-4:nth-of-type(6n+2) .it-classes-item-wrap { border-top-color: var(--pnp-orange); }
.col-xl-4:nth-of-type(6n+3) .it-classes-item-wrap { border-top-color: var(--pnp-teal); }
.col-xl-4:nth-of-type(6n+4) .it-classes-item-wrap { border-top-color: var(--pnp-blue); }
.col-xl-4:nth-of-type(6n+5) .it-classes-item-wrap { border-top-color: var(--pnp-pink); }
.col-xl-4:nth-of-type(6n+6) .it-classes-item-wrap { border-top-color: var(--pnp-yellow); }

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

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

.it-hero-3-bg.pnp-hero {
  height: 460px;
  background-position: center top;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .it-hero-3-bg.pnp-hero {
    height: 400px;
  }
}
@media (max-width: 767px) {
  .it-hero-3-bg.pnp-hero {
    height: 340px;
  }
}

.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 ภาษาไทย - เดิม DynaPuff/Open Sans ไม่รองรับภาษาไทยเลย ตัวอักษรไทย
   เลยหลุดไปใช้ font default ของเครื่อง (หน้าตาไม่กลมกลืนกับภาษาอังกฤษ)
   เพิ่ม Mali (คู่กับ DynaPuff หัวข้อ ทรงกลมๆน่ารักคล้ายกัน) และ
   Noto Sans Thai (คู่กับ Open Sans เนื้อหาอ่านง่าย) เป็น fallback ต่อท้าย
   ให้ตัวอังกฤษยังใช้ font เดิม ส่วนตัวไทยไปเลือก font ที่เข้าธีมแทน
   ----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Mali:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root {
  --it-ff-heading: 'DynaPuff', 'Mali', sans-serif;
  --it-ff-body: 'Open Sans', 'Noto Sans Thai', 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;
}