.menu a{text-decoration:none;color:black}.top-nav{background:white;position:fixed;top:0;left:0;width:100%;z-index:99999999;box-shadow:0 2px 10px rgba(0,0,0,.05)}.top-content{display:flex;justify-content:flex-start;align-items:center;flex-wrap:nowrap}.desktop-only{display:flex;align-items:center}.mobile-menu-items{display:none}.logo img{width:300px;padding:10px 0;margin-right:20px}.top-right{display:flex;align-items:center;gap:12px}.mobile-only{display:none}.v-line{border-right:1px solid #CECECE;height:65px}.font-size span{font-size:18px;padding:10px;color:#B63D97;cursor:pointer}.font-size img{width:20px}.home-icon img{width:35px}.accessibility-circle{background-color:#B63D97;border-radius:50%;padding:5px;box-shadow:rgba(0,0,0,.1) 0 4px 6px -1px,rgba(0,0,0,.06) 0 2px 4px -1px}.accessibility-circle button{background:none;border:0;padding:0;margin:0;display:block;cursor:pointer;line-height:0}.accessibility-circle img{width:25px;height:25px;object-fit:contain}.login-capsule img{width:20px;margin-right:5px}.login-capsule{cursor:pointer;border-radius:50px;color:white;display:flex;justify-content:center;align-items:center;font-size:14px;padding:10px 20px;background:linear-gradient(to left,#B63D97 50%,#2c3e50 50%);background-size:200% 100%;background-position:right bottom;transition:all .4s ease-out;white-space:nowrap;flex-shrink:0}.login-capsule:hover{background-position:left bottom;transform:scale(1.05)}.lang-circle{width:35px;height:35px;border-radius:50%;background-color:#EEEEEE;color:black;display:flex;justify-content:center;align-items:center;font-size:16px;box-shadow:rgba(0,0,0,.1) 0 4px 6px -1px,rgba(0,0,0,.06) 0 2px 4px -1px}.lang-circle:hover,.lang-circle.active{cursor:pointer;background-color:#B63D97;color:white}.search-box{margin-right:10px;transition:transform .2s ease}.search-box:hover{transform:scale(1.1)}.search-box i{color:#B63D97!important;font-size:20px}.search-box.desktop-only{margin-left:auto}.lang img{width:25px;cursor:pointer}.main-nav{color:black;align-self:stretch}.nav-content{display:flex;justify-content:flex-start;align-items:stretch;width:100%;height:100%}.menu{display:flex;list-style:none;height:100%}.menu li{cursor:pointer;position:relative;font-weight:400;color:black;padding:20px 15px 0 15px;cursor:pointer;transition:all .3s ease}.menu li::after{content:"";position:absolute;top:0;left:0;width:0;height:2px;background-color:#B63D97;transition:width .5s ease}.dropdown-menu li{border-top:none}.dropdown-menu li::after{display:none}.menu li a{white-space:nowrap;display:flex;align-items:center;gap:6px;cursor:pointer}.menu li:hover::after,.menu li.active::after{width:100%}.menu li:hover>a,.menu li.active>a{color:#B63D97!important}.menu li:hover .fa-angle-down,.menu li.active .fa-angle-down{color:#B63D97}.fa-angle-down,.fa-angle-right{color:#94a3b8}.login a{font-weight:200;color:white}.hamburger{display:none;font-size:22px;cursor:pointer}.lang-dropdown{position:relative;cursor:pointer}.lang-selected{display:flex;align-items:center;gap:5px}.lang-selected img{width:25px}.lang-menu{position:absolute;top:35px;right:0;background:white;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);display:none;min-width:100px;z-index:100}.lang-item{display:flex;align-items:center;gap:8px;padding:8px 12px}.lang-item img{width:20px}.lang-menu.show{display:block}.close-menu{display:none;position:absolute;top:20px;right:25px;font-size:28px;color:white;cursor:pointer}.menu li.has-dropdown{position:relative;padding-bottom:10px}.submenu-item .dropdown-menu{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.dropdown-menu{display:block;position:absolute;top:100%;left:0;background-color:#fff;border:none;min-width:250px;margin:0;list-style:none;box-shadow:0 10px 40px #B63D971A;border-radius:0 0 12px 12px;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s ease;z-index:1000;display:none}.menu li.has-dropdown:hover>.dropdown-menu{display:block;opacity:1;visibility:visible;transform:translateY(0)}.menu .dropdown-menu a{color:#475569;text-decoration:none;display:block;white-space:normal;overflow-wrap:anywhere}.dropdown-menu li{padding:10px 30px 10px 45px;position:relative;transition:all .3s ease;cursor:pointer}.dropdown-menu li::before{content:"";width:20px;height:3px;background-color:#B63D97;position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;transition:all .4s cubic-bezier(.4,0,.2,1)}.dropdown-menu li:hover::before,.dropdown-menu li.active::before{left:15px;opacity:1}.dropdown-menu li:hover>a,.dropdown-menu li.active>a{color:#B63D97!important;font-weight:500}.has-dropdown>a i{font-size:12px;display:inline-block;transition:transform .3s ease}.menu li.has-dropdown:hover>a i{transform:rotate(180deg)}.menu li.has-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-menu .has-dropdown{position:relative}.dropdown-menu .has-dropdown .dropdown-menu{top:0;left:100%;transform:translateX(10px);border-radius:12px;display:none}.dropdown-menu .has-dropdown:hover>.dropdown-menu{display:block;opacity:1;visibility:visible;transform:translateX(0)}.dropdown-menu .has-dropdown>a{display:flex;justify-content:space-between;align-items:center}.dropdown-menu .has-dropdown>a i{font-size:10px;margin-left:10px;transition:transform .3s ease}.dropdown-menu .has-dropdown:hover>a i{transform:rotate(-90deg)}.dropdown-menu li a:hover{color:var(--color-primary)}@media (max-width:1100px){.top-content{flex-wrap:wrap}.top-right.desktop-only{width:100%;justify-content:end;border-left:none;margin-top:0;padding-bottom:10px 0;order:10}.search-box.desktop-only{margin-left:auto;margin-right:10px}}@media(max-width:1100px){.desktop-only{display:none!important}.v-line{display:none}.hamburger{display:block!important;font-size:24px;order:3;margin-left:15px}.logo{order:1;margin-left:0;flex-grow:1}.mobile-only{display:flex!important;align-items:center;order:2;margin-left:auto}.logo img{width:220px;transition:width .3s ease}.top-right{order:4}.menu{position:fixed;top:0;left:0;width:80%;max-width:400px;height:100%;background:white;flex-direction:column;padding:60px 20px 0 20px;display:none;z-index:1000;box-shadow:5px 0 20px rgba(0,0,0,.2);overflow-y:auto}.menu.show{display:flex}.menu li{font-size:16px;width:100%;padding:14px 15px;border-bottom:1px solid rgba(0,0,0,.08);border-top:none!important}.menu li.has-dropdown{padding-bottom:14px}.menu>.login-mobile{padding:0}.menu>.display-mobile{padding:14px 15px;border-bottom:none}.dropdown-menu li{padding:10px 15px 10px 45px;white-space:normal}.menu li::after{display:none!important}.dropdown-menu li::before{display:none!important}.menu li a{color:black!important;display:block}.mobile-menu-items{display:flex;flex-direction:column}.mobile-menu-items .search-box{margin-bottom:20px;width:100%;position:relative}.mobile-menu-items .search-box input{width:100%;background:white;border:1px solid #B63D97;color:black;height:35px;line-height:35px;padding:0 12px 0 35px;border-radius:25px;outline:none;vertical-align:middle}.mobile-menu-items .search-box input::placeholder{color:#BABABA;font-size:16px}.mobile-menu-items .search-box i{color:black;position:absolute;top:50%;transform:translateY(-50%);left:10px}.mobile-lang{margin-bottom:20px}.mobile-lang .lang-selected{color:white;display:flex;align-items:center;gap:10px;cursor:pointer}.mobile-lang-menu{display:none;background:white;border-radius:8px;margin-top:10px;box-shadow:0 4px 12px rgba(0,0,0,.2)}.mobile-lang-menu.show{display:block}.mobile-lang-menu .lang-item{padding:10px 15px;display:flex;align-items:center;gap:10px;color:#333}.login-mobile a{color:black}.close-menu{display:block;z-index:1001}.menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:999;display:none}body.menu-open .menu-overlay{display:block}body.menu-open{overflow:hidden}.menu>li.active>a{color:#B63D97!important;border-bottom:none!important}.menu li.has-dropdown:hover .dropdown-menu{display:none}.menu li.has-dropdown.mobile-open>.dropdown-menu{display:block!important;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;min-width:100%;margin-top:10px;overflow:hidden;background-color:var(--color-secondary)}.dropdown-menu .has-dropdown.mobile-open>.dropdown-menu{padding-left:20px;margin-top:0}.dropdown-menu .has-dropdown>a i{transform:rotate(90deg)}.dropdown-menu .has-dropdown.mobile-open>a i{transform:rotate(180deg)!important}.menu li.has-dropdown.mobile-open>a i{transform:rotate(180deg)}.menu li:hover{background:none}}@media(max-width:600px){.logo img{width:180px}.top-right{gap:8px}.login-capsule span{display:none}.login-capsule{padding:8px;width:35px;height:35px;border-radius:50%}.accessibility-circle,.lang-circle{width:30px;height:30px;font-size:12px}.accessibility-circle img{width:18px;height:18px}}@media(max-width:480px){.logo img{width:150px}.menu{width:100%;max-width:100%}}.search-popup-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.98);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);opacity:0;visibility:hidden;transition:all .4s cubic-bezier(.4,0,.2,1)}.search-popup-overlay.show{opacity:1;visibility:visible}.search-popup{position:relative;width:100%;max-width:1000px;padding:20px;text-align:center;transform:translateY(30px);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}.search-popup-overlay.show .search-popup{transform:translateY(0)}.search-popup-label{font-size:32px;font-weight:700;color:#B63D97;margin-bottom:40px}.search-popup-close{position:fixed;top:150px;right:40px;z-index:100000000;width:60px;height:60px;border:none;border-radius:50%;background:#f0f0f0;color:#333;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.search-popup-close:hover{background:#B63D97;color:#fff;transform:rotate(90deg)}.search-popup-form{display:flex;flex-direction:column;align-items:center;gap:30px;width:100%}.search-popup-input-wrap{position:relative;width:100%}.search-popup-icon{position:absolute;left:30px;top:50%;transform:translateY(-50%);color:#B63D97;font-size:28px;pointer-events:none}.search-popup-input-wrap input{width:100%;height:100px;padding:0 0 0 80px;border:none;border-bottom:4px solid #eee;background:transparent;font-size:24px;font-weight:300;color:#1a1a2e;outline:none;transition:border-color .3s;box-sizing:border-box}.search-popup-input-wrap input:focus{border-color:#B63D97}.search-popup-input-wrap input::placeholder{color:#ddd}.search-popup-btn{position:fixed;top:120px;right:120px;z-index:100000000;height:60px;padding:0 50px;border:none;border-radius:50px;background:#B63D97;color:#fff;font-size:20px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 10px 20px rgba(182,61,151,.2)}.search-popup-btn:hover{background:#9b2d80;transform:translateY(-3px);box-shadow:0 15px 30px rgba(182,61,151,.3)}body.search-open{overflow:hidden}@media (max-width:767px){.v-line{display:none}.search-popup-input-wrap input{height:70px;font-size:32px;padding-left:60px}.search-popup-icon{font-size:20px;left:20px}.search-popup-label{font-size:24px}.search-popup-close{top:20px;right:20px;width:45px;height:45px;font-size:18px}}.accessibility-circle{transform:translateY(2px)}.accessibility-circle:hover{transform:translateY(2px) scale(1.05)}
/* drawer: iOS แตะแล้ว hover ค้าง ทำให้พับเมนูแล้วลูกศร/สีม่วงไม่กลับ — ใน drawer ให้สถานะขับด้วย .mobile-open เท่านั้น ปลดกฎ :hover ของเดสก์ท็อป */
@media(max-width:1100px){.menu li.has-dropdown:hover>a i{transform:none}.dropdown-menu .has-dropdown:hover>a i{transform:none}.menu li.has-dropdown.mobile-open>a i{transform:rotate(180deg)}.dropdown-menu .has-dropdown.mobile-open>a i{transform:rotate(180deg)!important}.menu li:hover>a{color:black!important}.menu li:hover .fa-angle-down{color:#94a3b8}.menu>li.active>a{color:#B63D97!important}.dropdown-menu li.active>a{color:#B63D97!important}.menu li.active .fa-angle-down{color:#B63D97}.menu li.has-dropdown.mobile-open>a{color:#B63D97!important}}
.login-capsule{text-decoration:none}.login-capsule:hover,.login-capsule:focus{text-decoration:none;color:#fff}

/* ===================================================================
   เมนูแนวนอน: ย่อฟอนต์/โลโก้/ไอคอนลงเป็นชั้น ๆ เมื่อจอเล็กลง (>1100px)
   แล้วค่อยเป็นเมนู hamburger เมื่อ <=1100px (ดูบล็อก @media max-width:1100px ด้านบน)

   ⚠️ ขนาดแต่ละชั้นเผื่อ buffer ~20% จากค่าที่วัดได้ เพราะฟอนต์ Sarabun บนเครื่องจริง
   render กว้างกว่าสภาพแวดล้อมทดสอบ (เคยตั้งชั้นตามค่าวัดเป๊ะ แล้วปุ่มเข้าสู่ระบบ
   หลุดขอบขวาบนจอจริง ~1190px) — จะบีบชั้นให้แคบลงอีกต้องเทสบนเครื่องจริงเท่านั้น

   หมายเหตุ: เดสก์ท็อปเดิมมีปุ่ม "เข้าสู่ระบบ" ซ้ำ 2 อัน (ลิงก์ในแถวเมนู + แคปซูลขวา)
   ซ่อนตัวที่ซ้ำ (.login.desktop-only) เพื่อลดความรกและได้พื้นที่คืน
   ปุ่มปรับฟอนต์ "กก-+" ซ่อนตั้งแต่ <=1400 (ฟังก์ชันซ้ำกับ widget accessibility)
   =================================================================== */
@media (min-width:1101px) {
    .login.desktop-only { display: none; }
}

/* ชั้น 1: 1401-1600 — ย่อนิดเดียว โลโก้ยังเกือบเต็ม หัวเว็บยังสูง (~75px)
   ยังมีที่เหลือด้านขวาเยอะ จึงไม่ย่อมาก */
@media (min-width:1101px) and (max-width:1600px) {
    .logo img { width: 280px; }
    .menu li a { font-size: 15px; }
    .menu li { padding: 20px 12px 0 12px; }
    .top-right { gap: 10px; }
    .font-size span { padding: 7px; }
}

/* ชั้น 2: 1251-1400 (หัวเว็บ ~69px) */
@media (min-width:1101px) and (max-width:1400px) {
    .logo img { width: 250px; }
    .menu li a { font-size: 14px; }
    .menu li { padding: 20px 9px 0 9px; }
    .top-right { gap: 8px; }
    .font-size.desktop-only { display: none; }
}

/* ชั้น 3: 1101-1250 (แคบสุดก่อนเป็น hamburger)
   คงเส้นคั่น .v-line ไว้ให้หัวเว็บสูงสม่ำเสมอ ~65px (ไม่เตี้ยจนดูบีบ)
   คงข้อความ "เข้าสู่ระบบ" ไว้ (ไม่ยุบเป็นไอคอน เดี๋ยวกลืนกับวงกลมอื่น)
   ย่อรูป/ตัวอักษรในวงกลมให้พอดี ไม่งั้นเนื้อหาล้นวงกลมจนดูเบี้ยว */
@media (min-width:1101px) and (max-width:1250px) {
    .logo img { width: 160px; }
    .menu li a { font-size: 12.5px; }
    .menu li { padding: 20px 4px 0 4px; }
    .top-right { gap: 5px; }
    .search-box { margin-right: 4px; }
    .lang-circle, .accessibility-circle { width: 30px; height: 30px; }
    .lang-circle { font-size: 13px; }
    .accessibility-circle img { width: 18px; height: 18px; }
    .login-capsule { padding: 8px 14px; font-size: 12px; }
    .login-capsule img { margin-right: 4px; }
}