/* =========================================================================
   custom.css — สไตล์ที่แก้เอง
   เขียนทับ main.css ได้ที่ไฟล์นี้ เพื่อไม่ให้ทับของเดิมหาย
   ========================================================================= */

/* ฟอนต์ไทย: ใช้ Noto Sans Thai เป็นหลัก แล้วค่อย fallback ไปฟอนต์ของ template */
body,
p,
span,
a,
li,
input,
textarea,
select,
button,
.tg-btn,
.tgmenu__navbar-wrap ul li a {
   font-family: 'Noto Sans Thai', 'Barlow', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.tg-hero-title,
.tg-hero-tu-title,
.tg-section-su-title {
   font-family: 'Noto Sans Thai', 'Barlow', sans-serif;
}

/* ภาษาไทยตัวสูง–ตัวต่ำเยอะ เพิ่มระยะบรรทัดให้อ่านง่ายขึ้น */
body {
   line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
   line-height: 1.45;
}

/* ปุ่มและลิงก์ที่ยังไม่มีหน้าปลายทาง — ให้เคอร์เซอร์บอกว่าคลิกได้ */
a[href="#"] {
   cursor: pointer;
}

/* แถบข้อมูลด้านข้างถูกซ่อนไว้นอกจอด้านขวา (translateX(100%))
   ทำให้เกิดแถบเลื่อนแนวนอนโผล่มา — ปิดการเลื่อนแนวนอนของหน้าไว้ */
html,
body {
   overflow-x: hidden;
}

/* =========================================================================
   ปุ่มสลับภาษา (ไทย / อังกฤษ / เวียดนาม)
   ========================================================================= */

.tg-lang-switch {
   position: relative;
   margin-right: 14px;
   flex: 0 0 auto;
}

.tg-lang-current {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
   background: rgba(255, 255, 255, .14);
   border: 1px solid rgba(255, 255, 255, .28);
   border-radius: 30px;
   color: #fff;
   font-size: 13.5px;
   font-weight: 500;
   line-height: 1.4;
   cursor: pointer;
   transition: background .18s, border-color .18s;
}

.tg-lang-current:hover { background: rgba(255, 255, 255, .24); }

.tg-lang-caret { font-size: 11px; transition: transform .18s; }
.tg-lang-switch.open .tg-lang-caret { transform: rotate(180deg); }

/* เมนูติดขอบบน (พื้นขาว) ตัวหนังสือขาวจะมองไม่เห็น จึงสลับเป็นสีเข้ม */
.header-sticky .tg-lang-current {
   background: rgba(0, 0, 0, .05);
   border-color: rgba(0, 0, 0, .12);
   color: var(--tg-common-black, #222);
}

.tg-lang-list {
   position: absolute;
   top: calc(100% + 10px);
   right: 0;
   min-width: 172px;
   margin: 0;
   padding: 6px;
   list-style: none;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-8px);
   transition: opacity .18s, transform .18s, visibility .18s;
   z-index: 1000;
}

.tg-lang-switch.open .tg-lang-list {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.tg-lang-list a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 12px;
   border-radius: 8px;
   color: #353844;
   font-size: 14px;
   transition: background .15s, color .15s;
}

.tg-lang-list a:hover { background: #f3f0fb; }

.tg-lang-list a.active {
   background: #f3f0fb;
   font-weight: 600;
}

.tg-lang-code {
   flex: 0 0 30px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .04em;
   color: #8a8fa3;
}

.tg-lang-list a.active .tg-lang-code { color: var(--tg-theme-primary, #7c37ff); }

@media (max-width: 575.98px) {
   .tg-lang-switch { margin-right: 8px; }
   .tg-lang-current { padding: 5px 9px; font-size: 12.5px; }
   .tg-lang-current span { display: none; }
}

/* ปุ่มภาษาที่เพิ่มเข้ามาทำให้พื้นที่ฝั่งขวาแคบลง
   เบอร์โทรกับปุ่มเข้าสู่ระบบจึงตกบรรทัด — สั่งไม่ให้ตัดคำ */
.tg-header-contact-number span,
.tg-header-contact-number a,
.tg-btn-header {
   white-space: nowrap;
}

/* จอ 1200px ลงมา ซ่อนเบอร์โทรเพื่อให้ปุ่มภาษาและปุ่มเข้าสู่ระบบอยู่ครบ */
@media (max-width: 1399.98px) {
   .tg-header-contact-info { display: none !important; }
}

/* =========================================================================
   ฟอร์มติดต่อ
   ========================================================================= */

/* ป้ายกำกับช่องกรอก — template เดิมใช้ placeholder อย่างเดียว
   ซึ่งหายไปทันทีที่เริ่มพิมพ์ ทำให้ผู้ใช้ลืมว่าช่องนี้คืออะไร */
.tg-form-label {
   display: block;
   margin-bottom: 7px;
   font-size: 14px;
   font-weight: 500;
   color: #353844;
}

.tg-form-consent {
   font-size: 13px;
   line-height: 1.7;
   color: #6b7387;
}

/* กล่องแจ้งผลหลังกดส่ง */
.tg-form-alert {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   padding: 14px 18px;
   margin-bottom: 24px;
   border-radius: 10px;
   font-size: 14.5px;
   line-height: 1.7;
}

.tg-form-alert i { margin-top: 4px; font-size: 16px; }

.tg-form-alert-success {
   background: #e8f6ef;
   border: 1px solid #b7e0cd;
   color: #1d7a52;
}

.tg-form-alert-error {
   background: #fdecec;
   border: 1px solid #f3c4c4;
   color: #b3373f;
}

/* กับดักสแปม — ต้องซ่อนจากคนจริงและจากโปรแกรมอ่านหน้าจอ
   แต่ห้ามใช้ type="hidden" เพราะบอตจะข้ามไป */
.tg-hp {
   position: absolute !important;
   left: -9999px !important;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

/* แผนที่ให้เต็มความกว้างและมุมมน */
.tg-contact-map iframe {
   width: 100%;
   height: 300px;
   border: 0;
   border-radius: 12px;
   display: block;
}

/* ที่อยู่/เวลาทำการหลายบรรทัดในบล็อกข้อมูลติดต่อ */
.tg-team-details-contact .item span.d-inline-block {
   line-height: 1.7;
}

/* template บังคับ text-transform: capitalize กับหัวข้อและย่อหน้าในหน้าติดต่อ
   ทำให้ประโยคภาษาอังกฤษกลายเป็น "Fill In A Few Details And We Will..."
   ซึ่งผิดหลักการเขียน และไม่มีประโยชน์กับภาษาไทย/เวียดนามด้วย */
.tg-contact-title,
.tg-contact-content-wrap p,
.tg-breadcrumb-title {
   text-transform: none;
}

/* =========================================================================
   เมนูด้านบนกับหลายภาษา
   ภาษาอังกฤษและเวียดนามยาวกว่าไทยมาก ("Dự án đã thực hiện" ยาวกว่า "ผลงาน" 3 เท่า)
   template ตั้ง flex-wrap: wrap ไว้ เมนูจึงตกบรรทัดจนหัวเว็บเสียรูป
   ========================================================================= */

.tgmenu__navbar-wrap .navigation {
   flex-wrap: nowrap;
}

.tgmenu__navbar-wrap .navigation > li > a {
   white-space: nowrap;
   /* template บังคับ capitalize ทำให้เวียดนามกลายเป็น "Dự Án Đã Thực Hiện"
      ซึ่งผิดหลักการเขียนของทั้งเวียดนามและอังกฤษ */
   text-transform: none;
}

.tgmenu__navbar-wrap .sub-menu li a,
.tg-btn-header {
   text-transform: none;
}

/* บีบระยะห่างลงตามความกว้างจอ เพื่อให้เมนูอยู่บรรทัดเดียวได้ */
@media (max-width: 1599.98px) {
   .tgmenu__nav.ml-190 { margin-left: 40px; }
   .tgmenu__navbar-wrap .navigation > li > a { padding-left: 9px; padding-right: 9px; }
}

@media (max-width: 1399.98px) {
   .tgmenu__nav.ml-190 { margin-left: 12px; }
   .tgmenu__navbar-wrap .navigation > li > a { padding-left: 7px; padding-right: 7px; font-size: 14px; }
   /* ปุ่มเปิดแถบข้อมูลด้านข้างกินที่ 46px — ซ่อนไว้ก่อนเพื่อให้เมนูมีที่พอ */
   .tgmenu-offcanvas-open-btn.menu-tigger { display: none !important; }
}

/* โลโก้ใหม่เป็น SVG กว้างกว่าเดิม กำหนดความสูงไว้ให้พอดีแถบเมนู */
.logo img,
.tg-footer-logo img,
.nav-logo img,
.offCanvas__logo img {
   height: 46px;
   width: auto;
}

/*
 * โลโก้บนแถบเมนูต้องไม่ถูกบีบให้เล็กลง
 *
 * .logo อยู่ใน .tgmenu__wrap ที่เป็น flex เมื่อเมนูยาวขึ้น (เช่นสลับเป็น
 * ภาษาอังกฤษที่คำยาวกว่าไทย) flex จะบีบ .logo ให้แคบลง แล้ว max-width
 * ของรูปก็ย่อภาพตามไปด้วย ความสูงจึงไม่เท่า 46px อีก — โลโก้เปลี่ยนขนาด
 * ตามภาษาที่เลือก ซึ่งไม่ควรเกิด
 *
 * flex-shrink 0 สั่งไม่ให้ถูกบีบ และ max-width none กันไม่ให้ย่อภาพ
 * ที่เหลือ (footer / แถบด้านข้าง) ไม่ได้อยู่ใน flex ที่แย่งที่กัน
 * จึงคง max-width 100% ไว้กันภาพล้นจอแคบ
 */
.logo {
   flex: 0 0 auto;
}

.logo img {
   max-width: none;
}

.tg-footer-logo img,
.nav-logo img,
.offCanvas__logo img {
   max-width: 100%;
}

@media (max-width: 575.98px) {
   .logo img { height: 38px; }
}

/* =========================================================================
   แถบชวนติดต่อท้ายหน้าแรก (แทน section ดาวน์โหลดแอปเดิม)
   ========================================================================= */

.tg-cta-contact {
   padding: 56px 60px;
   border-radius: 20px;
}

.tg-cta-contact .tg-cta-title {
   font-size: 34px;
   line-height: 1.35;
   text-transform: none;
}

.tg-cta-contact .tg-cta-text {
   color: rgba(255, 255, 255, .82);
   line-height: 1.8;
}

.tg-btn-cta {
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
}

@media (max-width: 991.98px) {
   .tg-cta-contact { padding: 40px 28px; text-align: center; }
   .tg-cta-contact .tg-cta-title { font-size: 26px; }
   .tg-cta-contact .tg-cta-action { text-align: center !important; margin-top: 24px; }
}

/* template ตั้ง .tg-cta-content ให้เยื้องซ้าย 75px และเว้นล่าง 60px
   เพราะเดิมมีรูปโทรศัพท์โผล่ขึ้นมาจากด้านล่าง — ตอนนี้ไม่มีรูปนั้นแล้ว
   จึงเกิดช่องว่างด้านล่างกล่องโดยเปล่าประโยชน์ */
.tg-cta-contact .tg-cta-content {
   margin-left: 0;
   margin-bottom: 0;
}

/* =========================================================================
   ยกเลิก text-transform: capitalize ที่ template ใส่ไว้เกือบทุก element
   - ภาษาอังกฤษ: ทำให้ประโยคกลายเป็น "Tell Us Where You Want To Go" ซึ่งผิดหลัก
   - ภาษาเวียดนาม: เช่นเดียวกัน "Điểm Đến" ควรเป็น "Điểm đến"
   - ภาษาไทย: ไม่มีตัวพิมพ์ใหญ่-เล็ก จึงไม่มีผลอยู่แล้ว
   คงไว้เฉพาะปุ่มที่ template ตั้งใจให้เป็นตัวพิมพ์ใหญ่ทั้งหมด
   ========================================================================= */

/* template ใช้ selector ซ้อนหลายชั้น เช่น .tg-header-contact-number span
   จึงเอาชนะด้วยกฎธรรมดาไม่ได้ ต้องใช้ !important ทับทั้งหน้า
   (เป็นการทับ stylesheet ของ template ทั้งชุด ไม่ใช่การแก้เฉพาะจุด) */
main, main *,
header, header *,
footer, footer * {
   text-transform: none !important;
}

/* คงตัวพิมพ์ใหญ่ไว้เฉพาะปุ่ม ตามดีไซน์เดิมของ template
   (.tg-btn มี specificity สูงกว่า main * จึงชนะแม้ทั้งคู่เป็น !important) */
.tg-btn,
.tg-btn-header,
.bk-search-button {
   text-transform: uppercase !important;
}

/* =========================================================================
   สลับภาพแบนเนอร์แบบค่อย ๆ จาง (crossfade)
   ========================================================================= */

.tg-hero-area {
   position: relative;
}

.tg-hero-fade {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-repeat: no-repeat;
   opacity: 0;
   /* ช้าและนุ่ม ไม่ดึงสายตาไปจากหัวข้อและฟอร์มค้นหา */
   transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1);
   pointer-events: none;
   z-index: 0;
}

/* เนื้อหาต้องอยู่เหนือเลเยอร์ภาพเสมอ */
.tg-hero-area > .container,
.tg-hero-area > .tg-hero-top-shadow,
.tg-hero-area > .tg-hero-bottom-shape,
.tg-hero-area > .tg-hero-bottom-shape-2 {
   position: relative;
   z-index: 1;
}

/* ผู้ใช้ที่ตั้งค่าเครื่องว่า "ลดการเคลื่อนไหว" ไม่ควรเจอภาพเปลี่ยนไปมา
   (บางคนเวียนหัวหรือไมเกรนกำเริบจากภาพเคลื่อนไหว) */
@media (prefers-reduced-motion: reduce) {
   .tg-hero-fade { transition: none; }
}


/* =========================================================================
   ระบบทัวร์ — หน้ารายการและหน้ารายละเอียด
   template เดิมไม่มีหน้าพวกนี้ในเวอร์ชันที่เราใช้ จึงเขียนสไตล์เพิ่มเอง
   โดยยืมตัวแปรสี/มุมมนจาก main.css เพื่อให้กลมกลืนกับส่วนอื่นของเว็บ
   ========================================================================= */

/* ---- แถบค้นหา ---- */
.tg-tour-search {
   background: #fff;
   border: 1px solid #e8eaef;
   border-radius: 14px;
   padding: 20px;
   box-shadow: 0 6px 24px rgba(20, 26, 51, .05);
}

.tg-tour-search-label {
   display: block;
   margin-bottom: 6px;
   font-size: 13.5px;
   font-weight: 500;
   color: #6b7387;
}

.tg-tour-search .form-control,
.tg-tour-search .form-select {
   height: 48px;
   border-radius: 10px;
   border-color: #e2e5ec;
}

.tg-tour-search .tg-btn { height: 48px; padding: 0 20px; }

/* ---- แถบประเภททัวร์ ---- */
.tg-tour-cat-label {
   display: block;
   margin-bottom: 10px;
   font-size: 14px;
   font-weight: 500;
   color: #6b7387;
}

.tg-tour-cat-list {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.tg-tour-cat-chip {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 8px 16px;
   border: 1px solid #e2e5ec;
   border-radius: 30px;
   background: #fff;
   font-size: 14.5px;
   color: #353844;
   transition: all .25s ease;
}

.tg-tour-cat-chip:hover { border-color: #560ce3; color: #560ce3; }

.tg-tour-cat-chip.active {
   background: #560ce3;
   border-color: #560ce3;
   color: #fff;
}

.tg-tour-cat-chip .count {
   min-width: 22px;
   padding: 1px 6px;
   border-radius: 20px;
   background: #f1f2f6;
   font-size: 12.5px;
   color: #6b7387;
   text-align: center;
}

.tg-tour-cat-chip.active .count { background: rgba(255, 255, 255, .22); color: #fff; }

.tg-tour-result { font-size: 14.5px; color: #6b7387; }

/* ---- การ์ดทัวร์ ---- */
.tg-tour-card-closed {
   position: absolute;
   top: 15px;
   right: 15px;
   padding: 5px 12px;
   border-radius: 6px;
   background: rgba(20, 26, 51, .78);
   color: #fff;
   font-size: 13px;
}

.tg-tour-card-unit { font-size: 13px; color: #6b7387; }

/* ---- ตอนไม่พบทัวร์ ---- */
.tg-tour-empty {
   padding: 60px 20px;
   border: 1px dashed #dfe2ea;
   border-radius: 14px;
   background: #fafbfc;
}

.tg-tour-empty p { color: #6b7387; }

/* ---- เลขหน้า ---- */
.tg-tour-pager ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.tg-tour-pager a,
.tg-tour-pager span {
   display: inline-block;
   min-width: 42px;
   padding: 9px 14px;
   border: 1px solid #e2e5ec;
   border-radius: 8px;
   background: #fff;
   font-size: 14.5px;
   color: #353844;
   text-align: center;
}

.tg-tour-pager a:hover { border-color: #560ce3; color: #560ce3; }
.tg-tour-pager .active  { background: #560ce3; border-color: #560ce3; color: #fff; }
.tg-tour-pager .disabled { color: #b6bbc7; background: #f7f8fa; }

/* ---- หน้ารายละเอียด ---- */
.tg-tour-detail-head {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
}

.tg-tour-detail-loc { font-size: 15px; color: #6b7387; }

.tg-tour-detail-flag {
   padding: 4px 12px;
   border-radius: 20px;
   background: #fff4e2;
   color: #a4680f;
   font-size: 13px;
}

.tg-tour-detail-summary { font-size: 16.5px; line-height: 1.9; color: #4a4f61; }

.tg-tour-detail-title {
   font-size: 22px;
   font-weight: 600;
   text-transform: none;
}

.tg-tour-detail-text { line-height: 1.9; color: #4a4f61; }

.tg-tour-detail-photo { border-radius: 10px; }

/* ตารางข้อมูลสรุป (ระยะเวลา / ประเภท / ขนาดกลุ่ม / ภาษา) */
.tg-tour-detail-facts {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin: 0;
   padding: 20px;
   list-style: none;
   border: 1px solid #e8eaef;
   border-radius: 14px;
   background: #fafbfc;
}

.tg-tour-detail-facts li {
   flex: 1 1 150px;
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.tg-tour-detail-facts .label { font-size: 13px; color: #6b7387; }
.tg-tour-detail-facts .value { font-size: 15.5px; font-weight: 500; color: #1b1f32; }

/* รายการรวม / ไม่รวม */
.tg-tour-detail-list {
   margin: 0;
   padding: 0;
   list-style: none;
}

.tg-tour-detail-list li {
   position: relative;
   padding: 6px 0 6px 26px;
   line-height: 1.8;
   color: #4a4f61;
}

.tg-tour-detail-list i {
   position: absolute;
   left: 0;
   top: 11px;
   font-size: 14px;
}

.tg-tour-detail-list.yes i { color: #1d9c63; }
.tg-tour-detail-list.no  i { color: #c9505a; }

/* กำหนดการรายวัน — เส้นเวลาแนวตั้ง */
.tg-tour-timeline { position: relative; padding-left: 26px; }

.tg-tour-timeline::before {
   content: "";
   position: absolute;
   left: 6px;
   top: 8px;
   bottom: 8px;
   width: 2px;
   background: #e8eaef;
}

.tg-tour-timeline-item { position: relative; padding-bottom: 26px; }

.tg-tour-timeline-item::before {
   content: "";
   position: absolute;
   left: -26px;
   top: 6px;
   width: 14px;
   height: 14px;
   border: 3px solid #560ce3;
   border-radius: 50%;
   background: #fff;
}

.tg-tour-timeline-day {
   display: inline-block;
   margin-bottom: 4px;
   font-size: 13px;
   font-weight: 600;
   color: #560ce3;
   letter-spacing: .3px;
}

.tg-tour-timeline-title {
   margin-bottom: 6px;
   font-size: 17px;
   font-weight: 600;
   text-transform: none;
}

.tg-tour-timeline-item p { color: #4a4f61; line-height: 1.85; }

/* ---- กล่องจอง ---- */
.tg-tour-book-box {
   position: sticky;
   top: 100px;
   padding: 26px;
   border: 1px solid #e8eaef;
   border-radius: 16px;
   background: #fff;
   box-shadow: 0 10px 34px rgba(20, 26, 51, .07);
}

.tg-tour-book-price {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 6px;
   padding-bottom: 15px;
   border-bottom: 1px solid #eef0f4;
}

.tg-tour-book-price .from { font-size: 14px; color: #6b7387; }
.tg-tour-book-price del   { font-size: 15px; color: #a8adbb; }
.tg-tour-book-price strong { font-size: 28px; font-weight: 600; color: #560ce3; }
.tg-tour-book-price .unit { font-size: 13.5px; color: #6b7387; }

.tg-tour-book-title { font-size: 19px; font-weight: 600; text-transform: none; }
.tg-tour-book-intro { font-size: 14px; line-height: 1.75; color: #6b7387; }

.tg-tour-book-box .form-control {
   height: 46px;
   border-radius: 9px;
   border-color: #e2e5ec;
}

.tg-tour-book-box textarea.form-control { height: auto; }

.tg-tour-book-total {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 13px 16px;
   border-radius: 10px;
   background: #f6f4ff;
}

.tg-tour-book-total span   { font-size: 14px; color: #4a4f61; }
.tg-tour-book-total strong { font-size: 20px; font-weight: 600; color: #560ce3; }

/* บนจอเล็กกล่องจองไม่ควรลอยตาม เพราะกินพื้นที่จอเกือบทั้งหมด */
@media (max-width: 991px) {
   .tg-tour-book-box { position: static; margin-top: 30px; }
}


/* =========================================================================
   เมนูใหญ่ (mega menu) ของโปรแกรมทัวร์
   กางเต็มความกว้างจอ แบ่งเป็นคอลัมน์ตามกลุ่มภูมิภาค
   template เดิมมีแค่ dropdown คอลัมน์เดียว จึงเขียนเพิ่มทั้งหมด
   ========================================================================= */

/* ตัวเมนูใหญ่วางอิงกับแถบเมนูทั้งแถบ ไม่ใช่อิงกับปุ่มที่กด
   จะได้กางเต็มความกว้างเหมือนในภาพตัวอย่าง */
.tgmenu__navbar-wrap .navigation > li.tg-mega-parent { position: static; }

.tg-mega-menu {
   position: absolute;
   left: 0;
   right: 0;
   top: 100%;
   z-index: 99;
   padding: 34px 0 10px;
   background: #fff;
   border-top: 1px solid #eef0f4;
   box-shadow: 0 18px 40px rgba(20, 26, 51, .13);

   /* ซ่อนแบบยังคำนวณขนาดได้ เพื่อให้เปลี่ยนสถานะได้นุ่มนวล
      ต่างจาก display:none ที่กระโดดทันทีและ transition ไม่ทำงาน */
   opacity: 0;
   visibility: hidden;
   transform: translateY(12px);
   transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.tgmenu__navbar-wrap .navigation > li.tg-mega-parent:hover > .tg-mega-menu,
.tg-mega-menu:hover {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.tg-mega-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
   gap: 6px 22px;
   align-items: start;
}

/* template ตั้ง .tgmenu__navbar-wrap ul { display:flex; flex-direction:row }
   ไว้สำหรับเมนูแนวนอน ซึ่งเล่นงาน <ul> ทุกตัวที่อยู่ในแถบเมนู รวมถึงของเรา
   รายการในเมนูใหญ่จึงเรียงเป็นแถวนอนแทนที่จะเรียงลงมาเป็นคอลัมน์
   ต้องบังคับกลับเป็น block และเจาะจงให้ชนะกฎเดิม */
.tgmenu__navbar-wrap ul li .tg-mega-menu ul {
   display: block;
   margin: 0 0 20px;
   padding: 0;
   list-style: none;
}

.tgmenu__navbar-wrap ul li .tg-mega-menu ul li {
   display: block;
   width: 100%;
   margin-bottom: 2px;
}

.tg-mega-menu .tg-mega-title {
   margin-bottom: 12px;
   padding-bottom: 9px;
   border-bottom: 1px solid #eef0f4;
   font-size: 15.5px;
   font-weight: 600;
   text-transform: none;

   /* template ตั้ง line-height ของหัวข้อไว้สูงมาก (ราว 2 เท่า) สำหรับหัวข้อเดี่ยว ๆ
      ในคอลัมน์แคบแบบนี้ต้องบีบลง ไม่งั้นหัวข้อ 2 บรรทัดจะสูงเกือบเท่ารายการทั้งคอลัมน์ */
   line-height: 1.35;

   /* เผื่อที่ไว้ 2 บรรทัด — ชื่อกลุ่มภาษาอังกฤษยาวกว่าภาษาไทยมาก
      ("Central & Western Thailand" ตกบรรทัด) ถ้าไม่เผื่อไว้
      รายการในคอลัมน์นั้นจะเริ่มต่ำกว่าคอลัมน์อื่นจนดูเหลื่อม */
   min-height: 52px;
}

.tg-mega-title i { margin-right: 7px; color: #560ce3; }

/* template ตั้ง display:flex ให้ลิงก์ทุกตัวในแถบเมนู
   ลิงก์หัวข้อจึงกลายเป็นบล็อกและตกไปอยู่คนละบรรทัดกับไอคอน
   หัวข้อเลยสูงขึ้นมาอีกหนึ่งบรรทัดโดยไม่มีเหตุผล */
.tgmenu__navbar-wrap ul li .tg-mega-menu .tg-mega-title a { display: inline; }

/* สีตัวอักษรของ template เป็นสีขาว (เมนูวางบนภาพแบนเนอร์)
   และตอน hover เมนูแม่ก็ยังไล่สีจาง ๆ ลงมาถึงลิงก์ลูกทุกตัว
   เมนูใหญ่พื้นขาว จึงต้องกำหนดสีของตัวเองทับให้หมด */
.tgmenu__navbar-wrap ul li .tg-mega-menu a,
.tgmenu__navbar-wrap > ul > li:hover .tg-mega-menu a {
   padding: 0;
   color: #14192f;
   font-size: 15px;
   text-transform: none;
}

.tgmenu__navbar-wrap ul li .tg-mega-menu .tg-mega-list a,
.tgmenu__navbar-wrap > ul > li:hover .tg-mega-menu .tg-mega-list a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   padding: 5px 9px;
   border-radius: 7px;
   font-size: 14.5px;
   line-height: 1.5;
   color: #4a4f61;
   transition: background .2s ease, color .2s ease;
}

.tgmenu__navbar-wrap ul li .tg-mega-menu .tg-mega-list a:hover,
.tgmenu__navbar-wrap ul li .tg-mega-menu .tg-mega-title a:hover {
   background: #f4f1ff;
   color: #560ce3;
}

.tgmenu__navbar-wrap ul li .tg-mega-menu .tg-mega-title a:hover { background: none; }

/* ตัวเลขจำนวนทัวร์ — ต้องอ่านออกแต่ไม่แย่งความสนใจไปจากชื่อหมวด */
.tg-mega-list .count {
   min-width: 20px;
   padding: 0 6px;
   border-radius: 20px;
   background: #f1f2f6;
   font-size: 12px;
   color: #8a90a2;
   text-align: center;
}

.tg-mega-list a:hover .count { background: #e5dcff; color: #560ce3; }

.tg-mega-foot {
   margin-top: 4px;
   padding-top: 14px;
   border-top: 1px solid #eef0f4;
   text-align: right;
}

.tgmenu__navbar-wrap ul li .tg-mega-menu .tg-mega-foot a,
.tgmenu__navbar-wrap > ul > li:hover .tg-mega-menu .tg-mega-foot a {
   display: inline-block;
   font-size: 14.5px;
   font-weight: 500;
   color: #560ce3;
}

/* จอที่ไม่สูงพอ ให้เมนูใหญ่เลื่อนในตัวเองแทนที่จะล้นออกนอกจอ */
@media (max-height: 800px) {
   .tg-mega-menu {
      max-height: calc(100vh - 120px);
      overflow-y: auto;
   }
}

/* ปุ่มเลือกจังหวัดในภาคที่กำลังดูอยู่ — เล็กกว่าปุ่มภาคหนึ่งขั้น
   เพื่อให้เห็นชัดว่าเป็นตัวเลือกชั้นรองลงมา ไม่ใช่ตัวเลือกระดับเดียวกัน */
.tg-tour-cat-sub {
   padding: 12px 14px;
   border-radius: 12px;
   background: #f7f6fd;
}

.tg-tour-cat-chip.sm {
   padding: 5px 13px;
   font-size: 13.5px;
   background: #fff;
}

/* ต้องเขียนซ้ำตรงนี้ เพราะกฎ .sm อยู่ทีหลังและมีน้ำหนักเท่ากับ .active
   ถ้าไม่เขียนทับ ปุ่มที่เลือกอยู่จะกลายเป็นตัวหนังสือขาวบนพื้นขาว */
.tg-tour-cat-chip.sm.active {
   background: #560ce3;
   border-color: #560ce3;
   color: #fff;
}


/* =========================================================================
   ความอ่านออกของเมนูบนภาพแบนเนอร์

   เมนูเป็นตัวหนังสือสีขาววางทับภาพ ซึ่งแอดมินเปลี่ยนได้เองจากหลังบ้าน
   พอเจอภาพโทนสว่าง (ท้องฟ้า ทะเลใส หาดทราย) ตัวหนังสือจะจมหายไปเลย
   แก้ 2 ชั้นซ้อนกัน เพราะชั้นเดียวยังเอาไม่อยู่กับภาพที่สว่างจัด

     ชั้นที่ 1  แถบไล่สีเข้มด้านบนของภาพ  (.tg-hero-top-shadow)
     ชั้นที่ 2  เงาใต้ตัวอักษรและโลโก้     (กฎด้านล่างนี้)

   ทั้งหมดมีผลเฉพาะตอนเมนูโปร่งใสวางบนภาพ
   พอเลื่อนลงจนเมนูติดขอบบน (.header-sticky) พื้นหลังกลายเป็นสีขาว
   ตัวหนังสือเปลี่ยนเป็นสีเข้ม เงาจะกลายเป็นคราบสกปรก จึงต้องถอดออก
   ========================================================================= */

.tg-hero-area .tg-hero-top-shadow {
   /* ของ template ไล่จากดำสนิทลงมา ซึ่งแรงไปกับหน้าแรกที่ไม่มีหัวข้อชิดขอบบน
      ลดความเข้มลงแต่ลากให้ยาวขึ้น จะได้ครอบคลุมทั้งแถบเมนูอย่างนุ่มนวล */
   height: 220px;
   background: linear-gradient(180deg,
      rgba(8, 12, 26, .58) 0%,
      rgba(8, 12, 26, .34) 45%,
      rgba(8, 12, 26, 0) 100%);
}

/* หน้าอื่นที่ใช้แบนเนอร์หัวหน้า (โปรแกรมทัวร์ / ติดต่อเรา) — เพิ่มความเข้มเช่นกัน */
.tg-breadcrumb-spacing-5 .tg-hero-top-shadow {
   height: 260px;
   background: linear-gradient(180deg,
      rgba(8, 12, 26, .58) 0%,
      rgba(8, 12, 26, .32) 50%,
      rgba(8, 12, 26, 0) 100%);
}

/* ---- ชั้นที่ 2: เงาใต้ตัวอักษร ---- */
.tg-header__area:not(.header-sticky) .tgmenu__navbar-wrap > ul > li > a,
.tg-header__area:not(.header-sticky) .tg-header-contact-number a,
.tg-header__area:not(.header-sticky) .tg-header-contact-number span,
.tg-header__area:not(.header-sticky) .tg-lang-current {
   /* เงาสองชั้น: ชั้นแรกคมไว้แยกตัวอักษรออกจากพื้น
      ชั้นที่สองฟุ้งกว้างไว้ลดความสว่างของพื้นหลังรอบ ๆ ตัวอักษร */
   text-shadow: 0 1px 2px rgba(8, 12, 26, .55), 0 0 14px rgba(8, 12, 26, .45);
}

/* โลโก้กับปุ่มขีดสามขีดเป็นรูปกับเส้น ไม่ใช่ตัวอักษร ใช้ text-shadow ไม่ได้ */
.tg-header__area:not(.header-sticky) .logo-1 img,
.tg-header__area:not(.header-sticky) .tgmenu-offcanvas-open-btn span,
.tg-header__area:not(.header-sticky) .tg-header-contact-icon {
   filter: drop-shadow(0 1px 3px rgba(8, 12, 26, .45));
}

/* เมนูใหญ่เป็นกล่องพื้นขาว ตัวหนังสือสีเข้ม ห้ามได้เงาตกทอดมาด้วย */
.tg-header__area:not(.header-sticky) .tg-mega-menu a,
.tg-header__area:not(.header-sticky) .tg-mega-menu i,
.tg-header__area:not(.header-sticky) .sub-menu a {
   text-shadow: none;
}

/* หัวข้อบนแบนเนอร์เจอปัญหาเดียวกับเมนู — ตัวหนังสือขาวบนท้องฟ้าหรือทะเลสีอ่อน
   ตรงกลางภาพไม่มีแถบไล่สีช่วย (แถบไล่สีคลุมแค่ด้านบนสำหรับเมนู)
   จึงต้องพึ่งเงาใต้ตัวอักษรอย่างเดียว ใส่ฟุ้งกว้างหน่อยเพราะตัวอักษรใหญ่ */
.tg-hero-content .tg-hero-title,
.tg-hero-content .tg-hero-tu-title,
.tg-hero-content .tg-hero-tu-avatar-text {
   text-shadow: 0 2px 6px rgba(8, 12, 26, .42), 0 0 26px rgba(8, 12, 26, .35);
}


/* =========================================================================
   หน้าผลงาน
   template ไม่มีหน้าผลงานมาให้ ใช้โครงการ์ดของบล็อกมาปรับ
   แต่เขียนสไตล์ใหม่ให้เข้าชุดกับการ์ดทัวร์ จะได้ดูเป็นเว็บเดียวกัน
   ========================================================================= */

.tg-portfolio-intro {
   max-width: 640px;
   margin-left: auto;
   margin-right: auto;
   font-size: 16px;
   color: #6b7387;
}

/* ---- แถบค้นหา + เลือกปี ---- */
.tg-portfolio-filter {
   padding: 20px;
   border: 1px solid #e8eaef;
   border-radius: 14px;
   background: #fff;
   box-shadow: 0 6px 24px rgba(20, 26, 51, .05);
}

.tg-portfolio-search {
   display: flex;
   gap: 10px;
   margin-bottom: 18px;
}

.tg-portfolio-search .form-control {
   height: 48px;
   border-radius: 10px;
   border-color: #e2e5ec;
}

.tg-portfolio-search .tg-btn {
   height: 48px;
   padding: 0 24px;
   flex: 0 0 auto;
}

/* ---- การ์ดผลงาน ---- */
.tg-portfolio-card {
   display: flex;
   flex-direction: column;
   height: calc(100% - 30px);
   border: 1px solid #e8eaef;
   border-radius: 14px;
   background: #fff;
   overflow: hidden;
   transition: transform .25s ease, box-shadow .25s ease;
}

.tg-portfolio-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 14px 34px rgba(20, 26, 51, .1);
}

.tg-portfolio-card-thumb {
   position: relative;
   /* บังคับสัดส่วนไว้ ไม่งั้นรูปที่แอดมินอัปโหลดคนละสัดส่วนจะทำให้การ์ดสูงไม่เท่ากัน */
   aspect-ratio: 16 / 10;
   overflow: hidden;
   background: #f1f2f6;
}

.tg-portfolio-card-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s ease;
}

.tg-portfolio-card:hover .tg-portfolio-card-thumb img { transform: scale(1.05); }

/* เบราว์เซอร์เก่าที่ยังไม่รู้จัก aspect-ratio ให้ใช้ความสูงคงที่แทน */
@supports not (aspect-ratio: 16 / 10) {
   .tg-portfolio-card-thumb { height: 210px; }
}

.tg-portfolio-card-badge {
   position: absolute;
   top: 14px;
   left: 14px;
   padding: 4px 12px;
   border-radius: 6px;
   background: #560ce3;
   color: #fff;
   font-size: 12.5px;
}

.tg-portfolio-card-body {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   padding: 20px;
}

.tg-portfolio-card-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-bottom: 9px;
   font-size: 13px;
   color: #8a90a2;
}

.tg-portfolio-card-meta i { margin-right: 5px; color: #560ce3; }

.tg-portfolio-card-title {
   margin-bottom: 7px;
   font-size: 19px;
   font-weight: 600;
   line-height: 1.5;
   text-transform: none;
}

.tg-portfolio-card-title a { color: #14192f; }
.tg-portfolio-card-title a:hover { color: #560ce3; }

.tg-portfolio-card-loc {
   margin-bottom: 10px;
   font-size: 14px;
   color: #6b7387;
}

.tg-portfolio-card-loc i { margin-right: 5px; }

.tg-portfolio-card-text {
   margin-bottom: 16px;
   font-size: 14.5px;
   line-height: 1.75;
   color: #6b7387;

   /* ตัดคำโปรยที่ยาวเกินไปให้เหลือ 3 บรรทัด การ์ดจะได้สูงใกล้เคียงกัน */
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* ปุ่มอ่านต่อดันลงล่างสุดเสมอ ให้ทุกการ์ดในแถวมีปุ่มอยู่ระดับเดียวกัน */
.tg-portfolio-card-link {
   margin-top: auto;
   font-size: 14.5px;
   font-weight: 500;
   color: #560ce3;
}

/* ---- กล่องบอกว่าทริปนี้มาจากโปรแกรมไหน ---- */
.tg-portfolio-tour {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   padding: 13px 15px;
   border-radius: 10px;
   background: #f6f4ff;
   font-size: 14.5px;
   line-height: 1.6;
   color: #14192f;
}

.tg-portfolio-tour i { margin-top: 4px; color: #560ce3; }

/* รูปในแกลเลอรีมาจากกล้องคนละตัว สัดส่วนไม่เท่ากัน
   ถ้าปล่อยตามจริงแถวจะสูงไม่เท่ากันจนดูรก บังคับสัดส่วนแล้วครอบตรงกลางแทน */
.tg-tour-detail-photo {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   border-radius: 10px;
}

@supports not (aspect-ratio: 4 / 3) {
   .tg-tour-detail-photo { height: 180px; }
}

/* เนื้อหาจากเครื่องมือแก้ข้อความในหลังบ้าน — จัดระยะให้อ่านสบายบนหน้าเว็บจริง
   (ในหลังบ้านมีสไตล์ของตัวเองอยู่ใน admin.css แยกกัน) */
.tg-rich p { margin-bottom: 14px; }

.tg-rich h3 {
   margin: 26px 0 12px;
   font-size: 21px;
   font-weight: 600;
   text-transform: none;
}

.tg-rich ul,
.tg-rich ol { margin: 0 0 16px; padding-left: 26px; }

.tg-rich li { margin-bottom: 6px; }

.tg-rich blockquote {
   margin: 0 0 18px;
   padding: 6px 0 6px 18px;
   border-left: 3px solid #d6ccf7;
   color: #5a6072;
}

.tg-rich img {
   max-width: 100%;
   height: auto;
   margin: 10px 0 18px;
   border-radius: 10px;
}

.tg-rich a { color: #560ce3; text-decoration: underline; }


/* =========================================================================
   ส่วนรีวิวลูกค้า
   template ออกแบบให้พื้นหลังส่วนนี้เป็นสีอ่อน หัวข้อจึงเป็นสีเข้ม
   แต่ธีมของเราพื้นเป็นม่วงเข้ม หัวข้อสีเข้มเลยจมหายไปกับพื้น
   ========================================================================= */
.tg-testimonial-su-wrap .tg-section-su-title {
   color: #fff;
}

/* ป้ายเล็กด้านบน ("What our clients say") อ่านออกอยู่แล้วบนพื้นขาว
   แต่ย้ำสีตัวอักษรไว้กันเผื่อ template เปลี่ยนค่าเริ่มต้น */
.tg-testimonial-su-wrap .tg-section-su-subtitle {
   background: rgba(255, 255, 255, .92);
   color: #560ce3;
}

/* ชื่อผู้รีวิวและตำแหน่งบนพื้นม่วง ต้องสว่างพอเช่นกัน */
.tg-testimonial-su-wrap .tg-testimonial-4-clients h5,
.tg-testimonial-su-wrap .tg-testimonial-4-clients span,
.tg-testimonial-su-wrap .tg-testimonial-4-content p {
   color: #fff;
}


/* =========================================================================
   โปรโมชั่น
   ========================================================================= */

/* ---- การ์ดในหน้ารวมโปรโมชั่น ---- */
.tg-promo-card {
   display: flex;
   flex-direction: column;
   height: calc(100% - 30px);
   border: 1px solid #e8eaef;
   border-radius: 16px;
   background: #fff;
   overflow: hidden;
   transition: transform .25s ease, box-shadow .25s ease;
}

.tg-promo-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 14px 34px rgba(20, 26, 51, .1);
}

.tg-promo-card-thumb {
   position: relative;
   aspect-ratio: 16 / 8;
   overflow: hidden;
   background: #f1f2f6;
}

@supports not (aspect-ratio: 16 / 8) {
   .tg-promo-card-thumb { height: 220px; }
}

.tg-promo-card-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* ป้ายส่วนลด — ต้องเด่นที่สุดในการ์ด เพราะเป็นเหตุผลเดียวที่คนหยุดดู */
.tg-promo-badge {
   position: absolute;
   top: 16px;
   left: 16px;
   padding: 7px 16px;
   border-radius: 8px;
   background: #560ce3;
   color: #fff;
   font-size: 17px;
   font-weight: 600;
   box-shadow: 0 6px 18px rgba(86, 12, 227, .35);
}

.tg-promo-days {
   position: absolute;
   top: 16px;
   right: 16px;
   padding: 5px 13px;
   border-radius: 20px;
   background: rgba(20, 26, 51, .78);
   color: #fff;
   font-size: 13px;
}

/* เหลือ 3 วันสุดท้ายเปลี่ยนเป็นสีแดง — เร่งเฉพาะตอนที่ใกล้หมดจริง ๆ
   ถ้าแดงตลอดเวลา คนจะเลิกสนใจสีแดง */
.tg-promo-days.urgent { background: #c92a2a; }

.tg-promo-days i { margin-right: 5px; }

.tg-promo-card-body {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   padding: 22px;
}

.tg-promo-scope {
   margin-bottom: 8px;
   font-size: 13.5px;
   color: #8a90a2;
}

.tg-promo-scope i { margin-right: 6px; color: #560ce3; }
.tg-promo-scope b { color: #4a4f61; font-weight: 500; }

.tg-promo-title {
   margin-bottom: 10px;
   font-size: 22px;
   font-weight: 600;
   line-height: 1.45;
   text-transform: none;
}

.tg-promo-summary {
   margin-bottom: 14px;
   font-size: 15px;
   line-height: 1.8;
   color: #6b7387;
}

.tg-promo-detail { font-size: 14.5px; color: #4a4f61; }

/* โค้ดส่วนลด — ทำให้เลือกคัดลอกง่าย เพราะลูกค้าต้องเอาไปแจ้งตอนจอง */
.tg-promo-code {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 12px;
   padding: 11px 15px;
   border: 1px dashed #c9b6f7;
   border-radius: 10px;
   background: #f8f5ff;
}

.tg-promo-code span { font-size: 13.5px; color: #6b7387; }

.tg-promo-code code {
   padding: 3px 12px;
   border-radius: 6px;
   background: #560ce3;
   color: #fff;
   font-size: 15px;
   font-weight: 600;
   letter-spacing: .06em;
   user-select: all;   /* คลิกเดียวเลือกทั้งโค้ด */
}

.tg-promo-period {
   margin-bottom: 12px;
   font-size: 13.5px;
   color: #8a90a2;
}

.tg-promo-terms {
   margin-bottom: 6px;
   font-size: 13.5px;
   color: #6b7387;
}

.tg-promo-terms summary {
   cursor: pointer;
   color: #560ce3;
   list-style: none;
}

.tg-promo-terms summary::-webkit-details-marker { display: none; }
.tg-promo-terms summary::before { content: '+ '; }
.tg-promo-terms[open] summary::before { content: '– '; }

.tg-promo-terms ul {
   margin: 10px 0 0;
   padding-left: 20px;
   line-height: 1.85;
}

/* ปุ่มดันลงล่างสุดเสมอ การ์ดในแถวเดียวกันจะได้มีปุ่มตรงระดับกัน */
.tg-promo-card-body .tg-btn { margin-top: auto; align-self: flex-start; }


/* ---- แบนเนอร์โปรโมชั่นบนหน้าแรก ---- */
.tg-home-promo {
   position: relative;
   display: block;
   height: 100%;
   min-height: 260px;
   border-radius: 16px;
   overflow: hidden;
   background-size: cover;
   background-position: center;
}

/* ไล่สีจากมุมซ้ายล่าง ให้ตัวหนังสืออ่านออกไม่ว่าภาพจะสว่างแค่ไหน */
.tg-home-promo-shade {
   position: absolute;
   inset: 0;
   background: linear-gradient(120deg,
      rgba(12, 8, 40, .82) 0%,
      rgba(12, 8, 40, .55) 45%,
      rgba(12, 8, 40, .12) 100%);
}

.tg-home-promo-body {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 9px;
   height: 100%;
   padding: 34px;
   color: #fff;
}

.tg-home-promo-badge {
   padding: 5px 14px;
   border-radius: 7px;
   background: #fff;
   color: #560ce3;
   font-size: 16px;
   font-weight: 700;
}

.tg-home-promo-title {
   font-size: 27px;
   font-weight: 700;
   line-height: 1.35;
   max-width: 22ch;
}

.tg-home-promo-text {
   font-size: 15px;
   line-height: 1.7;
   max-width: 34ch;
   opacity: .92;
}

.tg-home-promo-days {
   font-size: 13.5px;
   opacity: .9;
}

.tg-home-promo-days i { margin-right: 5px; }

.tg-home-promo-btn { margin-top: auto; }

@media (max-width: 575.98px) {
   .tg-home-promo-body { padding: 24px; }
   .tg-home-promo-title { font-size: 22px; }
}


/* =========================================================================
   หน้าเนื้อหาทั่วไป (เกี่ยวกับเรา / เงื่อนไข / นโยบาย / คำถามที่พบบ่อย)
   ========================================================================= */

.tg-cms-body {
   font-size: 16px;
   line-height: 1.95;
   color: #3f4457;
}

.tg-cms-body h2 {
   margin: 34px 0 14px;
   font-size: 24px;
   font-weight: 600;
   text-transform: none;
}

.tg-cms-body h2:first-child { margin-top: 0; }

.tg-cms-updated {
   margin-top: 26px;
   font-size: 13.5px;
   color: #8a90a2;
   text-align: right;
}

/* ---- กล่องชวนติดต่อท้ายหน้า ---- */
.tg-cms-contact {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding: 26px 30px;
   border-radius: 16px;
   background: #f6f4ff;
}

.tg-cms-contact h3 {
   margin-bottom: 5px;
   font-size: 20px;
   font-weight: 600;
   text-transform: none;
}

.tg-cms-contact p { color: #6b7387; }

/* ---- คำถามที่พบบ่อย ---- */
.tg-faq-search {
   position: relative;
}

.tg-faq-search i {
   position: absolute;
   left: 16px;
   top: 50%;
   transform: translateY(-50%);
   color: #8a90a2;
}

.tg-faq-search .form-control {
   height: 50px;
   padding-left: 44px;
   border-radius: 12px;
   border-color: #e2e5ec;
}

.tg-faq-item {
   margin-bottom: 10px;
   border: 1px solid #e8eaef;
   border-radius: 12px;
   background: #fff;
   overflow: hidden;
}

.tg-faq-item summary {
   position: relative;
   padding: 17px 52px 17px 20px;
   font-size: 16.5px;
   font-weight: 500;
   line-height: 1.6;
   color: #14192f;
   cursor: pointer;
   list-style: none;
}

/* ซ่อนสามเหลี่ยมของเบราว์เซอร์ แล้ววาดเครื่องหมายเองให้ตรงกันทุกที่ */
.tg-faq-item summary::-webkit-details-marker { display: none; }

.tg-faq-item summary::after {
   content: '';
   position: absolute;
   right: 22px;
   top: 50%;
   width: 9px;
   height: 9px;
   margin-top: -6px;
   border-right: 2px solid #560ce3;
   border-bottom: 2px solid #560ce3;
   transform: rotate(45deg);
   transition: transform .2s ease;
}

.tg-faq-item[open] summary::after {
   transform: rotate(-135deg);
   margin-top: -2px;
}

.tg-faq-item summary:hover { background: #faf9ff; }
.tg-faq-item[open] { border-color: #d6ccf7; }

.tg-faq-answer {
   padding: 0 20px 20px;
   font-size: 15.5px;
   line-height: 1.9;
   color: #4a4f61;
}

.tg-faq-empty {
   padding: 30px;
   border: 1px dashed #dfe2ea;
   border-radius: 12px;
   background: #fafbfc;
   color: #6b7387;
   text-align: center;
}


/* =========================================================================
   ล็อกสัดส่วนรูปบนการ์ด

   ปัญหา: รูปที่แอดมินอัปโหลดมีสัดส่วนไม่เท่ากัน พอวางเรียงกันในแถวเดียว
   การ์ดที่ได้รูปแนวตั้งจะสูงกว่าเพื่อน แถวทั้งแถวเลยดูเบี้ยว

   แก้ที่ CSS ไม่ใช่ที่รูป เพราะควบคุมรูปที่แอดมินจะอัปโหลดในอนาคตไม่ได้
   กรอบกำหนดสัดส่วนตายตัว แล้วให้รูป cover เข้าไป — รูปแนวไหนก็ไม่ทำแถวพัง
   ========================================================================= */

/* การ์ดทัวร์ (หน้าแรก หน้ารายการ และทัวร์ที่เกี่ยวข้อง) */
.tg-listing-card-thumb {
   aspect-ratio: 3 / 2;
   overflow: hidden;
}

.tg-listing-card-thumb > a {
   display: block;
   width: 100%;
   height: 100%;
}

.tg-listing-card-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* สไลด์ "ที่เที่ยวยอดนิยม" ในหน้าแรก — แนวตั้ง เพราะกล่องข้อความทับอยู่ด้านล่าง */
.tg-location-su-wrap .tg-location-thumb {
   aspect-ratio: 3 / 4;
   overflow: hidden;
}

.tg-location-su-wrap .tg-location-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* ภาพประกอบขั้นตอนการทำงาน — ต้องสูงเท่ากล่องข้อความที่อยู่ข้าง ๆ */
.tg-chose-2-thumb {
   aspect-ratio: 1 / 1;
   overflow: hidden;
}

.tg-chose-2-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}


/* =========================================================================
   ชื่อจดทะเบียนบริษัทบนหน้าติดต่อเรา

   วางโลโก้ชุดเต็มไว้ข้างชื่อ แต่บนมือถือให้ซ้อนลงมาเป็นแนวตั้ง
   เพราะโลโก้ชุดเต็มกว้างเกินกว่าจะยืนคู่กับข้อความในจอแคบ
   ========================================================================= */
.tg-contact-company {
   display: flex;
   align-items: center;
   gap: 18px;
   padding: 20px 22px;
   border: 1px solid #ece6f5;
   border-radius: 14px;
   background: #fdfcff;
}

.tg-contact-company-logo {
   flex: 0 0 74px;
   width: 74px;
   height: auto;
}

.tg-contact-company-name {
   min-width: 0;
   line-height: 1.5;
}

.tg-contact-company-name strong {
   display: block;
   font-size: 17px;
   font-weight: 600;
   color: #5A3A22;
}

.tg-contact-company-name span {
   display: block;
   font-size: 14px;
   letter-spacing: .4px;
   color: #7A4526;
}

.tg-contact-company-name em {
   display: block;
   margin-top: 4px;
   font-size: 13px;
   color: #A87C24;
}

.tg-contact-company-name small {
   display: block;
   margin-top: 6px;
   font-size: 12px;
   color: #8a8a99;
}

@media (max-width: 575px) {
   .tg-contact-company {
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
   }
}