/* ระบบความยินยอมคุกกี้ของ oeg.co.th — สไตล์เป็นอิสระจาก Bootstrap (นำหน้าด้วย cc-) กันชนกับสไตล์เว็บ */
.cc-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990; padding: 0 12px 12px; font-family: inherit; }
.cc-banner[hidden], .cc-modal[hidden] { display: none !important; }
.cc-banner__inner { max-width: 960px; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
    padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; border: 1px solid #e6e6e6; }
.cc-banner__text { flex: 1 1 420px; margin: 0; font-size: 13px; line-height: 1.55; color: #333; }
.cc-banner__text a { color: #1e73be; text-decoration: underline; }
.cc-banner__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.cc-link { background: none; border: 0; padding: 6px 4px; color: #f89728; text-decoration: underline; cursor: pointer; font-size: 13px; font-weight: 500; }   /* สีส้มของเว็บ OEG */
.cc-link:hover { color: #d97d12; }
.cc-btn { border: 1px solid #1e73be; border-radius: 6px; padding: 8px 16px; font-size: 13px; cursor: pointer; line-height: 1.2; }
.cc-btn--primary { background: #1e73be; color: #fff; }
.cc-btn--primary:hover { background: #185f9c; }
.cc-btn--ghost { background: #fff; color: #1e73be; }
.cc-btn--ghost:hover { background: #eef5fb; }
.cc-btn--sm { padding: 5px 12px; font-size: 12px; }

.cc-modal { position: fixed; inset: 0; z-index: 99995; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cc-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.cc-modal__dialog { position: relative; background: #fff; border-radius: 10px; width: 100%; max-width: 720px; max-height: 92vh;
    display: flex; flex-direction: column; box-shadow: 0 8px 40px rgba(0, 0, 0, .3); font-family: inherit; }
.cc-modal__head { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; padding: 18px 52px 18px 22px; border-bottom: 1px solid #eee; }
.cc-modal__title { margin: 0; font-size: 16px; font-weight: 700; color: #222; }
.cc-modal__close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 26px; line-height: 1; color: #666; cursor: pointer; padding: 0 4px; }
.cc-modal__body { overflow-y: auto; padding: 4px 22px; }
.cc-modal__foot { padding: 12px 22px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.cc-modal-open { overflow: hidden; }

.cc-cat { padding: 14px 0; border-bottom: 1px solid #eee; }
.cc-cat:last-child { border-bottom: 0; }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-cat__title { margin: 0; font-size: 15px; font-weight: 700; color: #222; }
.cc-cat__always { color: #1e73be; font-size: 13px; font-weight: 600; }
.cc-cat__desc { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: #444; }
.cc-cat__desc a { color: #1e73be; text-decoration: underline; }

/* สวิตช์เปิด/ปิด */
.cc-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; cursor: pointer; }
.cc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-switch__track { position: absolute; inset: 0; background: #ccc; border-radius: 24px; transition: background .2s; }
.cc-switch__track:before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.cc-switch input:checked + .cc-switch__track { background: #1e73be; }
.cc-switch input:checked + .cc-switch__track:before { transform: translateX(18px); }
.cc-switch input:focus-visible + .cc-switch__track { outline: 2px solid #1e73be; outline-offset: 2px; }
.cc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
    .cc-banner { padding: 0 8px 8px; }
    .cc-banner__inner { padding: 14px; }
    .cc-banner__actions { width: 100%; justify-content: flex-end; }
    .cc-modal__head { padding: 14px 48px 14px 16px; }
    .cc-modal__body, .cc-modal__foot { padding-left: 16px; padding-right: 16px; }
}