@charset "utf-8";
/* CSS Document */

/* รีเซ็ตค่าพื้นฐาน */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


body {
    font-family: 'Mitr', sans-serif;
    color: #2B2B2B;
    display: flex;
    justify-content: center;
    padding: 40px 0; 
    min-height: 100vh;
    box-sizing: border-box;
    
    /* ซ่อมแซมคำสั่งไล่สีและปิดวงเล็บ */
    background-image: 
        url("../images/bg-jiew-2026.svg"), 
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 70%), 
        linear-gradient(135deg, #efeaeb 0%, #d9d9dd 100%);
    
    background-repeat: repeat, no-repeat, no-repeat;    
    background-attachment: fixed;    
    background-color: #fcfaf5; 
	font-size: 16px;
}
p {
    font-size: 18px;
    line-height: 1.7; /* ช่วยเพิ่มความโปร่งระหว่างบรรทัดให้อ่านง่ายขึ้นครับ */
}
strong {
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}
/* คอนเทนเนอร์หลัก บีบความกว้างสเกลกำลังสวย */
.web-container {
    width: 95%;
    max-width: 1200px; 
    background-color: #f7f4eb; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.top-bar {
    background-color: #202c44; /* สีน้ำเงินเข้มเนวี่ตามรูปต้นฉบับ */
    color: #ffffff;
    padding: 10px 24px; 
    font-size: 14px; 
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #181e2a;
    
    border-top-left-radius: 16px;  /* มนขอบด้านบนซ้ายให้รับกับ web-container */
    border-top-right-radius: 16px; /* มนขอบด้านบนขวาให้รับกับ web-container */
}
.top-bar .links a {
    color: #ffffff;
    text-decoration: none;
    margin-left: 20px;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.top-bar .links a:hover {
    opacity: 1;
}
.top-bar .hamburger-menu {
    display: none; 
}

/* =======================================================
   2. MAIN HEADER (เวอร์ชันปรับปรุงไล่สีทอง Metallic ตามรูป Ref)
======================================================= */
.main-header {
    background-image: 
        linear-gradient(95deg, #867257 0%, #a59073 18%, #e4cdad 45%, #d0b999 60%, #a59274 75%, #847153 90%, #8b785a 100%), 
        linear-gradient(to right, #66563d, #99886e, #5e4d39); 
    
    background-origin: border-box;
    background-clip: padding-box, border-box;

    padding: 0 24px;       
    height: 94px;          
    display: flex;
    align-items: center;
    justify-content: center;
    
    border-bottom: 2px solid transparent; 
    border-radius: 0 0 16px 16px; 
    
    box-shadow: 0 4px 10px rgba(51, 41, 23, 0.25);
    position: relative;
    z-index: 10;
}
.main-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px; 
    background: linear-gradient(to right, #9c938c, #ded5cc, #a8a199);
}

/* ลิงก์ครอบรูปโลโก้ */
.header-logo-zone {
    display: flex;
    justify-content: center; 
    align-items: center;
    height: 100%;
}

/* สไตล์รูปภาพโลโก้ชิ้นเดียวแทนสไตล์ Text/Placeholder เดิม */
.brand-logo-img {
    height: 64px;          
    width: auto;           
    object-fit: contain;
    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.15)); 
}

/* ปุ่มเมนูสามขีดสีขาว (Hamburger Menu) */
.menu-toggle-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;              
    padding: 8px 4px;
    transition: transform 0.2s;
}

.menu-toggle-btn:hover {
    transform: scale(1.05);
}

.menu-toggle-btn .bar-line {
    display: block;
    width: 26px;               
    height: 2.5px;
    background-color: #ffffff; 
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 🛠️ ส่วน BACKGROUND คอนเทนต์ลายวินเทจ */
.content-body {
    padding: 24px;
    position: relative;
    background-color: #f3eee3; 
    overflow: hidden;
}

.content-body::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 220px; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' opacity='0.18'%3E%3Cg fill='none' stroke='%23b89872' stroke-width='0.4'%3E%3Cpath d='M0,60 C300,30 400,90 700,50 C950,20 1050,70 1200,40'/%3E%3Cpath d='M0,72 C300,42 400,102 700,62 C950,32 1050,82 1200,52'/%3E%3Cpath d='M0,84 C300,54 400,114 700,74 C950,44 1050,94 1200,64'/%3E%3Cpath d='M0,96 C300,66 400,126 700,86 C950,56 1050,106 1200,76'/%3E%3Cpath d='M0,108 C300,78 400,138 700,98 C950,68 1050,118 1200,88'/%3E%3C/g%3E%3Cg fill='%23b89872' opacity='0.8'%3E%3Ctext x='80' y='125' font-family='serif' font-size='65' font-style='italic'%3E𝄞%3C/text%3E%3Ccircle cx='320' cy='75' r='5'/%3E%3Cpath d='M324,75 L324,40 C350,45 360,35 370,50 L370,85' stroke='%23b89872' stroke-width='0.8' fill='none'/%3E%3Ccircle cx='366' cy='85' r='5'/%3E%3Ccircle cx='780' cy='70' r='4.5'/%3E%3Cline x1='784' y1='70' x2='784' y2='35' stroke='%23b89872' stroke-width='1'/%3E%3Cpath d='M784,35 C800,40 805,50 800,60' stroke='%23b89872' stroke-width='1' fill='none'/%3E%3Ctext x='1020' y='95' font-family='serif' font-size='50' font-style='italic'%3E𝄢%3C/text%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 102% auto;
    background-position: top center;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 85%);
    mask-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 85%);
    pointer-events: none;
    z-index: 0;
}

.content-body::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' opacity='0.15'%3E%3Cg fill='none' stroke='%23b89872' stroke-width='0.4'%3E%3Cpath d='M0,140 C200,100 400,160 800,110 C1000,85 1100,125 1200,95'/%3E%3Cpath d='M0,148 C200,108 400,168 800,118 C1000,93 1100,133 1200,103'/%3E%3Cpath d='M0,156 C200,116 400,176 800,126 C1000,101 1100,141 1200,111'/%3E%3Cpath d='M0,164 C200,126 400,184 800,134 C1000,109 1100,149 1200,119'/%3E%3Cpath d='M0,172 C200,134 400,192 800,142 C1000,117 1100,157 1200,127'/%3E%3C/g%3E%3Cg fill='%23b89872' opacity='0.7'%3E%3Ctext x='550' y='145' font-family='serif' font-size='55' font-style='italic'%3E𝄞%3C/text%3E%3Ccircle cx='240' cy='135' r='4.5'/%3E%3Cline x1='244' y1='135' x2='244' y2='100' stroke='%23b89872' stroke-width='1'/%3E%3Ccircle cx='920' cy='110' r='4.5'/%3E%3Cline x1='924' y1='110' x2='924' y2='75' stroke='%23b89872' stroke-width='1'/%3E%3Cpath d='M244,100 Q280,105 310,90' stroke='%23b89872' stroke-width='1.2' fill='none'/%3E%3Ccircle cx='306' cy='120' r='4.5'/%3E%3Cline x1='310' y1='120' x2='310' y2='85' stroke='%23b89872' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 102% auto;
    background-position: bottom center;
    -webkit-mask-image: radial-gradient(circle at 50% 80%, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 80%);
    mask-image: radial-gradient(circle at 50% 80%, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 80%);
    pointer-events: none;
    z-index: 0;
}

.search-section, .two-col-grid, .full-width-box {
    position: relative;
    z-index: 1;
}

/* =======================================================
   3. ADVANCED SEARCH & TABS (Full Width Glassmorphism)
======================================================= */
:root {
    --gl-bg: rgba(255, 255, 255, 0.25);
    --gl-bg-inner: rgba(255, 255, 255, 0.65);
    --gl-blur: blur(16px);
    --gl-border: 1px solid rgba(165, 144, 115, 0.4);
    --gl-glow: 0 0 10px rgba(165, 144, 115, 0.15);
    --gold-text: #e4cdad;
    --gold-hover: #867257;
    --navy-premium: linear-gradient(135deg, #202c44 0%, #101a2c 100%);
    --navy-text: #202c44;
}

.search-section {
    text-align: center;
    margin: 30px auto 10px auto;
    padding: 24px 0px; 
    width: 100%;
    max-width: 100%; 
    box-sizing: border-box;
}

.search-section h2 {
    font-size: 24px;
    font-weight: 400;
    color: #202c44;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
}

.shadetabs {
    padding: 6px;
    margin: 0 auto 24px auto;
    list-style-type: none;
    display: inline-flex; 
    background: rgba(255, 255, 255, 0.4); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(184, 152, 114, 0.2);
    border-radius: 30px; 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 15px rgba(140, 118, 77, 0.05);
    gap: 4px;
    max-width: 100%;
}

.shadetabs li {
    display: inline-block;
}

.shadetabs li a {
    display: block;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: #4a5568;
    border-radius: 24px; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    white-space: nowrap;
}

.shadetabs li a:hover {
    color: #202c44;
    background: rgba(255, 255, 255, 0.3);
}

.shadetabs li a.selected {
    background: linear-gradient(135deg, #847153 0%, #b89872 100%);
    color: #fff;
    font-weight: 400;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04);
    transform: scale(1.02);
}

.tabcontent-container {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(165, 144, 115, 0.4) !important;
    border-radius: 16px;
    padding: 35px 30px !important;
    box-shadow: 0 10px 30px rgba(140, 118, 77, 0.06);
    text-align: left;
    width: 100% !important; 
    max-width: none !important; 
    box-sizing: border-box;
}

.tabcontent-container h3 {
    font-size: 18px;
    font-weight: 400;
    color: #2b2b2b;
    margin-bottom: 25px;
    letter-spacing: 0.3px;
}

.tabcontent-container h3 font {
    color: #bd3b2c !important;
    font-weight: 400;
}

#simple {
    width: 100%;
}

.search-options-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    font-size: 15px;
    color: #202c44;
    font-weight: 500;
    margin-bottom: 25px;
}

.search-options-group label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

.search-options-group label:hover {
    color: #867257;
}

.search-options-group input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #a59073;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    outline: none;
    position: relative;
    transition: all 0.2s ease;
}

.search-options-group input[type="radio"]:checked {
    background: #a59073;
    box-shadow: 0 0 8px rgba(165, 144, 115, 0.5);
    border-color: #66563d;
}

/* 🌟 ปรับปรุง: ใช้ Flexbox คุมแทนการใช้ Absolute */
.search-box-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
    display: flex !important;
    flex-direction: row !important; /* บังคับให้อยู่ในแถวเดียวกันตลอดเวลา */
    align-items: center;
    background: #fdfbf7 !important; 
    border: 1px solid rgba(165, 144, 115, 0.5);
    border-radius: 30px;
    padding: 5px 8px 5px 5px !important; /* เว้นพื้นที่ฝั่งขวาเล็กน้อยเพื่อให้ปุ่มวงกลมดูสมดุล */
    box-shadow: inset 0 2px 4px rgba(140, 118, 77, 0.04); 
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.search-box-wrapper:focus-within {
    border-color: #867257;
    box-shadow: 0 0 15px rgba(165, 144, 115, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* 🌟 ปรับปรุง: ล้างสเปซ Padding ด้านขวาที่เป็น 140px ทิ้ง แล้วปล่อยให้ยืดขยายหลบปุ่มเอง */
.search-box-wrapper input[type="text"] {
    font-family: 'Mitr', sans-serif;
    flex: 1 !important; /* ดันเนื้อหาและยืดหดพื้นที่อัตโนมัติ */
    width: 100% !important;
    padding: 12px 16px 12px 20px !important; /* ลด Padding ด้านขวาลงมาปกติ */
    border: none !important;
    background: #fdfbf7 !important; 
    border-radius: 30px; 
    font-size: 16px;
    color: #2b2b2b;
    outline: none;
    box-sizing: border-box;
    margin: 0 !important;
}

.search-box-wrapper input[type="text"]::placeholder {
    color: #9c938c;
}

/* 🌟 ปรับปรุง: ถอดระบบ Position: Absolute และปรับสัดส่วนสำหรับทัชสกรีน */
.search-btn-premium {
    position: static !important; /* ล้างค่า Absolute เดิมทิ้ง ป้องกันปุ่มปลิว */
    transform: none !important; /* ล้างค่า Translate เดิม */
    width: 44px !important; /* ปรับเพิ่มขนาดเล็กน้อยให้แตะบนมือถือง่ายขึ้น */
    height: 44px !important;
    border-radius: 50%; 
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0;
    border: 1px solid #e4cdad;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"),
        linear-gradient(135deg, #a38d6b 0%, #847153 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px, auto; 
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0 !important; /* 🛡️ ล็อกขนาดปุ่มไอคอนไม่ให้เบี้ยวหรือแบนบนมือถือ */
    margin: 0 !important;
    -webkit-appearance: none !important; /* เคลียร์ดีไซน์เดิมของ Safari iOS */
}

/* รักษาเอฟเฟกต์การกดให้สมูทเหมือนเดิม */
.search-btn-premium:active {
    transform: scale(0.95) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.search-box-wrapper input[type="text"]:-webkit-autofill,
.search-box-wrapper input[type="text"]:-webkit-autofill:hover, 
.search-box-wrapper input[type="text"]:-webkit-autofill:focus,
.search-box-wrapper input[type="text"]:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fdfbf7 inset !important;
    box-shadow: 0 0 0 1000px #fdfbf7 inset !important;
    -webkit-text-fill-color: #2b2b2b !important;
    transition: background-color 5000s ease-in-out 0s;
}

.search-box-wrapper input[type="text"]:focus {
    background: #fdfbf7 !important;
}

.tabcontent-container a {
    color: #867257;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    transition: color 0.2s;
    display: inline-block;
}

.tabcontent-container a:hover {
    color: #202c44;
    text-decoration: underline;
}
/* =======================================================
    FAQ
======================================================= */
/* จัดการกล่องด้านในเมื่อกดเปิด FAQ */
.faq-content-panel {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important; /* เพิ่ม opacity ช่วยซ่อนให้ชัวร์ขึ้น */
    transition: max-height 0.35s ease, opacity 0.35s ease !important;
}

/* บังคับกางกล่องออกเมื่อคลาส active ทำงาน */
.faq-link-wrapper.active .faq-content-panel {
    max-height: 600px !important; /* เพิ่มความสูงเผื่อให้คลุมทุกลิงก์ */
    opacity: 1 !important;
}
.faq-panel-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* ปรับกระชับช่องไฟแถวให้สมดุลสายตา */
    padding: 15px 20px !important;
    background-color: #fafbfc;
}

/* ลิงก์ย่อยด้านใน */
.faq-sub-link {
    display: flex !important;
    align-items: center;
    text-decoration: none !important;
    padding: 8px 0 !important;
    border-bottom: 1px dashed #e2e8f0;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

/* ลบเส้นประส่วนเกินของแถวสุดท้ายในแต่ละกล่อง */
.faq-sub-link:last-child {
    border-bottom: none !important;
}

/* ไอคอนตัวโน้ตดนตรีจิ๋วนำหน้าลิงก์ */
.faq-sub-link .faq-sub-icon {
    font-size: 12px;
    color: #94a3b8;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px; /* ล็อกความกว้างแนวตั้งไอคอนให้ตรงแนวกันเป๊ะ */
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ตัวหนังสือของลิงก์ */
.faq-sub-link .faq-sub-text {
    font-family: 'Mitr', sans-serif;
    font-size: 13.5px;
    color: #475569;
    position: relative;
    padding-bottom: 4px;
    display: inline-block;
    transition: all 0.3s ease;
}

/* เอฟเฟกต์เส้นสีทองวิ่งใต้ข้อความ */
.faq-sub-link .faq-sub-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #b89b74;
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* HOVER EFFECT: ลิงก์ย่อย */
.faq-sub-link:hover {
    border-bottom-color: rgba(184, 155, 116, 0.3);
}

.faq-sub-link:hover .faq-sub-icon {
    color: #b89b74 !important;
    transform: scale(1.2) rotate(10deg);
}

.faq-sub-link:hover .faq-sub-text {
    color: #1e293b !important;
    transform: translateX(5px);
}

.faq-sub-link:hover .faq-sub-text::after {
    width: 100%;
}

/* จัดรูปแบบปุ่มเปิด-ปิด FAQ */
.faq-trigger-btn {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    width: 100% !important;
    padding: 12px 20px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-trigger-btn:hover {
    background-color: #f7f9fc !important;
}

/* จัดรูปแบบชื่อหมวดหมู่ที่ปุ่ม */
.faq-trigger-btn span {
    font-family: 'Mitr', sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    color: #333e4f;
    transition: all 0.3s ease;
}

.faq-trigger-btn:hover span {
    color: #b89b74 !important;
    font-weight: 500;
}

/* จัดรูปแบบไอคอน '+' (และวงกลม) */
.faq-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #f7f9fc;
    color: #94a3b8;
    border-radius: 50%;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.faq-trigger-btn:hover .faq-icon-wrapper {
    background-color: #b89b74 !important;
    color: #ffffff !important;
}

.faq-icon {
    font-size: 13px;
    transition: all 0.3s ease;
}

.logo-wrapper {
    width: 100% !important;
    /* 🛠️ จุดแก้ไขที่ 1: เปลี่ยนมาล็อกความสูงให้กางเท่ากันที่ 110px (หรือ 120px) เพื่อให้กล่องสี่เหลี่ยมกางออกใหญ่เต็มคอลัมน์ */
    height: 110px !important;  
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important; /* รองพื้นขาว */
    border: 1px solid #e2e8f0 !important; /* เส้นขอบเทาบางๆ */
    border-radius: 12px !important;       /* โค้งมนสวยงามรับกับดีไซน์หลัก */
    
    /* 🛠️ จุดแก้ไขที่ 2: ลด Padding ข้างในลงเหลือ 10px เพื่อไม่ให้เบียดพื้นที่รูปภาพ */
    padding: 1px !important;
    
    /* 🚫 เอา aspect-ratio ออก เพื่อไม่ให้มันไปแย่งมิติกับ height ครับ */
    overflow: hidden !important;
    transition: all 0.3s ease;
}

.provider-logo {
    /* 🛠️ จุดแก้ไขที่ 3: สั่งให้รูปโลโก้ขยายกาง 100% เต็มพื้นที่กล่องใหม่ที่ใหญ่ขึ้น */
    width: 100% !important;      
    height: 100% !important;     
    object-fit: contain !important; /* คุมโลโก้ให้ย่อขยายตามสัดส่วนจริง ไม่เบี้ยว */
    max-width: 100% !important;
    max-height: 100% !important;
    transition: transform 0.25s ease;
}

/* 🌟 เติมลูกเล่นตอนเอาเมาส์ชี้ ให้โลโก้ซูมขึ้น 5% แบบนุ่มนวลดูพรีเมียม */
.logo-wrapper:hover .provider-logo {
    transform: scale(1.05);
}
.icon-link-btn:hover {
    border-color: #b89872;  
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(184, 152, 114, 0.1);
}

.icon-link-btn:hover .provider-logo {
    filter: grayscale(0%) contrast(100%); 
}
.icon-link-btn:hover .logo-wrapper {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  border-color: #dcdcdc;
  transform: translateY(-2px);
}

.section-box {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12); 
    border: 1px solid #dcd7ca;
    overflow: hidden;
    width: 100%;
}
.section-title {
    background: linear-gradient(to right, #202c44 0%, #b89872 100%);
    color: #ffffff;
    padding: 14px 20px;
    font-size: 18px; 
    font-weight: 400;
    letter-spacing: 0.5px;
}

.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 24px;
    margin-bottom: 24px;
}

.off-campus-container {
    padding: 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 38px);
}
.lock-banner {
    background-color: #f7f3e8;
    border: 1px dashed #c5b497;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.lock-banner i {
    color: #8a6f3e;
    font-size: 22px; 
    margin-bottom: 8px;
}
.lock-banner h4 {
    font-size: 17px; 
    font-weight: 500;
    color: #111;
}
.lock-banner p {
    font-size: 14px; 
    font-weight: 300;
    color: #666;
    line-height: 1.5;
    margin-top: 6px;
}
.brand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.brand-item {
    background-color: #ffffff;
    border: 1px solid #e2decb;
    border-radius: 6px;
    height: 60px; 
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.brand-item span { 
    font-size: 15px; 
    font-weight: 600; 
}

.e-journals-title {
    background: #ffffff !important;
    color: #333333 !important;
    border-bottom: 1px solid #eae7dc;
}
.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px;
}

.journal-card {
    border-radius: 8px;
    position: relative;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    overflow: hidden; /* ตัดเนื้อหาเลเยอร์ที่ล้นขอบมน */
    aspect-ratio: 7/10; 
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.journal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.35) 100%);
    z-index: 1;
}

.journal-card-link {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100%;
    height: 100%;
    padding: 14px; 
    box-sizing: border-box;
    text-decoration: none !important; 
    position: relative;
    z-index: 2; 
}

.journal-card h5 {
    font-size: 14px; 
    font-weight: 500;
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

.journal-badge {
    align-self: flex-end;
    background-color: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px);
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px; 
    font-weight: 400;
    color: #ffffff;
}

.full-width-box {
    margin-bottom: 24px;
}
.on-campus-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* แบ่ง 2 คอลัมน์เท่ากัน */
    
    /* 🌟 จุดแก้ไขสำคัญ: ปลดล็อกความสูงแถวแบบตายตัว เปลี่ยนเป็นให้ยืดเต็มพื้นที่อัตโนมัติ */
    grid-auto-rows: 1fr !important; /* บังคับให้ทุกแถวมีความสูงเท่ากันและยืดขยายเต็มพื้นที่ที่เหลือ */
    
    /* ดันความสูงของ Grid ทั้งแผงให้สูงเท่ากับกล่อง Naxos ฝั่งซ้าย */
    height: 100% !important; 
    min-height: 400px !important; /* ตั้งค่าความสูงขั้นต่ำเผื่อไว้ */
    
    gap: 15px !important; /* ระยะห่างระหว่างกล่องโลโก้ */
    box-sizing: border-box !important;
}
.icon-link-btn {
    display: block;
    text-decoration: none;
    border: none !important;      
    background: transparent !important; 
    padding: 0 !important;         
    box-shadow: none !important;   
}
.icon-link-btn i {
    color: #bfa15f;
    font-size: 22px; 
}
.icon-link-btn span {
    font-size: 14px; 
    font-weight: 500;
    line-height: 1.3;
}

.guides-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* แบ่ง 2 ช่องซ้ายขวา ช่องละเท่าๆ กัน */
    gap: 12px;
   padding: 24px 60px;
    width: 100%;
    box-sizing: border-box;
}

.guide-book-placeholder {
    position: relative; /* รองรับเผื่อใส่เอฟเฟกต์ */
    aspect-ratio: 3 / 4; /* ล็อกสัดส่วนกล่องเป็นแนวตั้ง 3:4 */
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    overflow: hidden; /* 🌟 สำคัญ: ตัดขอบรูปภาพที่เกินมาให้มนโค้งตามกล่อง */
    display: flex;
}

/* 🌟 เติมสไตล์ชุดนี้เข้าไปเพื่อจัดการรูปภาพข้างในให้ทำงานร่วมกับ aspect-ratio ครับ */
.guide-book-placeholder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 🛡️ บังคับให้รูปขยายเต็มพื้นที่กล่อง 3:4 พอดีเป๊ะ โดยไม่เบี้ยวไม่เพี้ยน */
    display: block;
}
.links-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.link-row {
    background-color: #ffffff;
    border: 1px solid #e5dfd3;
    border-radius: 6px;
    padding: 14px 18px;
    font-size: 15px; 
    font-weight: 500;
    color: #222;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.link-row::after {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px; 
    color: #b5af9e;
}

/* =======================================================
   PERFECT COMPACT GRID (เล็ก สั้น กระชับ และไม่ชิดขอบ)
======================================================= */
/* คอนเทนเนอร์คุมพื้นหลังโทนอุ่น */
.perfect-grid-container {
    background-color: #f7f4eb; 
    padding: 24px;
    border-radius: 8.5px;
}

/* แบ่งเป็น 2 คอลัมน์ซ้ายขวา */
.perfect-card-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px; 
}

/* สไตล์กล่องการ์ดสีขาว */
.journal-perfect-card {
    background: #ffffff;
    border-radius: 18px; 
    padding: 16px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
}

/* จัดเลย์เอาต์ข้างในให้เป็นแถวเดียวกัน (Row) และกึ่งกลางแนวตั้ง */
.journal-perfect-card a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* ชื่อวารสาร ตัวหนาคมชัด สีดำเข้ม */
.perfect-journal-name {
    font-size: 15.5px;
    font-weight: 400;
    color: #111111;
    line-height: 1.3;
    flex: 1;
}

/* ไอคอนลูกศรชี้เฉียงขึ้นสีทองสำหรับปุ่ม Membership */
.arrow-icon {
    font-size: 13px;
    color: #b89b74;
    margin-left: 4px;
}

/* สไตล์ตกแต่งเพิ่มเติม: ขอบทองหรูไล่เฉด */
.journal-perfect-card.gold-premium-border {
    position: relative;
    border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(135deg, #e2c999 0%, #b89b74 50%, #f5e5c9 100%) border-box;
    box-shadow: 0 6px 15px rgba(184, 155, 116, 0.15);
}

/* สไตล์กล่องสีวงกลม (Logos) ฝั่งซ้าย */
.perfect-logo, .perfect-logo-text, .perfect-logo-image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 400;
    color: #ffffff;
    flex-shrink: 0;
    font-family: 'Mitr', sans-serif;
}

/* สีพื้นหลังแต่ละแบรนด์ */
.ebsco-bg { background-color: #1a4f70; font-size: 15px;}
.cc-bg { background-color: #2d4356; font-size: 24px; }
.unt-bg { background-color: #136a3a; font-size: 15px;}
.proquest-bg { background-color: #1c657d; font-size: 15px; }
.trombone-bg { background-color: #2b5494; font-size: 15px; }
.tuba-bg { background-color: #000000; font-size: 15px; }

/* สำหรับข้อความ IMSLP ที่ไม่มีวงกลม */
.perfect-logo-text {
    color: #000000;
    font-weight: 400;
    font-size: 13.5px;
    border-radius: 0;
    width: auto;
    height: auto;
    border-bottom: 2px solid #e2c999;
    padding-bottom: 2px;
}

.perfect-logo-image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

.perfect-logo-image img {
    width: 100% !important;         
    height: 100% !important;        
    object-fit: contain !important; 
}

/* Hover Effect */
.journal-perfect-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.section-note {
    font-family: 'Mitr', sans-serif;
    font-size: 13px;
    color: #333; /* สีเทาซอฟต์ๆ สไตล์ฟุตโน้ต */
    margin-top: 16px; /* เว้นระยะห่างจากตัว Grid ด้านบน */
    padding: 10px 14px;
    background-color: #f8fafc; /* พื้นหลังสีเทาอ่อนมากๆ แยกสัดส่วนชัดเจน */
    border-left: 3px solid #b89b74; /* เพิ่มเส้นสีน้ำตาลทองด้านซ้ายเพื่อความลักชัวรี */
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px; /* ช่องไฟระหว่างไอคอนกับตัวหนังสือ */
    line-height: 1.5;
}

/* ปรับไอคอนข้อมูลในหมายเหตุ */
.section-note i {
    color: #b89b74; /* ไอคอนสีน้ำตาลทอง */
    font-size: 14px;
    flex-shrink: 0;
}
/* =======================================================
   2. RESOURCES LAYOUT CONTAINER & PARTS (Desktop First)
======================================================= */
.resources-layout-container {
    display: grid !important;
    /* 👑 จุดสำคัญ: สั่งแบ่งเป็น 3 คอลัมน์เท่ากัน (1fr 1fr 1fr) */
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 20px !important;
    align-items: stretch !important; /* บังคับให้คอลัมน์ Naxos และแผงโลโก้สูงเท่ากันเป๊ะ */
    width: 100% !important;
    box-sizing: border-box;
    padding: 15px 20px;
}

/* ─── 👈 คอลัมน์ที่ 1: การ์ด NAXOS ─── */
.naxos-card {
    /* 👑 จุดสำคัญ: สั่งให้กินพื้นที่แค่ 1 คอลัมน์แนวตั้ง */
    grid-column: span 1 !important; 
    
    background-color: #f7f5f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
    height: 100% !important; /* ยืดเต็มความสูง */
}

/* ส่วนหัว Naxos */
.naxos-horizontal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(141, 121, 68, 0.2) !important;
    margin-bottom: 15px !important;
}

.naxos-actual-logo {
    max-width: 110px !important;
    height: auto !important;
}

.menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important; /* เพิ่มช่องไฟเมนูให้อ่านง่ายโปร่งตา */
}

.menu-list li a {
    display: block !important;
    font-family: 'Mitr', sans-serif;
    font-size: 13.5px;
    color: #475569;
    text-decoration: none !important;
    padding-bottom: 4px !important;
    border-bottom: 1px dashed rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.menu-list li a:hover {
    color: #8d7944 !important;
    padding-left: 5px !important;
}

/* ─── 👉 คอลัมน์ที่ 2 และ 3: แผง GRID โลโก้ ─── */
.on-campus-grid {
    /* 👑 จุดสำคัญ: บังคับให้กางขยายคลุมพื้นที่แนวตั้งที่เหลือรวม 2 คอลัมน์ */
    grid-column: span 2 !important; 
    
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* ข้างในแบ่งเป็น 2 คอลัมน์ซ้ายขวา */
    grid-auto-rows: 1fr !important; /* 👑 ดึงกล่องสีขาวให้ยืดลงมาข้างล่างแชร์พื้นที่เท่ากันทุกแถว */
    gap: 15px !important;
    height: 100% !important; /* ยืดฐานความสูงลงมาเท่ากับกล่อง Naxos เป๊ะ */
    box-sizing: border-box;
}

/* ปุ่มและกล่องสี่เหลี่ยมขาวครอบโลโก้ด้านใน */
.icon-link-btn {
    display: block !important;
    text-decoration: none !important;
    width: 100% !important;
    height: 100% !important;
}

.logo-wrapper {
    width: 100% !important;
    height: 100% !important; /* บังคับยืดเต็มช่องสี่เหลี่ยมแนวตั้ง */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    aspect-ratio: auto !important; /* 🚫 ล้างค่าล็อกสัดส่วนเดิม */
    transition: all 0.25s ease;
}

.logo-wrapper:hover {
    border-color: #8d7944 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.provider-logo {
    width: 100% !important;
    height: 100% !important;
    max-width: 85% !important; /* ดันขนาดรูปโลโก้ให้กางออกใหญ่เต็มพิกัดของกล่องขาว */
    max-height: 85% !important;
    object-fit: contain !important;
}

.icon-link-btn:hover .provider-logo {
    transform: scale(1.05);
}

/* =======================================================
   3. MAIN FOOTER STYLES (Desktop First)
======================================================= */
.main-footer {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 60px 40px;  
    display: flex;
    justify-content: space-between;
    align-items: flex-start; 
    position: relative;
    z-index: 10;
    box-shadow: none !important;
    box-sizing: border-box;
    margin-top: 20px;
    width: 100%;
}

.main-footer::before {
    content: "";
    position: absolute;
    top: 0;          
    left: 50%;       
    transform: translateX(-50%); 
    width: 95%;      
    height: 1.5px;   
    background: linear-gradient(
        to right, 
        transparent 0%, 
        rgba(165, 144, 115, 0.35) 20%, 
        rgba(165, 144, 115, 0.35) 80%, 
        transparent 100%
    ); 
}

.footer-left-zone {
    max-width: 45%;
    display: flex;
    flex-direction: column;
    gap: 12px; 
}

.footer-title {
    font-family: 'Mitr', sans-serif;
    font-size: 24px; 
    font-weight: 500; 
    color: #1a2538; 
    margin: 0;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 12px; 
}

.footer-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45px; 
    height: 2px; 
    background: #b89872; 
    border-radius: 2px;
}

.footer-address {
    font-family: 'Mitr', sans-serif;
    font-size: 14px; 
    color: #4a5361; 
    line-height: 1.8; 
    font-weight: 300; 
    margin-top: 5px; 
}

.footer-address strong {
    color: #1a2538;
    font-weight: 400; 
    font-size: 15px;
}

.footer-right-zone {
    display: flex;
    align-items: flex-start; 
    gap: 50px; 
}

.footer-map {
    border-radius: 15px; 
    border: none;        
    display: block;      
    box-shadow: 0 4px 15px rgba(165, 144, 115, 0.1); 
}

.social-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    min-width: 260px;
}

.footer-hours-zone {
    font-family: 'Mitr', sans-serif;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.hours-section-title {
    font-family: 'Mitr', sans-serif;
    font-size: 24px;          
    font-weight: 500;         
    color: #1a2538;           
    margin: 0;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 12px; 
    text-align: right;
}

.hours-section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;                  
    width: 45px; 
    height: 2px; 
    background: #b89872;
    border-radius: 2px;
}

.hours-luxury-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 17px;         
}

.hours-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
}

.hours-block .label {
    font-size: 14px;
    color: #4a5361;
    letter-spacing: 1.5px;
    margin-bottom: 2px;
}

.hours-block .value {
    font-size: 14px;
    color: #1a2538;
    font-weight: 300;
}

.hours-block .value small {
    font-size: 14px;
    color: #5c6775;
}

.hours-line-separator {
    display: block;              
    width: 60px;                 
    height: 1px;                 
    background: rgba(165, 144, 115, 0.25); 
    margin: 8px 0 8px auto;
}

.hours-block .gold-status {
    color: #b89872 !important; 
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 2px;
}

.icons-row {
    display: flex;
    gap: 18px; 
}

.icons-row a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(165, 144, 115, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #202c44; 
    font-size: 16px; 
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.icons-row a:hover {
    background: #202c44;
    color: #e4cdad !important; 
    border-color: #202c44;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(32, 44, 68, 0.2);
}

.footer-tag {
    font-family: 'Mitr', sans-serif;
    font-size: 13px; 
    font-weight: 400; 
    color: #847153; 
    letter-spacing: 0.5px;
    margin-top: 2px;
}
/* =======================================================
   4. Other resources
======================================================= */
/* คุม Grid นอกสุด ปรับความกว้างและระยะ Padding ให้สมมาตรพอดีช่องเป๊ะ */
.super-accent-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 32px !important; /* เว้นช่องไฟแนวตั้ง 16px แนวนอนกว้างหน่อย 32px เพื่อความโปร่ง */
    padding: 20px 24px !important; /* บีบ Padding ให้ลึกเข้ามาดูหรูหรามีพื้นที่หายใจ */
    width: 100%;
    box-sizing: border-box;
}

/* ตัวลิงก์หลัก */
.super-link {
    display: flex !important;
    align-items: center;
    text-decoration: none !important;
    padding: 4px 4px !important;
    border-bottom: 1px dashed #e2e8f0; /* มีเส้นประจางๆ กั้นใต้แถวเพิ่มรายละเอียด */
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ไอคอนนำหน้า */
.super-link .super-icon {
    font-size: 18px;
    color: #202c44; /* สีเทาคลีนนิ่งๆ */
    margin-right: 14px;
    display: flex;
    align-items: center;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); /* เอฟเฟกต์ดีดตัวแบบสปริงเบาๆ */
}

/* กล่องตัวอักษร */
.super-link .super-text {
    font-family: 'Mitr', sans-serif;
    font-size: 19px;
    font-weight: 400;
    color: #202c44;
    position: relative;
    padding-bottom: 6px;
    transition: all 0.3s ease; /* รองรับการสไลด์ไปทางขวา */
}

/* 🌟 ไม้ตาย: เส้นใต้สีทองหนา 2px วิ่งชาร์จจากซ้ายไปขวา */
.super-link .super-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #b89b74; /* สีทองลักชัวรี */
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ไอคอนลูกศรชี้ขึ้นเฉียงปิดท้ายแถว */
.super-link .super-arrow {
    font-size: 11px;
    color: #cbd5e1;
    margin-left: auto; /* ดันไปชิดขวาสุดของแต่ละคอลัมน์ */
    opacity: 0; /* ตอนแรกซ่อนไว้ก่อน */
    transform: translate(-5px, 5px); /* เยื้องลงซ้ายเบาๆ */
    transition: all 0.3s ease;
}

/* ─── 🌟 HOVER EFFECTS: ดนตรีแห่งการเคลื่อนไหวเมื่อเมาส์ชี้ ─── */

.super-link:hover {
    border-bottom-color: #b89b74; /* เปลี่ยนเส้นประด้านล่างเป็นสีทอง */
}

/* 1. ไอคอนหมุนเฉียงตัวและขยายขึ้น */
.super-link:hover .super-icon {
    color: #b89b74 !important;
    transform: rotate(15deg) scale(1.15);
}

/* 2. ตัวอักษรขยับเยื้องขวา 6px และเข้มขึ้น */
.super-link:hover .super-text {
    color: #1e293b !important;
    transform: translateX(6px);
}

/* 3. สั่งให้เส้นใต้สีทองวิ่งกางออกเต็ม 100% */
.super-link:hover .super-text::after {
    width: 100%;
}

/* 4. ลูกศรชิดขวาจะค่อยๆ ปรากฏตัวและพุ่งสไลด์ขึ้นด้านบนขวาอย่างสวยงาม */
.super-link:hover .super-arrow {
    opacity: 1;
    color: #b89b74 !important;
    transform: translate(0, 0); /* กลับมาตำแหน่งปกติ */
}

/* 👑 ตกแต่งปุ่ม Off Campus Access ให้ตะโกนความหรูหราตั้งแต่แรกเห็น */
.super-link.special-super {
    border-bottom: 1px solid #f3ece0;
}
.super-link.special-super .super-text {
    color: #b89b74;
    font-weight: 500;
}
.super-link.special-super .super-icon {
    color: #b89b74;
}
.super-link.special-super .super-arrow {
    opacity: 0.4;
    color: #e2d7c7;
    transform: translate(0, 0);
}

/* ─── ควบคุมหน้าจอมือถือ ─── */
@media (max-width: 768px) {
    .super-accent-grid {
        grid-template-columns: 1fr !important; /* ยุบเหลือ 1 คอลัมน์บนจอเล็กเพื่อไม่ให้เบียด */
        gap: 12px !important;
        padding: 15px !important;
    }
    .super-link .super-arrow {
        opacity: 0.7; /* บนมือถือแสดงลูกศรค้างไว้เลยเพราะไม่มีระบบ Hover */
        transform: translate(0, 0);
    }
}
/* =======================================================
   4. MINI BANGSUE LIBRARY PAGE STYLES (MATCHING THEME)
======================================================= */


.jiew-exhibition-wrapper {
    display: flex;
    flex-direction: column;
    gap: 64px;
    margin-top: 20px;
    font-family: 'Mitr', sans-serif;
    background-color: #fffdfb; /* พื้นหลังสีครีมงาช้างอุ่นๆ */
    padding: 15px;
}

/* หัวข้อใหญ่ประจำ Section สไตล์ Luxury Monogram */
.jiew-section-header {
    position: relative;
    margin-bottom: 40px;
    text-align: center;
}

.jiew-section-header h2 {
    font-size: 26px;
    font-weight: 500;
    color: #202c44;
    margin-0;
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 0 20px;
}

.jiew-section-header::before {
    content: "JIEW BANGSUE";
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 48px;
    font-weight: 700;
    color: rgba(184, 152, 114, 0.05); /* ตัวอักษรเงาหรูๆ ด้านหลัง */
    letter-spacing: 8px;
    z-index: 1;
}

.jiew-section-header::after {
    content: "𝄞";
    display: block;
    font-size: 18px;
    color: #b89872;
    margin-top: 5px;
}

/* --- SECTION 1: ประวัติความเป็นมา (Asymmetric Layout) --- */
.jiew-intro-block {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 40px;
    align-items: center;
}

@media (max-width: 991px) {
    .jiew-intro-block { grid-template-columns: 1fr; gap: 24px; }
}

.jiew-glass-quote {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(251, 247, 240, 0.9) 100%);
    border: 1px solid #e5dfd3;
    padding: 35px;
    border-radius: 24px 24px 24px 24px; /* ลบมุมสลับข้างแบบมีสไตล์ */
    box-shadow: 0 10px 30px rgba(184, 152, 114, 0.05);
}

.jiew-vertical-timeline {
    position: relative;
    padding-left: 35px;         /* เว้นระยะห่างด้านซ้ายเพื่อให้เนื้อหาหลบแนววงกลม */
    border-left: none;          /* ลบเส้นประแบบเดิมทิ้ง */
    margin-left: 10px;
}

/* ใช้ ::before ของกล่องใหญ่สร้างเส้นประดิ่งลงมาผ่านกึ่งกลางวงกลมทุกวง */
.jiew-vertical-timeline::before {
    content: "";
    position: absolute;
    left: 10px;                /* ตรึงตำแหน่งแกน X ของเส้นประ */
    top: 6px;                  /* เริ่มต้นเส้นประที่กึ่งกลางของวงกลมวงแรกพอดี */
    bottom: 6px;               /* สิ้นสุดเส้นประที่กึ่งกลางของวงกลมวงสุดท้าย */
    width: 2px;
    border-left: 2px dashed #b89872;
    z-index: 1;                /* ดันเส้นประให้อยู่เลเยอร์ด้านหลังวงกลม */
}

.jiew-v-item {
    position: relative;
    margin-bottom: 30px;
}

.jiew-v-item:last-child { 
    margin-bottom: 0; 
}

/* ปรับแต่งจุดวงกลมให้ซ้อนทับอยู่บนเส้นประพอดีเป๊ะ */
.jiew-v-item::before {
    content: "•";
    position: absolute;
    /* ใช้ทริคการจัดกึ่งกลางสัมบูรณ์ร่วมกับเส้นแนวตั้ง */
    left: -25px;               /* ขยับตำแหน่งซ้าย-ขวา */
    top: 4px;                  /* ขยับตำแหน่งขึ้น-ลงให้ตรงระนาบกับฟอนต์ปี พ.ศ. */
    transform: translateX(-50%); /* สั่งให้จุดกึ่งกลางของวงกลมตรงกับแนวเส้นประพอดี */
    
    background: #202c44;
    color: #fff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 3px solid #fffdfb;  /* ขอบขาวช่วยบังเส้นประที่วิ่งผ่านด้านหลัง */
    box-shadow: 0 0 0 2px #b89872;
    z-index: 2;                 /* ดันวงกลมให้อยู่เหนือเส้นประ */
}
.jiew-v-year {
    font-size: 16px;
    font-weight: 500;
    color: #847153;
}

.jiew-v-text {
    font-size: 13.5px;
    color: #555555;
    margin-top: 4px;
    line-height: 1.5;
}
/* --- SECTION 2: ประวัติหมอจิ๋ว (Editorial Frame & Floating Badge) --- */
.jiew-showcase-card {
    background: #ffffff;
    border: 1px solid #eae5da;
    border-radius: 16px;
    padding: 40px;
    position: relative;
    box-shadow: 0 4px 30px rgba(0,0,0,0.01);
}

/* กรอบซ้อนข้างในเพิ่มความเนี้ยบสไตล์พิพิธภัณฑ์ */
.jiew-inner-frame {
    border: 1px solid rgba(184, 152, 114, 0.3);
    padding: 24px;
    border-radius: 12px;
}

.jiew-split-profile {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    margin-top: 20px;
}

@media (max-width: 991px) {
    .jiew-split-profile { grid-template-columns: 1fr; gap: 30px; }
}

.jiew-bio-badge {
    background: #202c44;
    color: #fffcf5;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 12px;
}

.jiew-vintage-callout {
    font-size: 16px;
    font-weight: 400;
    color: #847153;
    line-height: 1.8;
    border-bottom: 1px dashed #e5dfd3;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

/* ตารางแสดงแบบ List ไร้เส้นขอบข้าง (Minimalist Data Sheet) */
.jiew-sheet-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jiew-sheet-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f3eee3;
    padding-bottom: 8px;
    font-size: 13.5px;
}

.jiew-sheet-label {
    color: #847153;
    font-weight: 400;
	
}

.jiew-sheet-val {
    color: #333333;
    text-align: right;
	font-weight: 300;
	font-size: 15px;
}

/* ชิ้นงานหนังสือแบบผืนผ้าคล้ายสันหนังสือฝังในชั้น (Library Shelf Concept) */
.jiew-shelf-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.jiew-shelf-book {
    background: #fffcf7;
    border-left: 4px solid #b89872;
    border-top: 1px solid #eae5da;
    border-right: 1px solid #eae5da;
    border-bottom: 1px solid #eae5da;
    padding: 10px 12px;
    font-size: 12.5px;
    color: #444444;
    border-radius: 0 6px 6px 0;
    transition: all 0.3s ease;
}

.jiew-shelf-book:hover {
    background: #202c44;
    color: #ffffff;
    border-left-color: #fff0d4;
    transform: scale(1.03);
}

/* --- SECTION 3: ภารกิจและวิสัยทัศน์ (Modern Mosaic Cards) --- */
.jiew-mosaic-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
}


@media (max-width: 768px) {
    .jiew-mosaic-layout { grid-template-columns: 1fr; }
}

.jiew-mosaic-navy {
    background: #202c44;
    color: #ffffff;
    padding: 35px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jiew-mosaic-gold {
    background: #fffdf9;
    border: 1px solid #e5dfd3;
    padding: 35px;
    border-radius: 20px;
    box-shadow: inset 0 0 40px rgba(184,152,114,0.03);
}

/* วงกลมสัญลักษณ์ของผู้ใช้บริการในตอนท้าย */
.jiew-audience-circle-box {
    background: linear-gradient(135deg, #fdfbf7 0%, #f5eee0 100%);
    border: 1px solid #e0d7c4;
    border-radius: 16px;
    padding: 30px;
    margin-top: 32px;
    text-align: center;
}

.jiew-audience-tags-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
}

.jiew-audience-node {
    background: #ffffff;
    border: 1px solid #b89872;
    color: #202c44;
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 13.5px;
    font-weight: 400;
    box-shadow: 0 4px 10px rgba(184,152,114,0.08);
}
.jiew-elegant-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
  
}

.jiew-elegant-li {
    font-size: 14px;
    color: #4f5e74;
    line-height: 1.7;
    position: relative;
    padding-left: 24px;
    text-align: justify;
	font-weight: 300;
}

.jiew-elegant-li::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: 0;
    color: #b89872;
    font-size: 12px;
}
.book-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }

        .tag {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(179, 146, 78, 0.3);
            color: var(--text-dark);
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 0.8rem;
            transition: var(--transition);
        }

        .tag:hover {
            background: var(--primary-gold);
            color: var(--primary-gold);
            border-color: navy;
        }

/* =======================================================
   SECTION: EXECUTIVE & STAFF (LUXURY ROUND PORTRAIT)
======================================================= */

/* การจัดวางการ์ดทีมงานแบบ Grid สมัยใหม่ */
.jiew-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* ตัวกล่องการ์ดบุคลากรแบบ Minimalist Luxury */
.jiew-staff-card {
    background: #ffffff;
    border: 1px solid #eae5da;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    box-shadow: 0 4px 15px rgba(184, 152, 114, 0.03);
}

.jiew-staff-card:hover {
    transform: translateY(-6px);
    border-color: #b89872;
    box-shadow: 0 12px 28px rgba(184, 152, 114, 0.1);
}

/* โซนรูปภาพ ขอบเป็นวงกลมเป๊ะตามรีเควส */
.jiew-avatar-wrapper {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto 20px auto;
}

.jiew-avatar-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* บังคับเป็นวงกลม */
    object-fit: cover;  /* กันรูปภาพเบี้ยวหรือยืด */
    box-shadow: 0 8px 20px rgba(32, 44, 68, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e5dfd3;
}

.jiew-staff-card:hover .jiew-avatar-circle {
    box-shadow: 0 8px 25px rgba(184, 152, 114, 0.25);
    transform: scale(1.02);
}

/* ข้อมูลตัวอักษรประจำตัวบุคลากร */
.jiew-staff-name {
    font-size: 16px;
    font-weight: 500;
    color: #202c44;
    margin: 0 0 6px 0;
    letter-spacing: 0.3px;
}

.jiew-staff-role {
    font-size: 13px;
    font-weight: 300;
    color: #847153; /* สีทองเมทัลลิกดูพรีเมียม */
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ดีไซน์ลิงก์อีเมลแบบเรียบหรู */
.jiew-staff-email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #5d6b82;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 20px;
    background-color: #faf8f4;
    border: 1px solid #eae5da;
    transition: all 0.2s ease;
}

.jiew-staff-email::before {
    content: "♩"; /* เพิ่มสัญลักษณ์ดนตรีจิ๋วนำหน้าอีเมล */
    color: #b89872;
    font-size: 11px;
}

.jiew-staff-email:hover {
    background-color: #202c44;
    color: #ffffff;
    border-color: #202c44;
}
/* =======================================================
   SECTION: LIBRARY SERVICES (LUXURY DASHBOARD Layout)
======================================================= */

.jiew-service-container {
    display: flex;
    flex-direction: column;
    gap: 32px;        /* ลดช่องไฟระหว่างโซนจาก 48px เหลือ 32px */
    font-family: 'Mitr', sans-serif;
    margin-top: 0;    /* เอา margin ด้านบนออกเพื่อให้ชิดหัวข้อขึ้น */
}}

/* =======================================================
   โซนที่ 1: การแมตช์ความสูงให้เท่ากันเป๊ะ (Equal Space Layout)
======================================================= */

.jiew-material-fullwidth {
   background: linear-gradient(180deg, #ffffff 0%, #faf8f5 100%);
    border: 1px solid #eae5da;
    border-radius: 24px;
    
    /* === จุดที่แก้ไขเพื่อปรับ Space === */
    margin-top: 40px;      /* เพิ่มระยะห่างด้านบน เพื่อให้กล่องขยับลงมา ไม่ชิดหัวข้อหลักเกินไป */
    margin-bottom: 56px;   /* เพิ่มระยะห่างด้านล่าง เพื่อดันกล่อง MEMBERSHIP ลงไป ไม่ให้ชิดกันเกินไป */
    padding: 40px 35px 35px 35px; /* ปรับ padding-top เป็น 40px เพื่อให้สเปซหัวข้อภายในกล่องดูโปร่งตาขึ้น */
    
    position: relative;
    overflow: hidden;
}

/* ส่วนหัวข้อหลักภายในกล่อง */
.jiew-mat-header-style {
    text-align: center;
    margin-bottom: 24px;
}
.jiew-mat-subtitle-style {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #b89872;
    letter-spacing: 2px;
    margin-bottom: 6px;
}
.jiew-mat-title-style {
    font-size: 22px;
    font-weight: 500;
    color: #202c44;
    margin: 0;
}

/* กริดแบ่งช่องข้อมูลเป็น 2 ช่องเท่ากัน */
.jiew-mat-glass-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch; /* ให้กล่องซ้ายและขวาสูงเท่ากันเสมอ */
}

@media (max-width: 767px) {
    .jiew-mat-glass-grid {
        grid-template-columns: 1fr;
    }
}

/* การ์ดย่อยภายใน (ถอดสไตล์มาจาก .jiew-glass-item ของฝั่ง Membership) */
.jiew-mat-glass-item {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(234, 229, 218, 0.6);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    transition: all 0.4s ease;
}
.jiew-mat-glass-item:hover {
    border-color: #b89872;
    box-shadow: 0 8px 25px rgba(184, 152, 114, 0.05);
}

/* ป้าย Tag หัวมุมกล่อง ยึดสไตล์เดียวกับ Membership */
.jiew-mat-glass-badge {
    position: absolute;
    top: 0;
    left: 24px;
    transform: translateY(-50%);
    background: navy;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 1px;
}
/* สีป้ายพิเศษสำหรับกรณีเงื่อนไขจำกัดสิทธิ์ */
.jiew-mat-glass-badge.alert {
    background: #b89872;
}

/* หัวข้อภายในการ์ดย่อย */
.jiew-mat-glass-item h5 {
    font-size: 16px;
    font-weight: 600;
    color: #202c44;
    margin: 8px 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.jiew-mat-icon-append {
    font-size: 14px;
    color: #b89872;
}

/* ลิสต์รายการสิ่งพิมพ์ */
.jiew-mat-glass-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.jiew-mat-glass-list li {
    font-size: 14px;
    color: #555555;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.jiew-mat-glass-list li::before {
    content: "•";
    color: #b89872;
    font-weight: bold;
}
/* กล่องฝั่งขวา: การสมัครเป็นสมาชิก */
.jiew-glass-membership {
    background: linear-gradient(180deg, #ffffff 0%, #faf8f5 100%);
    border: 1px solid #eae5da;
    border-radius: 24px;
    padding: 35px; /* ปรับให้แมตช์สเปซพอดีกับฝั่งซ้าย */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
	margin-top: 24px;
}
.jiew-glass-header {
    text-align: center;
    margin-bottom: 30px;
}
.jiew-glass-subtitle {
    font-size: 12px;
    letter-spacing: 2px;
    color: #b89872;
    font-weight: 500;
}
.jiew-glass-title {
    font-size: 22px;
    font-weight: 500;
    color: #202c44;
    margin: 6px 0 0 0;
}
.jiew-glass-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    flex-grow: 1; /* ดันกล่องเนื้อหาด้านในให้แผ่เต็มความสูงเท่าการ์ดฝั่งซ้าย */
	
}
.jiew-glass-item {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(234, 229, 218, 0.6);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    transition: all 0.4s ease;
	font-size: 16px;
	
}
.jiew-glass-item:hover {
    transform: translateY(-5px);
    border-color: #b89872;
    box-shadow: 0 15px 30px rgba(184, 152, 114, 0.08);
}
.jiew-glass-item.visitor {
    background: linear-gradient(135deg, #ffffff 0%, #fff9f0 100%);
    border-color: #eadecc;
}
.jiew-glass-badge {
    font-size: 11px;
    font-weight: 600;
    color: #847153;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.jiew-glass-badge.alert { color: #c62828; }
.jiew-glass-item h5 {
    font-size: 18px;
    font-weight: 500;
    color: #202c44;
    margin: 0 0 10px 0;
}
.jiew-icon-append {
    font-size: 14px;
    color: #b89872;
    margin-left: 4px;
}
.jiew-glass-item p {
    font-size: 15px;
    color: #555555;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}
.jiew-text-note {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    color: #847153;
}

/* =======================================================
   โซนที่ 2: ตารางสิทธิ์การยืม (Executive Tier Cards)
======================================================= */
.jiew-rights-panel {
    background: #ffffff;
    border: 1px solid #eae5da;
    border-radius: 24px;
    padding: 45px;
    box-shadow: 0 10px 30px rgba(184, 152, 114, 0.02);
}
.jiew-rights-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px auto;
}
.jiew-rights-subtitle {
    font-size: 11px;
    letter-spacing: 2px;
    color: #b89872;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}
.jiew-rights-title {
    font-size: 22px;
    font-weight: 500;
    color: #202c44;
    margin: 0 0 12px 0;
}
.jiew-rights-desc {
    font-size: 15px;
    color: #666666;
    margin: 0;
    line-height: 1.6;
    text-align: justify;
}
.jiew-tier-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.jiew-tier-card {
    background: #ffffff;
    border: 1px solid #eae5da;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.jiew-tier-card.featured {
    background: #202c44;
    border-color: #202c44;
    color: #ffffff;
}
.jiew-tier-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(184, 152, 114, 0.12);
    border-color: #b89872;
}
.jiew-tier-card.featured:hover {
    box-shadow: 0 15px 35px rgba(32, 44, 68, 0.2);
}
.jiew-tier-title {
    font-size: 14px;
    font-weight: 500;
    color: #847153;
    letter-spacing: 0.5px;
}
.jiew-tier-card.featured .jiew-tier-title { color: #fff0d4; }
.jiew-tier-limit { margin: 16px 0; }
.jiew-tier-amount {
    font-size: 28px;
    font-weight: 500;
    color: #202c44;
}
.jiew-tier-card.featured .jiew-tier-amount { color: #ffffff; }
.jiew-tier-unit {
    font-size: 14px;
    color: #666666;
    display: block;
    margin-top: 4px;
}
.jiew-tier-card.featured .jiew-tier-unit { color: #cbd5e1; }

/* =======================================================
   โซนที่ 3: ดีไซน์ใหม่พรีเมียมขั้นสุด (Unified Luxury Panel)
======================================================= */
.jiew-panel-unified {
    background: #ffffff;
    border: 1px solid #eae5da;
    border-radius: 32px;
    padding: 45px;
    box-shadow: 0 12px 40px rgba(184, 152, 114, 0.03);
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.jiew-luxury-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}
.jiew-title-decor-line {
    width: 4px;
    height: 22px;
    background: #b89872;
    border-radius: 2px;
}
.jiew-unified-section-title {
    font-size: 22px;
    font-weight: 500;
    color: #202c44;
    margin: 0;
}

/* 3.1 Luxury Timeline Blocks */
.jiew-timeline-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    padding-left: 20px;
}
/* เส้นแนวตั้งเชื่อมโยงไทม์ไลน์เบาๆ */
.jiew-timeline-container::before {
    content: "";
    position: absolute;
    left: 44px;
    top: 30px;
    bottom: 30px;
    width: 1px;
    background: #eae5da;
    z-index: 1;
}
.jiew-timeline-card {
    background: #fffcf9;
    border: 1px solid #f0ebdf;
    border-radius: 16px;
    padding: 20px 24px 20px 75px; /* เปิดช่องซ้ายให้กล่องตัวเลข */
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}
.jiew-timeline-card:hover {
    background: #ffffff;
    border-color: #b89872;
    box-shadow: 0 8px 25px rgba(184, 152, 114, 0.05);
}
.jiew-tl-number-box {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: #ffffff;
    border: 1px solid #b89872;
    color: #b89872;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(184, 152, 114, 0.1);
}
.jiew-timeline-card:hover .jiew-tl-number-box {
    background: #b89872;
    color: #ffffff;
}
.jiew-tl-content h5 {
    font-size: 18px;
    font-weight: 500;
    color: #202c44;
    margin: 0 0 6px 0;
}
.jiew-tl-content p {
    font-size: 16px;
    color: #555555;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

.jiew-panel-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #eae5da 15%, #eae5da 85%, transparent);
}

/* 3.2 Dual-Tone Statement Block (ส่วนค่าปรับ) */
.jiew-penalty-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.jiew-penalty-badge {
    background: rgba(184, 152, 114, 0.12);
    color: #847153;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.jiew-penalty-title {
    font-size: 22px;
    font-weight: 500;
    color: #202c44;
    margin: 0;
}

.jiew-statement-block {
    background: #ffffff;
    border: 1px solid #eae5da;
    border-left: 4px solid #b89872; /* คาดเส้นหนาหรูฝั่งซ้ายนำสายตา */
    border-radius: 4px 16px 16px 4px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(184, 152, 114, 0.02);
}
.jiew-statement-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr; /* แบ่งครึ่งระหว่างราคากับมาตรการ */
}
@media (max-width: 767px) {
    .jiew-statement-grid { grid-template-columns: 1fr; }
}

/* ฝั่งกล่องเน้นตัวเลขราคา */
.jiew-fee-accent-box {
    background: #fffcf7;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-right: 1px solid #f2edd5;
}
@media (max-width: 767px) {
    .jiew-fee-accent-box { border-right: none; border-bottom: 1px solid #f2edd5; }
}
.jiew-fee-icon {
    width: 48px;
    height: 48px;
    background: rgba(184, 152, 114, 0.1);
    color: #b89872;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.jiew-fee-label {
    font-size: 16px;
    color: #666666;
    display: block;
    margin-bottom: 2px;
}
.jiew-fee-price {
    font-size: 32px;
    font-weight: 600;
    color: #b89872;
    margin: 0;
    line-height: 1.2;
}
.jiew-fee-unit-text {
    font-size: 14px;
    font-weight: 400;
    color: #202c44;
    margin-left: 4px;
}

/* ฝั่งรายละเอียดมาตรการ */
.jiew-action-desc-box {
    padding: 30px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.jiew-action-desc-box h5 {
    font-size: 18px;
    font-weight: 500;
    color: #202c44;
    margin: 0 0 8px 0;
}
.jiew-action-desc-box p {
    font-size: 16px;
    color: #555555;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

.jiew-policy-note {
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
    margin: 16px 0 0 0;
    text-align: justify;
    padding-left: 4px;
}
/* =======================================================
   NEW SECTION: ระเบียบการบริจาค (Minimal Luxury Theme)
======================================================= */
.jiew-donation-panel {
    background: linear-gradient(180deg, #ffffff 0%, #faf8f5 100%);
    border: 1px solid #eae5da;
    border-radius: 32px;
    padding: 45px;
    margin-top: 40px;
    margin-bottom: 40px;
    box-shadow: 0 12px 40px rgba(184, 152, 114, 0.03);
}

/* ส่วนหัวของเซกชันบริจาค */
.jiew-donation-header {
    text-align: center;
    margin-bottom: 40px;
}
.jiew-donation-subtitle {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #b89872;
    letter-spacing: 2px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.jiew-donation-title {
    font-size: 22px;
    font-weight: 600;
    color: #202c44;
    margin: 0;
}

/* โครงสร้าง Grid แบ่งฝั่งซ้าย-ขวา */
.jiew-donation-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 991px) {
    .jiew-donation-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* หัวข้อย่อยประจำคอลัมน์ */
.jiew-donation-sub-title {
    font-size: 18px;
    font-weight: 600;
    color: #202c44;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.jiew-donation-sub-title i {
    color: #b89872;
    font-size: 15px;
}

/* ลิสต์ข้อความฝั่งซ้าย (สไตล์นิตยสาร) */
.jiew-donation-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.jiew-donation-list li {
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    text-align: justify;
    position: relative;
    padding-left: 18px;
}
.jiew-donation-list li::before {
    content: "✦";
    color: #b89872;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 11px;
}
.jiew-donation-note {
    display: block;
    font-size: 14px;
    color: #847153;
    margin-top: 4px;
    font-style: italic;
}

/* กล่องข้อมูลติดต่อเจ้าหน้าที่ */
.jiew-donation-contact-box {
    background: #ffffff;
    border: 1px solid #eae5da;
    border-bottom: 3px solid #b89872; /* คาดเส้นทองหนาด้านล่างเพิ่มความหรู */
    border-radius: 12px;
    padding: 20px 24px;
}
.jiew-donation-contact-box h5 {
    font-size: 14.5px;
    font-weight: 600;
    color: #202c44;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.jiew-donation-contact-box h5 i { color: #b89872; }
.jiew-donation-contact-box p {
    font-size: 13.5px;
    color: #666666;
    margin: 0 0 14px 0;
    line-height: 1.5;
}
.jiew-donation-contact-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13.5px;
    color: #444444;
    border-top: 1px dashed #eae5da;
    padding-top: 12px;
}
.jiew-donation-contact-meta i {
    color: #b89872;
    width: 16px;
}
.jiew-donation-contact-meta a {
    color: #202c44;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}
.jiew-donation-contact-meta a:hover { color: #b89872; }

/* ฝั่งขวา: การ์ดช่องทางการบริจาคแบบ Stack */
.jiew-donation-method-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.jiew-method-luxury-card {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(234, 229, 218, 0.6);
    border-radius: 16px;
    padding: 10px;
    display: flex;
    gap: 20px;
    align-items: start;
    transition: all 0.3s ease;
}
.jiew-method-luxury-card:hover {
    border-color: #b89872;
    box-shadow: 0 8px 25px rgba(184, 152, 114, 0.04);
    transform: translateY(-2px);
}

/* กรอบวงกลมใส่ไอคอนสีทองแชมเปญ */
.jiew-method-icon-frame {
    width: 44px;
    height: 44px;
    background: #fffcf7;
    border: 1px solid #eadecc;
    color: #b89872;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.jiew-method-info h5 {
    font-size: 15.5px;
    font-weight: 600;
    color: #202c44;
    margin: 0 0 6px 0;
}
.jiew-method-info p {
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

/* บล็อกแสดงที่อยู่สำหรับจัดส่งทางไปรษณีย์ */
.jiew-donation-address-block {
    background: #fffcf9;
    border: 1px solid #f0ebdf;
    border-radius: 8px;
    padding: 14px;
    font-size: 13px;
    color: #444444;
    line-height: 1.6;
    margin-top: 10px;
}
/* =======================================================
   5. RESPONSIVE BREAKPOINTS (ฉบับปรับปรุง: เพิ่มช่องไฟหน้าจอ & จัดเรียง Layout ใหม่)
======================================================= */

/* ─── LAPTOP & SMALL DESKTOP (max-width: 1024px) ─── */
@media (max-width: 1024px) {
    .two-col-grid {
        grid-template-columns: 1fr; 
        gap: 20px;
    }
    .on-campus-grid {
        grid-template-columns: repeat(3, 1fr); 
    }
}

/* ─── TABLET BREAKPOINT (max-width: 991px) ─── */
@media (max-width: 991px) {
    /* [แก้ไข] บังคับให้โครงสร้างหลักเรียงตัวเป็นแนวตั้ง เพื่อให้ naxos-card และ on-campus-grid แยกชั้นกัน */
    .resources-layout-container {
        display: flex !important;
        flex-direction: column !important;  
        gap: 30px !important; /* เพิ่มระยะห่างระหว่าง Naxos กับ Grid ด้านล่างให้ชัดเจน */
        margin: 20px auto !important;
        padding: 0 20px !important; /* เพิ่ม Padding ไม่ให้ชิดขอบจอ */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* [แก้ไข] ปลดล็อกขนาดเดิม บังคับให้ Naxos Card ขยายเต็ม 100% ของพื้นที่ */
    .naxos-card {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* [แก้ไข] Grid ด้านล่างขยายเต็มหน้าจอ และจัดคอลัมน์อัตโนมัติตามความเหมาะสมเมื่อลงมาต่อท้าย */
    .on-campus-grid {
        max-width: 100% !important;
        width: 100% !important;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 16px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 768px) {
    
    /* ─── 1. โครงสร้างพื้นฐานของหน้าเว็บ ─── */
    body {
        padding: 10px 0; 
        background-image: none !important; 
        background-color: #f7f4eb !important; 
    }
    
    .web-container {
        width: 92%; 
        margin: 0 auto;
        border-radius: 20px; 
        overflow: hidden; 
    }

    /* ─── 2. ส่วน TOP BAR & HAMBURGER ─── */
    .top-bar {
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: nowrap !important; 
        justify-content: space-between !important; 
        align-items: center !important; 
        padding: 12px 24px !important; 
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative; 
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
    }
    
    .top-bar .lang-text {
        font-family: 'Mitr', sans-serif;
        font-size: 14px !important; 
        font-weight: 500;
        color: #ffffff; 
        flex-shrink: 0 !important; 
    }

    .top-bar .hamburger-menu {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        cursor: pointer;
        z-index: 1000;
        flex-shrink: 0 !important;
    }
    
    .top-bar .links {
        display: none !important; 
        flex-direction: column !important; 
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #1e2d42; 
        padding: 15px 0 !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        z-index: 999;
        gap: 12px !important;
    }

    .top-bar .links.show { display: flex !important; }
    .top-bar .links a { font-family: 'Mitr', sans-serif; font-size: 18px !important; color: #ffffff !important; text-decoration: none !important; width: 100%; text-align: center; padding: 8px 0; }
    .hamburger-menu span { display: block; width: 100%; height: 3px; background-color: #ffffff; border-radius: 2px; transition: all 0.3s ease; }
    .hamburger-menu.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .hamburger-menu.active span:nth-child(2) { opacity: 0; }
    .hamburger-menu.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
    
    .main-header {
        height: auto;
        padding: 15px 24px; 
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main-header img, .brand-logo-img { max-width: 100% !important; height: auto !important; max-height: 55px !important; object-fit: contain; }
    
    .content-body {
        padding: 16px 12px !important;
        box-sizing: border-box !important;
    }

    /* ─── 3. จัดการระบบข้อความสากล (ล้างปัญหาตัวหนังสือถ่าง/ล้นกล่อง) ─── */
    p, li, span, a, h1, h2, h3, h4, h5, h6 {
        white-space: normal !important; 
        word-break: break-word !important;   /* เปลี่ยนเป็น break-word เพื่อให้ยอมตัดคำไทยในจุดที่เหมาะสม ไม่ถ่างอักษร */
        overflow-wrap: break-word !important;
        line-height: 1.5 !important;
        letter-spacing: 0 !important;        /* ป้องกันอักษรแยกห่างจากกัน */
        word-spacing: 0 !important;
    }

    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important; 
        white-space: nowrap !important;
    }

   
   /* ─── 4. โครงสร้างหน้าบริการ JIEW (Unified Layout - อัปเกรดขยายเต็มจอ) ─── */
    
    /* คลายกลุ่ม Container และ Grid หลักให้แผ่ขยาย 100% ไม่ยอมให้มี Padding ชั้นนอกมาบีบ */
    .jiew-service-container,
    .jiew-panel-unified,
    .jiew-statement-grid,
    .jiew-mat-glass-grid,
    .jiew-glass-grid,
    .jiew-tier-wrapper,
    .jiew-timeline-container,
    .jiew-donation-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;   /* บังคับดันขยายสุดขอบ */
        gap: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* ล้างการล็อกความกว้างและ Padding ของการ์ดทุกใบในระบบ ให้เบียดชิดขอบจอมากขึ้น */
    .jiew-material-fullwidth,
    .jiew-mat-glass-item,
    .jiew-glass-membership,
    .jiew-glass-item,
    .jiew-rights-panel,
    .jiew-tier-card,
    .jiew-section-rules,
    .jiew-section-fees,
    .jiew-donation-panel,
    .jiew-donation-rules-zone,
    .jiew-donation-methods-zone,
    .jiew-donation-method-cards-stack {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;   /* ป้องกันการสืบทอดค่าลบหรือโดนบีบผอม */
        padding: 16px 12px !important; /* ลด padding ด้านในลง เพื่อเพิ่มพื้นที่ให้ตัวหนังสือวิ่งได้กว้างขึ้น */
        box-sizing: border-box !important;
    }

    /* บล็อกสิทธิ์ยืม (Tier Card) และ บล็อกยืมเกินกำหนด (Fee Accent Box) */
    .jiew-tier-card {
        padding: 20px 12px !important;
        text-align: center !important;
    }
    .jiew-fee-accent-box {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* เส้นคั่น */
    .jiew-panel-divider {
        width: 100% !important;
        margin: 15px 0 !important;
    }

    /* ─── 5. [แก้ไข] แผงระเบียบปฏิบัติ (01, 02, 03) กว้างเต็มพิกัด ─── */
    .jiew-timeline-card {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;    
        text-align: center !important;
        padding: 20px 12px !important;     /* คลายพื้นที่ด้านข้างออกไปชนขอบมากขึ้น */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }

    .jiew-tl-number-box {
        position: relative !important;
        transform: none !important;
        margin-bottom: 12px !important;   
        flex-shrink: 0 !important;
        width: 45px !important;
        height: 45px !important;
        line-height: 45px !important;
    }

    .jiew-tl-content {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .jiew-tl-content h5 {
        margin-top: 5px !important;
        margin-bottom: 8px !important;
        font-size: 16px !important;
        text-align: center !important;
    }
    
    .jiew-tl-content p {
        text-align: center !important; 
    }

  /* ─── 6. [แก้ไขขั้นสุด] ดันการ์ดขาวรับบริจาคด้านในให้แผ่กว้างเต็มพิกัด ─── */
    
    .jiew-donation-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* คลายโซนการ์ดวิธีรับบริจาคให้กว้าง 100% เต็มพื้นที่ */
    .jiew-donation-rules-zone,
    .jiew-donation-methods-zone,
    .jiew-donation-method-cards-stack {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;              /* ล้าง Padding ทุกตัวในชั้นนี้ไม่ให้ดักขอบการ์ดขาว */
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .jiew-donation-methods-zone {
        margin-top: 35px !important; 
    }

    /* 🎯 ตัวการ์ดขาวช่องทางบริจาค: สั่งล้างขอบ ดันขยายพุ่งชนขอบแผงสีขาวใหญ่ */
    .jiew-method-luxury-card {
        display: block !important;       
        float: none !important;
        width: auto !important;              /* เปลี่ยนเป็น auto เพื่อให้ทำงานร่วมกับ margin ติดลบได้สมบูรณ์ */
        
        /* 💡 ดันติดลบฝั่งซ้ายและขวา เพื่อกระชากการ์ดให้ขยายกว้างออกไปจนสุดขอบแผงใหญ่ */
        margin-left: -10px !important;       
        margin-right: -10px !important;      
        
        margin-top: 0 !important;
        margin-bottom: 20px !important;
        background: #ffffff !important;
        
        /* ใส่ Padding ด้านในของการ์ดขาว เพื่อให้ข้อความด้านในมีระยะห่างจากขอบการ์ดอย่างสวยงาม */
        padding: 24px 20px !important;   
        border-radius: 12px !important;      /* รักษามุมมนของการ์ดไว้เพื่อความพรีเมียม */
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03) !important;
        box-sizing: border-box !important;
    }

    .jiew-method-info {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* บังคับข้อความชิดซ้าย จัดระเบียบระยะอักษรไทย */
    .jiew-donation-grid *, 
    .jiew-donation-list li,
    .jiew-method-info p,
    .jiew-donation-address-block {
        text-align: left !important;
        text-align-last: left !important;
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
    }

    /* จัดการระยะรายการระเบียบการบริจาค (ถ้ามี) */
    .jiew-donation-list {
        padding-left: 20px !important;   
        margin: 15px 0 !important;
    }
    .jiew-donation-list li {
        margin-bottom: 14px !important;
        line-height: 1.6 !important;
    }

    /* จัดไอคอนตรงกลาง */
    .jiew-method-icon-frame {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto 15px auto !important;
    }
    
    .jiew-method-info h5 {
        text-align: center !important; 
        margin-bottom: 12px !important;
        font-size: 18px !important;
    }

    /* 🎯 กล่องสีเทาที่อยู่ไปรษณีย์ด้านใน ยืดให้แผ่กว้างเต็มพื้นที่ข้างในการ์ดขาว */
    .jiew-donation-address-block {
        background-color: rgba(0, 0, 0, 0.04) !important;
        padding: 16px 14px !important;
        border-radius: 8px !important;
        margin-top: 14px !important;
        line-height: 1.6 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;   
        box-sizing: border-box !important;
    }
    /* ─── 7. ส่วนอื่นๆ (Search & UI ของระบบดั้งเดิม) ─── */
    .search-box-wrapper { flex-direction: column !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; gap: 12px !important; height: auto !important; }
    .search-options-group { gap: 16px; font-size: 14px; margin-bottom: 20px; }
    .search-box-wrapper input[type="text"] { font-size: 14.5px !important; padding: 10px 12px 10px 16px !important; }
    .search-btn-premium { width: 40px !important; height: 40px !important; background-size: 18px, auto; }
    .search-container { padding: 4px 4px 4px 12px; width: 100% !important; }
    .search-input { font-size: 14px; }
    .search-btn { padding: 8px 14px; font-size: 13px; }
    .search-btn span { display: none; }
    .journal-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; padding: 12px; gap: 12px !important; }
    .on-campus-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; gap: 12px !important; padding: 14px 0; width: 100% !important; box-sizing: border-box !important; }
    .logo-wrapper { height: auto !important; padding: 8px 12px !important; }
    .main-footer { flex-direction: column; align-items: center; text-align: center; gap: 45px; padding: 40px 24px; }
    .footer-left-zone { max-width: 100%; align-items: center; }
    .footer-title::after { left: 50%; transform: translateX(-50%); }
    .footer-right-zone { width: 100%; flex-direction: column; align-items: center; gap: 35px; }
    .footer-map { width: 100%; max-width: 100%; }
    .social-container { align-items: center; width: 100%; min-width: unset; }
    .footer-hours-zone { align-items: center; }
    .hours-section-title { text-align: center; }
    .hours-section-title::after { right: 50%; transform: translateX(50%); }
    .hours-block { align-items: center; }
    .hours-line-separator { margin: 8px auto; }
    .icons-row { justify-content: center; }
    .section-note { font-size: 11.5px; padding: 8px 12px; margin-top: 12px; }
    .super-link .super-arrow { opacity: 0.7; transform: translate(0, 0); }

}
/* ─── EXTRA SMALL MOBILE BREAKPOINT (max-width: 480px) ─── */
@media (max-width: 480px) {
    /* [แก้ไข] บนจอมือถือเล็กมาก บังคับให้ทุก Layout ไหลเป็น 1 คอลัมน์เต็ม 100% ทั้งหมด เพื่อความสบายตา */
    .brand-grid, 
    .journal-grid, 
    .on-campus-grid, 
    .guides-grid,
    .perfect-card-grid-2 {
        grid-template-columns: 1fr !important; 
    }
    .search-options-group {
        gap: 12px;
        flex-direction: column; 
        align-items: flex-start;
    }
}