/* [START MODIFICATION 1.1 & 1.2: Mobile-Only Layout] 
   ลบ @media queries สำหรับจอใหญ่ (1024px, 768px)
   และบังคับใช้สไตล์แบบ Mobile (1-column grid) เป็นค่าเริ่มต้น
*/
:root{--navy-dark:#0A1128;--navy-medium:#1C2541;--navy-light:#3A506B;--orange-primary:#FF6B35;--red-accent:#D72638;--orange-bright:#FF8C42;--cyan-accent:#22d3ee;--gray-dark:#778DA9;--gray-medium:#A9B4C2;--gray-light:#E0E1DD;--white:#FFFFFF;--success:#10b981;--glass-bg:rgba(28,37,65,0.85);--glass-border:rgba(255,255,255,0.1);--primary-color:var(--orange-primary);--text-primary:var(--white);--text-secondary:var(--gray-medium);--bg-gradient:linear-gradient(135deg,#0A1128 0%,#1C2541 50%,#3A506B 100%);--gradient-primary:linear-gradient(135deg,var(--orange-primary),var(--red-accent));--gradient-card:linear-gradient(135deg,rgba(28,37,65,0.7),rgba(58,80,107,0.4));--gradient-card-hover:linear-gradient(135deg,rgba(58,80,107,0.6),rgba(28,37,65,0.8));--gradient-menu:linear-gradient(135deg,rgba(28,37,65,0.95),rgba(10,17,40,0.95));--ff-primary:'Noto Sans Thai',sans-serif;--fs-1:32px;--fs-2:26px;--fs-3:22px;--fs-4:20px;--fs-5:18px;--fs-6:16px;--fs-7:14px;--fs-8:12px;--fw-300:300;--fw-400:400;--fw-500:500;--fw-600:600;--fw-700:700;--glass-shadow:0 8px 32px rgba(0,0,0,0.3);--glass-shadow-hover:0 16px 48px rgba(0,0,0,0.4);--transition-1:0.3s cubic-bezier(0.25,0.1,0.25,1);--transition-smooth:0.5s cubic-bezier(0.23,1,0.32,1);--border-radius-md:16px;--border-radius-lg:24px;--bg:var(--navy-dark);--accent:var(--primary-color)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}a{text-decoration:none}li{list-style:none}img,ion-icon,a,button,time,span{display:block}button{font:inherit;background:none;border:none;text-align:left;cursor:pointer}html{font-family:var(--ff-primary);font-size:16px;scroll-behavior:smooth}body{background:var(--bg-gradient);color:var(--text-primary);min-height:100vh;overflow-x:hidden;line-height:1.7;transition:background .4s ease,color .4s ease;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;padding-bottom:80px}body.light-theme{--navy-dark:#F0F4F8;--navy-medium:#FFFFFF;--navy-light:#E8EDF2;--gray-dark:#5A6570;--gray-medium:#8A939E;--gray-light:#CBD2D9;--white:#1A202C;--glass-bg:rgba(255,255,255,0.9);--glass-border:rgba(0,0,0,0.08);--text-primary:#0A1128;--text-secondary:#3A506B;--bg-gradient:linear-gradient(135deg,#F0F4F8 0%,#FFFFFF 50%,#E8EDF2 100%);--gradient-card:linear-gradient(135deg,rgba(255,255,255,0.8),rgba(232,237,242,0.6));--gradient-card-hover:linear-gradient(135deg,rgba(232,237,242,0.8),rgba(255,255,255,0.9));--gradient-menu:linear-gradient(135deg,rgba(255,255,255,0.95),rgba(240,244,248,0.95));--glass-shadow:0 8px 32px rgba(10,17,40,0.12);--glass-shadow-hover:0 16px 48px rgba(10,17,40,0.18);--accent:var(--primary-color);--gradient-primary:linear-gradient(135deg,#FF6B35,#D72638)}body.light-theme .action-btn,body.light-theme .learn-more-btn,body.light-theme .retry-btn,body.light-theme #menu-popup .sitemap-close-btn,body.light-theme #menu-popup .menu-panel-back-btn,body.light-theme .mini-browser-close-btn{background:var(--gradient-primary);color:white!important}body.light-theme .mini-browser-close-btn ion-icon{color:white}body.light-theme #menu-popup{background:var(--gradient-menu)}body{background-attachment:fixed}::-webkit-scrollbar{display:none}*{-ms-overflow-style:none;scrollbar-width:none}.scroll-header{position:fixed;top:0;left:0;width:100%;padding:10px 15px;display:flex;justify-content:space-between;align-items:center;background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--glass-border);box-shadow:var(--glass-shadow);z-index:1001;border-radius:0 0 var(--border-radius-lg) var(--border-radius-lg);transition:transform .3s ease-out}.scroll-header .header-profile{display:flex;align-items:center;gap:15px}.scroll-header .avatar-box img{width:45px;height:45px;border-radius:14px}.scroll-header .info-content .name{font-size:var(--fs-5);margin-bottom:2px;font-weight:var(--fw-700)}.scroll-header .info-content .title{font-size:10px;padding:2px 8px;font-weight:var(--fw-400)}.header-actions{display:flex;align-items:center;gap:10px}.header-actions .action-btn{color:var(--white);font-size:24px;padding:5px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--gradient-primary);transition:all .3s ease}.header-actions .action-btn:hover{filter:brightness(1.1);transform:scale(1.05)}.header-actions .action-btn[data-menu-btn]{width:auto;padding:8px 14px;gap:8px}.header-actions .action-btn[data-menu-btn]::after{content:"Menu";font-size:var(--fs-6);font-weight:var(--fw-500);color:var(--white)}

/* [FIX 2] แก้ไขสีฟอนต์ปุ่ม Menu ใน Light theme */
body.light-theme .header-actions .action-btn,
body.light-theme .header-actions .action-btn[data-menu-btn]::after {
    color: var(--white) !important;
}

.sidebar{margin-bottom:20px;max-height:120px;overflow:hidden;transition:max-height .8s cubic-bezier(0.23,1,0.32,1);background:var(--gradient-card);border:1px solid var(--glass-border);border-radius:var(--border-radius-lg);padding:20px;z-index:1;position:relative;cursor:pointer;backdrop-filter:blur(15px) saturate(160%);-webkit-backdrop-filter:blur(15px) saturate(160%)}
/* [FIX 3] (CSS part) ตรึง Sidebar เมื่อเล่น */
.sidebar.sticky-player {
  position: sticky;
  top: 70px; /* ควรเท่ากับ padding-top ของ main content (70px จาก index.html) */
  /* z-index: 1005; (ถูกตั้งค่าโดย main.js) */
}
.sidebar.active{max-height:700px}.sidebar-info{position:relative;display:flex;justify-content:flex-start;align-items:center;gap:15px}.avatar-box{border-radius:20px;overflow:hidden}.avatar-box img,.sidebar-icon{width:80px;height:80px;object-fit:cover}.sidebar-icon{font-size:40px;color:var(--primary-color);display:flex;align-items:center;justify-content:center;border-radius:20px;background:var(--gradient-card-hover)}.info-content .name{color:var(--text-primary);font-size:var(--fs-3);font-weight:var(--fw-700);margin-bottom:10px}.info-content .title{color:var(--primary-color);background:var(--gradient-card-hover);font-size:var(--fs-8);font-weight:var(--fw-500);width:max-content;padding:4px 12px;border-radius:8px}.info_more-btn{position:absolute;top:-15px;right:-15px;border-radius:0 var(--border-radius-md);font-size:var(--fs-8);color:var(--primary-color);background:var(--gradient-card);padding:10px 12px;box-shadow:var(--glass-shadow);transition:var(--transition-1);display:flex;align-items:center;gap:5px}.info_more-btn:hover{background:var(--gradient-card-hover)}.info_more-btn ion-icon{font-size:16px;transition:transform var(--transition-1)}.sidebar.active .info_more-btn ion-icon{transform:rotate(180deg)}.sidebar-info_more{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s ease}.sidebar.active .sidebar-info_more{opacity:1;visibility:visible}.sidebar-tabs{display:flex;border-bottom:1px solid var(--glass-border);margin-bottom:15px}.sidebar-tab-btn{flex:1;text-align:center;padding:10px;color:var(--text-secondary);border-bottom:3px solid transparent;transition:var(--transition-1);position:relative;display:flex;align:items:center;justify-content:center;gap:8px}.sidebar-tab-btn.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.sidebar-tab-content{display:none}.sidebar-tab-content.active{display:block}.content-list{list-style:none;padding:0;margin:0}.content-item{border-bottom:1px solid var(--glass-border)}.content-item:last-child{border-bottom:none}.content-link{display:flex;align-items:center;justify-content:space-between;padding:12px 10px;color:var(--text-primary);transition:background-color .2s,color .2s;font-size:var(--fs-6)}.content-link:hover{background:var(--gradient-card-hover);color:var(--primary-color)}.content-link .content-link-main{display:flex;align-items:center;gap:12px}.content-link ion-icon{font-size:18px}.content-link .chevron-icon{color:var(--text-secondary);transition:color .2s}.content-link:hover .chevron-icon{color:var(--primary-color)}.sidebar-actions{display:flex;justify-content:flex-end;align-items:center;gap:15px;padding-top:10px;margin-top:15px;border-top:1px solid var(--glass-border)}.action-btn{color:var(--gray-medium);font-size:20px;transition:color .2s ease;display:flex;align-items:center;gap:8px;background:var(--gradient-card);padding:8px 12px;border-radius:8px;border:1px solid var(--glass-border)}.action-btn:hover{color:var(--primary-color);background:var(--gradient-card-hover)}.sidebar-actions .action-btn span{font-size:var(--fs-7)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(10,14,26,.8);backdrop-filter:blur(15px);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;visibility:hidden;transition:opacity .3s ease}.modal.active{opacity:1;visibility:visible}.modal-content{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--border-radius-lg);padding:25px;max-width:90%;width:400px;max-height:80vh;overflow-y:auto;transform:translateY(-20px);transition:transform .3s ease .1s;backdrop-filter:blur(25px) saturate(180%)}.modal.active .modal-content{transform:translateY(0)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--glass-border)}.modal-header h3{color:var(--primary-color);font-size:var(--fs-4);margin:0}.modal-close{background:none;border:none;color:var(--text-secondary);font-size:24px;cursor:pointer;padding:5px;transition:color .3s ease}.modal-close:hover{color:var(--primary-color)}.share-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;background:var(--gradient-primary);color:var(--white);border-radius:var(--border-radius-md);font-weight:var(--fw-600);transition:transform .2s ease;width:100%}.share-btn:hover{transform:translateY(-2px)}.h2,.h3,.h4,.h5{color:var(--text-primary);text-transform:capitalize}.h2{font-size:var(--fs-1);margin-bottom:20px;font-weight:var(--fw-700)}.article-title{position:relative;padding-bottom:15px;margin-bottom:25px;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:var(--fs-1);font-weight:var(--fw-700)}.article-title::after{content:"";position:absolute;bottom:0;left:0;width:40px;height:3px;background:var(--gradient-primary);border-radius:3px}
/* [FIX SEMANTIC] .page-container (จาก index.html) */
.page-container {
    margin: 15px;
    padding-top: 70px;
}
.main-content{position:relative;overflow:hidden}
article{display:none;opacity:0;animation:fadeIn .5s ease-out forwards}article.active{display:block}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tab-nav{display:flex;border-bottom:1px solid var(--glass-border);margin-bottom:25px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-nav::-webkit-scrollbar{display:none}.tab-btn{color:var(--text-secondary);font-size:var(--fs-6);font-weight:var(--fw-500);padding:10px 15px;border-bottom:3px solid transparent;transition:var(--transition-1);flex-shrink:0;text-align:center;white-space:nowrap}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.tab-content{display:none}.tab-content.active{display:block;animation:fadeIn .4s ease-out}.part-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:25px}.part-card{background:var(--gradient-card);border:1px solid var(--glass-border);border-radius:var(--border-radius-md);padding:25px;transition:transform .3s,box-shadow .3s;box-shadow:var(--glass-shadow);display:flex;flex-direction:column;min-height:280px;position:relative;overflow:hidden;backdrop-filter:blur(15px) saturate(160%)}.part-card:hover{box-shadow:var(--glass-shadow-hover);transform:translateY(-5px);background:var(--gradient-card-hover)}.part-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary)}.part-icon{font-size:32px;color:var(--primary-color);margin-bottom:15px}.part-title{font-size:var(--fs-4);font-weight:var(--fw-700);margin-bottom:15px;color:var(--text-primary);line-height:1.3}.part-description{font-size:var(--fs-6);color:var(--text-secondary);line-height:1.6;margin-bottom:20px}.learn-more-btn{display:inline-flex;align-items:center;gap:8px;color:var(--primary-color);font-weight:var(--fw-600);font-size:var(--fs-6);padding:10px 20px;background:var(--gradient-card-hover);border-radius:8px;transition:all .3s ease;margin-top:auto;align-self:flex-start;border:1px solid var(--glass-border)}.learn-more-btn:hover{background:var(--gradient-primary);color:var(--white);transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,107,53,.3)}.horizontal-scroll-container{position:relative;margin:20px 0}.horizontal-scroll-grid{display:grid;grid-auto-flow:column;grid-auto-columns:85%;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:10px 5px 20px;scroll-behavior:smooth}#footer-container .horizontal-scroll-grid{grid-auto-columns:280px}.horizontal-scroll-grid::-webkit-scrollbar{display:none}.horizontal-scroll-grid>*{scroll-snap-align:start}.horizontal-scroll-grid .part-card{min-height:350px}.faq-accordion{display:flex;flex-direction:column;gap:15px}.faq-item{background:var(--gradient-card);border-radius:var(--border-radius-md);border:1px solid var(--glass-border);transition:background-color var(--transition-1);backdrop-filter:blur(15px) saturate(160%)}.faq-item[open]{background:var(--gradient-card-hover)}.faq-question{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;font-size:var(--fs-6);font-weight:var(--fw-600);color:var(--text-primary);cursor:pointer;list-style:none}.faq-question::-webkit-details-marker{display:none}.faq-question::after{content:'+';font-size:24px;color:var(--primary-color);transition:transform .3s ease}.faq-item[open] .faq-question::after{content:'−'}.faq-answer{padding:0 20px 20px;color:var(--text-secondary);font-size:var(--fs-6);line-height:1.7}.marquee{display:flex;overflow:hidden;user-select:none;gap:2rem;margin:10px 0}.marquee-content{flex-shrink:0;display:flex;justify-content:space-around;min-width:100%;gap:2rem;animation:scroll 30s linear infinite}@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 2rem))}}.key-figures-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin-top:25px}.figure-card{background:var(--gradient-card);border-radius:var(--border-radius-md);padding:25px 15px;text-align:center;border:1px solid var(--glass-border);transition:var(--transition-1);backdrop-filter:blur(15px) saturate(160%)}.figure-card:hover{transform:translateY(-3px);box-shadow:var(--glass-shadow)}.figure-number{font-size:48px;font-weight:var(--fw-700);color:var(--primary-color);margin-bottom:10px;line-height:1}.figure-label{font-size:var(--fs-7);color:var(--text-secondary);font-weight:var(--fw-500)}.loading-content,.component-loading,.error-content,.component-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--text-secondary);min-height:400px;text-align:center}.loading-spinner{width:40px;height:40px;border:4px solid var(--navy-light);border-left-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{to{transform:rotate(360deg)}}.error-icon{font-size:48px;color:var(--red-accent);margin-bottom:15px}.retry-btn{margin-top:15px;padding:10px 20px;background:var(--gradient-primary);color:white;border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease}.retry-btn:hover{transform:translateY(-2px)}#popup-overlay,#mini-browser-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(10,14,26,.6);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);opacity:0;visibility:hidden;transition:opacity .4s ease;z-index:1002}#popup-overlay.active,#mini-browser-overlay.active{opacity:1;visibility:visible}#mini-browser-panel{position:fixed;bottom:0;left:0;width:100%;height:90vh;background:var(--navy-medium);z-index:1008;border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0;transform:translateY(100%);transition:transform .5s cubic-bezier(0.25,1,0.5,1);display:flex;flex-direction:column;overflow:hidden;border-top:1px solid var(--glass-border);backdrop-filter:blur(25px) saturate(180%)}body.light-theme #mini-browser-panel{background:var(--navy-light)}#mini-browser-panel.visible{transform:translateY(0)}.mini-browser-header{display:flex;align-items:center;padding:12px 15px;border-bottom:1px solid var(--glass-border);flex-shrink:0;gap:15px}.mini-browser-icon-container{width:48px;height:48px;border-radius:12px;flex-shrink:0;background-color:var(--gradient-card-hover);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--primary-color)}.mini-browser-meta{flex-grow:1;min-width:0}.mini-browser-title{font-size:var(--fs-6);font-weight:var(--fw-700);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-browser-description{font-size:var(--fs-8);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-browser-close-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--gradient-card-hover);color:var(--text-primary);border-radius:10px;font-size:var(--fs-7);flex-shrink:0;transition:background-color .2s ease}.mini-browser-close-btn:hover{background:var(--navy-light)}.mini-browser-content{flex-grow:1;position:relative}#mini-browser-iframe{width:100%;height:100%;border:none}#site-footer{display:none}.sitemap-panel-wrapper{display:flex;width:200%;height:100%;transition:transform .4s cubic-bezier(0.25,0.1,0.25,1)}.sitemap-panel{width:50%;flex-shrink:0;display:flex;flex-direction:column;height:100%}.sitemap-container{max-width:1200px;margin:0 auto;width:100%;padding:20px 15px;overflow-y:auto;flex-grow:1}.sitemap-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-inline:5px}.sitemap-title{font-size:var(--fs-4)!important;color:var(--primary-color);text-align:left;display:flex;align-items:center;gap:10px;margin-bottom:0;font-weight:var(--fw-700)}.sitemap-control-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--gradient-card);color:var(--text-primary);border-radius:10px;font-size:var(--fs-7);transition:background-color .2s ease;border:1px solid var(--glass-border)}.sitemap-control-btn:hover{background:var(--gradient-card-hover)}.sitemap-control-btn ion-icon{font-size:18px}

/* [MOD 3.1] แก้ไข sitemap-grid (ใน menu) ให้เป็น horizontal scroll */
.sitemap-grid.horizontal-scroll-grid {
    display: grid;
    grid-auto-flow: column;
    /* กำหนดขนาดคอลัมน์ให้เล็กลงเพื่อให้เลื่อนได้ */
    grid-auto-columns: 48%; /* แสดงทีละ 2 รายการ (บวก gap) */
    gap: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 10px 0 20px;
    /* ซ่อน scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sitemap-grid.horizontal-scroll-grid::-webkit-scrollbar {
    display: none;
}
.sitemap-grid.horizontal-scroll-grid .sitemap-card {
    scroll-snap-align: start;
    min-width: 140px; /* กำหนดความกว้างขั้นต่ำ */
    min-height: 100px;
}
/* ใช้ sitemap-grid เดิมสำหรับ footer */
.sitemap-grid:not(.horizontal-scroll-grid) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 10px 5px;
}
/* ----- จบ MOD 3.1 ----- */

.sitemap-card{background:var(--gradient-card);border-radius:var(--border-radius-md);padding:15px;transition:var(--transition-1);border:1px solid var(--glass-border);cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;min-height:100px;backdrop-filter:blur(15px) saturate(160%)}.sitemap-card:hover{transform:translateY(-3px);box-shadow:var(--glass-shadow);background:var(--gradient-card-hover)}.sitemap-card-content{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.sitemap-icon{font-size:32px;color:var(--primary-color);margin:0}.sitemap-card h5{font-size:var(--fs-7);color:var(--text-primary);margin:0;font-weight:var(--fw-600);line-height:1.3}.sitemap-actions{padding:15px 5px}.sitemap-action-item{display:flex;align-items:center;justify-content:space-between;color:var(--text-primary);font-size:var(--fs-6);padding:12px 10px;width:100%;background:var(--gradient-card);border:none;cursor:pointer;transition:all .3s ease;border-radius:8px;margin-bottom:8px}.sitemap-action-item:last-child{border-bottom:none}.sitemap-action-content{display:flex;align-items:center;gap:12px;flex:1}.sitemap-action-item ion-icon{color:var(--primary-color);font-size:20px;min-width:24px}.action-chevron{color:var(--text-secondary);font-size:16px;margin-left:auto}.sitemap-action-item:hover{background:var(--gradient-card-hover);color:var(--primary-color)}.sitemap-action-item:hover .action-chevron{color:var(--primary-color)}.sitemap-secondary-content{padding:0 15px;color:var(--text-secondary)}.theme-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.theme-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:15px 10px;border:1px solid var(--glass-border);border-radius:var(--border-radius-md);background:var(--gradient-card);transition:all .3s ease;cursor:pointer;backdrop-filter:blur(15px) saturate(160%)}.theme-btn:hover{background:var(--gradient-card-hover);transform:translateY(-2px)}.theme-btn ion-icon{font-size:24px}.navbar{position:fixed;bottom:0;left:0;width:100%;background:var(--gradient-menu);backdrop-filter:blur(25px) saturate(180%);border-top:1px solid var(--glass-border);border-radius:20px 20px 0 0;box-shadow:0 -5px 20px rgba(0,0,0,.25);z-index:1006;padding:5px 0}.navbar-list{display:flex;justify-content:space-around;align-items:center}.navbar-link{color:var(--gray-medium);padding:8px 10px;transition:var(--transition-1);border-radius:12px;font-size:var(--fs-7)}.navbar-link ion-icon{font-size:24px}.navbar-link span{display:none}.navbar-link:hover{color:var(--text-primary)}.navbar-link.active{color:var(--primary-color)}#footer-container main2{display:block;padding-left:15px;padding-bottom:20px;padding-right:15px;box-sizing:border-box}.custom-separator{height:1px;background:var(--glass-border);margin:20px 0}.custom-part-card{flex:0 0 280px;scroll-snap-align:start}.custom-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.custom-part-title{margin:0;font-size:20px;font-weight:600;color:var(--text-primary)}.custom-part-description{color:var(--text-secondary);font-size:14px;margin-bottom:15px;line-height:1.5}.custom-sitemap-nav ul{list-style:none;padding:0;margin:0}.custom-sitemap-nav li a{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 0;border-bottom:1px solid var(--glass-border);color:var(--text-primary);transition:color .2s}.custom-sitemap-nav li:last-child a{border-bottom:none}.custom-sitemap-nav a:hover{color:var(--primary-color)}.custom-sitemap-nav a:hover ion-icon{color:var(--primary-color)}.sitemap-link-content{display:flex;align-items:center;gap:8px}.custom-sitemap-nav .item-arrow{font-size:16px;color:var(--text-secondary);margin-left:10px}body:not(.light-theme) .h2{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.sitemap-search-bar{position:relative;display:flex;margin:20px 0;width:100%}#sitemap-search-input{width:100%;background:var(--navy-dark);border:1px solid var(--glass-border);border-radius:10px;padding:12px 45px 12px 15px;color:var(--text-primary);font-size:var(--fs-6);transition:all var(--transition-1)}body.light-theme #sitemap-search-input{background:var(--navy-light)}#sitemap-search-input::placeholder{color:var(--text-secondary)}#sitemap-search-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 40%,transparent);outline:none}.sitemap-search-bar button{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text-secondary);font-size:20px;cursor:pointer;padding:8px;border-radius:8px;transition:all var(--transition-1)}.sitemap-search-bar button:hover{color:var(--primary-color);background:var(--gradient-card-hover)}.horizontal-scroll-container.with-padding{padding:0 15px;margin:20px -15px}.horizontal-scroll-container.with-padding .horizontal-scroll-grid{padding-right:15px;padding-left:15px}.sidebar-tab-content ul{padding:0;margin:0;list-style:none}.sitemap-secondary-header-content{display:flex;align-items:center;gap:10px;color:var(--primary-color)}.sitemap-secondary-header-content ion-icon{font-size:24px}body.popup-open::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(10,14,26,.6);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);z-index:1003;pointer-events:none}.lang-btn{background:var(--gradient-card-hover);color:var(--text-primary);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:15px;border-radius:8px;text-align:left;width:100%}.lang-btn.active{background:var(--gradient-primary);color:var(--white)}.lang-btn div:last-child{font-size:.9em;opacity:.9}

/* [MODIFICATION 1.1] Apply mobile grid styles by default */
.insights-grid{
    display:grid;
    /* grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); */
    grid-template-columns: 1fr; /* Force 1 column */
    gap:20px;
    margin-bottom:20px
}
.insight-card{
    background:var(--gradient-card);
    border-radius:var(--border-radius-md);
    overflow:hidden;
    border:1px solid var(--glass-border);
    transition:all var(--transition-1);
    cursor:pointer;
    display:flex;
    flex-direction:column;
    backdrop-filter:blur(15px) saturate(160%)
}
.insight-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--glass-shadow-hover);
    background:var(--gradient-card-hover)
}
/* [MODIFICATION 1.1] Apply mobile column span by default */
.insight-card.large,
.insight-card.medium,
.insight-card.small{
    grid-column: span 1;
}

.thumbnail-container{position:relative;width:100%;padding-bottom:56.25%;overflow:hidden}.thumbnail{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:white;font-weight:var(--fw-700);font-size:var(--fs-4)}.category-tag{position:absolute;top:10px;left:10px;background:var(--gradient-primary);color:white;padding:4px 8px;border-radius:4px;font-size:var(--fs-8);font-weight:var(--fw-600)}.play-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);opacity:0;transition:opacity .3s ease}.play-overlay ion-icon{font-size:48px}.insight-card:hover .play-overlay{opacity:1}.insight-info{padding:20px;flex:1;display:flex;flex-direction:column}.insight-title{font-size:var(--fs-5);font-weight:var(--fw-600);color:var(--text-primary);margin:0 0 12px 0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.insight-card.small .insight-title{font-size:var(--fs-6)}.insight-excerpt{font-size:var(--fs-7);color:var(--text-secondary);margin:0 0 15px 0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}.insight-card.small .insight-excerpt{-webkit-line-clamp:2}.insight-meta{display:flex;align-items:center;gap:8px;font-size:var(--fs-8);color:var(--text-secondary);flex-wrap:wrap}.author{font-weight:var(--fw-600);color:var(--primary-color)}.custom-sitemap-nav button{background:none;border:none;color:var(--text-primary);text-decoration:none;transition:color .2s;display:flex;align-items:center;flex:1;cursor:pointer;padding:0;font:inherit}.custom-sitemap-nav button:hover{color:var(--primary-color)}

/* [MODIFICATION 1.2] Remove desktop-specific media queries */
/*
@media (max-width:1024px){
    .insight-card.large{grid-column:span 1}
    .insights-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}
@media (max-width:768px){
    .insights-grid{grid-template-columns:1fr}
    .insight-card.large,.insight-card.medium,.insight-card.small{grid-column:span 1}
}
*/

/* [REMOVED 5] ลบ CSS ของ Podcast ใน Sidebar (podcast-sidebar-player) */

.youtube-music-ui{padding:0}.music-header{background:var(--gradient-primary);padding:20px;border-radius:var(--border-radius-md);margin-bottom:20px;color:white}.header-content h3{margin:0 0 5px 0;font-size:var(--fs-3);font-weight:var(--fw-700)}.header-content p{margin:0;opacity:.9;font-size:var(--fs-6)}.header-actions{margin-top:15px}.play-all-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:rgba(255,255,255,.2);color:white;border:1px solid rgba(255,255,255,.3);border-radius:20px;font-weight:var(--fw-600);cursor:pointer;transition:all .3s ease}.play-all-btn:hover{background:rgba(255,255,255,.3);transform:translateY(-2px)}.music-controls{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}.search-bar{position:relative;display:flex;align-items:center}.search-bar ion-icon{position:absolute;left:15px;color:var(--text-secondary);font-size:20px}.search-input{width:100%;padding:12px 15px 12px 45px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:25px;color:var(--text-primary);font-size:var(--fs-6);transition:all var(--transition-1)}.search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(255,107,53,.2)}.filter-tabs{display:flex;gap:10px;overflow-x:auto;padding-bottom:5px}.filter-tabs::-webkit-scrollbar{display:none}.filter-tab{padding:8px 16px;background:var(--gradient-card);border:1px solid var(--glass-border);border-radius:20px;color:var(--text-secondary);font-size:var(--fs-7);font-weight:var(--fw-500);cursor:pointer;transition:all .3s ease;white-space:nowrap;flex-shrink:0}.filter-tab.active,.filter-tab:hover{background:var(--gradient-primary);color:white;border-color:var(--primary-color)}.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:20px}.video-card{background:var(--gradient-card);border-radius:var(--border-radius-md);overflow:hidden;border:1px solid var(--glass-border);transition:all var(--transition-1);cursor:pointer;backdrop-filter:blur(15px) saturate(160%)}.video-card:hover{transform:translateY(-5px);box-shadow:var(--glass-shadow-hover);background:var(--gradient-card-hover)}.duration{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.8);color:white;padding:4px 8px;border-radius:4px;font-size:var(--fs-8);font-weight:var(--fw-600)}.video-info{padding:15px}.video-title{font-size:var(--fs-6);font-weight:var(--fw-600);color:var(--text-primary);margin:0 0 8px 0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.video-channel{font-size:var(--fs-7);color:var(--text-secondary);margin:0 0 8px 0;font-weight:var(--fw-500)}.video-meta{display:flex;align-items:center;gap:5px;font-size:var(--fs-8);color:var(--text-secondary)}.music-player-bar{position:fixed;bottom:0;left:0;width:100%;background:var(--glass-bg);border-top:1px solid var(--glass-border);padding:10px 20px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(25px) saturate(180%);z-index:1007}.now-playing{display:flex;align-items:center;gap:15px;flex:1}.current-thumbnail{width:40px;height:40px;border-radius:4px;background:var(--gradient-primary)}.player-controls{display:flex;align-items:center;gap:15px}.control-btn{background:none;border:none;color:var(--text-primary);font-size:20px;cursor:pointer;padding:5px;border-radius:50%;transition:all .3s ease}.control-btn:hover{color:var(--primary-color);background:rgba(255,107,53,.1)}.play-pause{background:var(--primary-color);color:white;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.play-pause:hover{background:var(--red-accent);color:white}.progress-bar{position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--glass-border)}.progress{height:100%;background:var(--gradient-primary);width:30%;transition:width .3s ease}#menu-popup{position:fixed;bottom:0;left:0;width:100%;height:80vh;transform:translateY(100%);transition:transform .5s cubic-bezier(0.25,1,0.5,1);z-index:1004;overflow:hidden;border-top-left-radius:var(--border-radius-lg);border-top-right-radius:var(--border-radius-lg);display:flex;flex-direction:column;background:var(--gradient-menu);backdrop-filter:blur(25px) saturate(180%)}#menu-popup.visible{transform:translateY(0)}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga'}#menu-popup *,#menu-popup :before,#menu-popup :after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}#menu-popup{font-family:'Noto Sans Thai',sans-serif}#menu-popup h1,#menu-popup h2,#menu-popup h3,#menu-popup p{margin:0}#menu-popup button{background-color:transparent;background-image:none;padding:0}#menu-popup button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}#menu-popup img,#menu-popup video{display:block;vertical-align:middle;max-width:100%;height:auto}#menu-popup input::placeholder{opacity:1}#menu-popup{--primary:var(--orange-primary);--background-light:var(--navy-dark);--card-light:var(--navy-medium);--text-light:var(--text-primary);--text-secondary-light:var(--text-secondary);--background-dark:var(--navy-dark);--card-dark:var(--navy-medium);--text-dark:var(--text-primary);--text-secondary-dark:var(--text-secondary)}html.dark #menu-popup{--background-light:var(--background-dark);--card-light:var(--card-dark);--text-light:var(--text-dark);--text-secondary-light:var(--text-secondary-dark)}#menu-popup .bg-background-light{background-color:var(--background-light)!important}#menu-popup .text-text-light{color:var(--text-light)}#menu-popup .text-text-secondary-light{color:var(--text-secondary-light)}#menu-popup .bg-card-light{background-color:var(--card-light)}#menu-popup .text-primary{color:var(--primary)!important}#menu-popup .max-w-md{max-width:28rem;padding-left:1rem;padding-right:1rem}#menu-popup .mx-auto{margin-left:auto;margin-right:auto}#menu-popup .p-4{padding:1rem}#menu-popup .m-4{margin:1rem}#menu-popup .mb-4{margin-bottom:1rem}#menu-popup .mb-6{margin-bottom:1.5rem}#menu-popup .mr-4{margin-right:1rem}#menu-popup .ml-4{margin-left:1rem}#menu-popup .mt-4{margin-top:1rem}#menu-popup .flex{display:flex}#menu-popup .flex-col{flex-direction:column}#menu-popup .flex-grow{flex-grow:1}#menu-popup .items-center{align-items:center}#menu-popup .justify-between{justify-content:space-between}#menu-popup .justify-center{justify-content:center}#menu-popup .space-x-4>:not([hidden])~:not([hidden]){margin-left:1rem}#menu-popup .grid{display:grid}#menu-popup .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}#menu-popup .gap-4{gap:1rem}#menu-popup .rounded-full{border-radius:9999px}#menu-popup .rounded-lg{border-radius:0.75rem}#menu-popup .shadow{box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)}#menu-popup .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}#menu-popup .bg-transparent{background-color:transparent}#menu-popup .placeholder-text-secondary-light::placeholder{color:var(--text-secondary-light)}#menu-popup .text-lg{font-size:1.125rem}#menu-popup .text-sm{font-size:0.875rem}#menu-popup .text-xs{font-size:0.75rem}#menu-popup .font-bold{font-weight:700}#menu-popup .font-semibold{font-weight:500}#menu-popup .font-medium{font-weight:500}#menu-popup .overflow-hidden{overflow:hidden}#menu-popup .relative{position:relative}#menu-popup .absolute{position:absolute}#menu-popup .inset-0{top:0;right:0;bottom:0;left:0}#menu-popup .h-64{height:16rem}#menu-popup .w-full{width:100%}#menu-popup .h-full{height:100%}#menu-popup .object-cover{object-fit:cover}#menu-popup .bg-black{background-color:#000}#menu-popup .bg-opacity-40{background-color:rgba(0,0,0,0.4)}#menu-popup .text-white{color:#fff}#menu-popup .text-gray-300{color:#d1d5db}#menu-popup .bg-gray-800{background-color:#1f2937}#menu-popup .bg-opacity-70{background-color:rgba(31,41,55,0.7)}#menu-popup .text-3xl{font-size:1.875rem}#menu-popup .card-interactive{transition:transform 0.3s ease,box-shadow 0.3s ease}#menu-popup button{cursor:pointer}#menu-popup #theme-toggle{background:none;border:none;cursor:pointer}html.dark #menu-popup #sun-icon{display:block}html.dark #menu-popup #moon-icon{display:none}#menu-popup #sun-icon{display:none}#menu-popup .horizontal-grid{display:grid;grid-auto-flow:column;grid-auto-columns:10rem;gap:1rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory;scroll-width:none}#menu-popup .horizontal-grid::-webkit-scrollbar{display:none}#menu-popup .horizontal-grid>*{scroll-snap-align:start}#menu-panel-wrapper{width:100%;height:100%;display:flex;transition:transform 0.4s cubic-bezier(0.25,1,0.5,1)}.menu-panel{width:100%;height:100%;flex-shrink:0;overflow-y:auto}.menu-panel-back-btn{padding:8px}.menu-popup-header{display:flex;align-items:center;padding:12px 15px;border-bottom:1px solid var(--glass-border);flex-shrink:0;gap:15px;background-color:var(--card-light);justify-content:space-between}#menu-popup-title{font-size:var(--fs-5);font-weight:var(--fw-700);color:var(--text-light);flex-grow:1;display:flex;align-items:center;gap:10px}.menu-search-container{display:flex;align-items:center;background-color:var(--card-light);border-radius:9999px;padding:0.25rem;margin:1rem 1rem 1.5rem 1rem;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)}.menu-search-container #menu-search-button{padding:0.5rem;margin-left:0.5rem;color:var(--text-secondary-light)}.menu-search-container #menu-search-input{flex-grow:1;background:transparent;border:none;outline:none;color:var(--text-light);padding:0.5rem 0.75rem 0.5rem 0}.menu-search-container #menu-search-input::placeholder{color:var(--text-secondary-light)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(10,14,26,.6);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.modal-overlay.active{opacity:1;visibility:visible}.modal-overlay .modal-content{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--border-radius-lg);padding:25px;max-width:90%;width:400px;box-shadow:var(--glass-shadow-hover);transform:translateY(-20px) scale(0.95);opacity:0;transition:transform .3s cubic-bezier(0.25,1,0.5,1),opacity .3s ease}.modal-overlay.active .modal-content{transform:translateY(0) scale(1);opacity:1}.modal-body{padding-top:15px}.share-url-label{font-size:var(--fs-7);color:var(--text-secondary);margin-bottom:8px}.share-url-container{display:flex;gap:10px}#share-url-input{width:100%;background:var(--gradient-card-hover);border:1px solid var(--glass-border);color:var(--text-primary);border-radius:8px;padding:10px 15px;font-size:var(--fs-7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}#copy-url-btn{flex-shrink:0}#copy-url-btn.success{background:var(--success);color:var(--white)}#menu-popup .sitemap-close-btn,#menu-popup .menu-panel-back-btn{background:var(--gradient-primary);color:var(--white)!important;border-radius:12px;padding:8px 14px;gap:8px;transition:all .3s ease;font-weight:var(--fw-500);font-size:var(--fs-6);flex-shrink:0}#menu-popup .sitemap-close-btn:hover,#menu-popup .menu-panel-back-btn:hover{filter:brightness(1.1);transform:scale(1.05)}@media (hover:none) and (pointer:coarse){.action-btn:hover,.learn-more-btn:hover,.card-interactive:hover{transform:none;box-shadow:none}#menu-popup .card-interactive,.learn-more-btn{background:var(--gradient-primary)!important;color:white!important}#menu-popup .card-interactive .text-text-secondary-light,#menu-popup .card-interactive .font-semibold{color:white!important}#menu-popup .card-interactive .text-primary{color:white!important}}

/* [REMOVED 5] ลบ CSS ของ Podcast ใน Sidebar (FIX 1) */
/* .podcast-player-controls, .podcast-title-display, .podcast-progress-container */

.podcast-list .content-link {
    cursor: pointer;
    font-size: var(--fs-7); /* Smaller font for list */
}
.podcast-list .content-link.playing {
    color: var(--primary-color);
    font-weight: var(--fw-600);
}

/* Helper class */
.hidden { display: none !important; }

/* Sidebar Animation (Ease Out) */
.sidebar {
    /* Adjust max-height if needed */
    transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Faster start, slower end */
}

/* Dark Theme Button Overrides */
body:not(.light-theme) .sidebar-actions .action-btn,
body:not(.light-theme) #mini-browser-panel .action-btn[data-share-context],
body:not(.light-theme) #mini-browser-panel #mb-close-btn {
    background: var(--gradient-primary);
    color: var(--white) !important; /* Use important if needed */
    border-color: transparent; /* Remove border if gradient is used */
}
body:not(.light-theme) #mini-browser-panel #mb-close-btn ion-icon {
     color: var(--white); /* Ensure icon color matches */
}
/* Ensure hover effect is subtle or removed for these buttons in dark theme if desired */
body:not(.light-theme) .sidebar-actions .action-btn:hover,
body:not(.light-theme) #mini-browser-panel .action-btn[data-share-context]:hover,
body:not(.light-theme) #mini-browser-panel #mb-close-btn:hover {
     filter: brightness(1.1);
     transform: scale(1.05);
     background: var(--gradient-primary); /* Keep background on hover */
}

/* Ensure original title takes full width for marquee calculation */
.sidebar-info .info-content .name {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Style for TOC links in sidebar */
.sidebar-tab-content[data-sidebar-content="story"] .custom-sitemap-nav a {
    padding: 8px 10px; /* Adjust padding */
    font-size: var(--fs-7);
}
.sidebar-tab-content[data-sidebar-content="story"] .custom-sitemap-nav .sitemap-link-content ion-icon {
     font-size: 16px; /* Smaller icon */
}
/* ------------------------------------------- */
/* Scroll Dots Component */
/* ------------------------------------------- */
.scroll-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 15px;
}
.scroll-dot {
    width: 8px;
    height: 8px;
    background-color: var(--gray-dark); /* สีเทาเข้มใน Dark Theme */
    border-radius: 50%;
    opacity: 0.5;
    transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}
.scroll-dot.active {
    background-color: var(--primary-color); /* สีส้มหลัก */
    opacity: 1;
    transform: scale(1);
}
/* Theme Light-specific adjustments */
body.light-theme .scroll-dot {
    background-color: var(--gray-medium); /* สีเทาอ่อนลงใน Light Theme */
}
body.light-theme .scroll-dot.active {
    background-color: var(--primary-color); /* สีส้มยังคงเป็นสี Active */
}
.horizontal-scroll-container {
    overflow: hidden; 
    position: relative; 
}


/* --- [NEW 4] Styles for Global Podcast Player --- */
#global-podcast-player {
    position: fixed;
    bottom: 65px; /* [NEW 4.1] ระยะห่างจากด้านบนของ Footer (Navbar height ~60px + 5px margin) */
    left: 15px; /* ตรงกับ margin ของ .page-container */
    right: 15px; /* ตรงกับ margin ของ .page-container */
    width: calc(100% - 30px); /* 100% - (margin * 2) */
    
    background: var(--gradient-menu); /* ใช้พื้นหลังแบบเดียวกับ Navbar */
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md); /* 16px */
    box-shadow: var(--glass-shadow-hover);
    
    padding: 12px 15px;
    z-index: 1005; /* ต่ำกว่า Navbar (1006) แต่สูงกว่าเนื้อหา */
    
    display: flex;
    align-items: center;
    gap: 15px;
    
    /* [NEW 4.1] ซ่อนและแสดงผล */
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s ease;
}

#global-podcast-player.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* ปุ่ม Play/Pause */
.g-player-controls .control-btn {
    flex-shrink: 0;
    background: var(--gradient-primary);
    color: var(--white);
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: var(--transition-1);
    border: none;
}
.g-player-controls .control-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

/* ส่วนข้อมูลเพลง */
.g-player-info {
    flex-grow: 1;
    min-width: 0; /* สำหรับ text-overflow */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.g-player-info .track-title {
    font-size: var(--fs-6);
    font-weight: var(--fw-600);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.g-player-info .track-artist {
    font-size: var(--fs-8);
    font-weight: var(--fw-500);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Progress bar */
.g-player-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--glass-border);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); /* โค้งตามขอบล่าง */
}
.g-player-progress {
    height: 100%;
    background: var(--gradient-primary);
    width: 0%;
    border-radius: 0 0 0 var(--border-radius-md);
    transition: width 0.3s linear;
}

/* ปุ่มปิด */
.g-player-close {
    flex-shrink: 0;
    font-size: 24px;
    color: var(--text-secondary);
    padding: 5px;
    border-radius: 50%;
    transition: var(--transition-1);
}
.g-player-close:hover {
    color: var(--text-primary);
    background: var(--gradient-card-hover);
}
/* --- จบ [NEW 4] --- */