/* เมนูหลัก (dist/menu.php) — header ยังใช้ .sticky / .at-top จาก style.css + js/custom.js */
/* style.css ตั้ง img { min-width: 150px } ทั้งเว็บ — โลโก้บนมือถือกว้าง 120px */
.cn-header img { min-width: 0; }

.cn-header {
    --cn-bg: rgba(8, 20, 33, .86);
    --cn-card: #0b1a2a;
    --cn-line: rgba(255, 255, 255, .08);
    --cn-text: #e8ecf0;
    --cn-muted: #abb7c4;
    --cn-dim: #6f8296;
    --cn-accent: #2984e8;
    --cn-accent-2: #4a9bf0;
    --cn-danger: #ff6b70;
    font-family: 'Noto Sans Thai', sans-serif;
    border-bottom: 1px solid transparent;
    transition: background .3s, border-color .3s, backdrop-filter .3s;
}
/* บนสุดของหน้า: ไล่เงาจากด้านบนให้ตัวหนังสืออ่านออกบนวิดีโอ/โปสเตอร์ */
.cn-header.sticky.at-top {
    /* background: linear-gradient(180deg, rgba(2, 13, 24, .78) 0%, rgba(2, 13, 24, .35) 60%, rgba(2, 13, 24, 0) 100%); */
    backdrop-filter: none;
}
/* เลื่อนลงแล้ว / มือถือ: พื้นทึบ + เบลอ */
.cn-header.sticky:not(.at-top),
.cn-header.sticky.is-menu-open {
    background: var(--cn-bg);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom-color: var(--cn-line);
}

.cn-nav {
    display: flex; align-items: center; gap: 28px;
    height: 72px; padding: 0 clamp(16px, 4vw, 64px);
    transition: height .3s;
}
.cn-header.sticky:not(.at-top) .cn-nav { height: 64px; }
.cn-ico { width: 18px; height: 18px; flex: 0 0 auto; }

.cn-logo { flex: 0 0 auto; display: block; line-height: 0; }
.cn-logo img { width: 150px; height: auto; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); transition: width .3s; }
.cn-header.sticky:not(.at-top) .cn-logo img { width: 136px; }

/* ── ลิงก์หลัก ── */
.cn-links { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; flex: 1 1 auto; min-width: 0; }
.cn-header .cn-link {
    position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px;
    color: var(--cn-text); font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55); transition: background .15s, color .15s;
}
.cn-header .cn-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.cn-header .cn-link.is-active { color: #fff; }
.cn-header .cn-link.is-active::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--cn-accent);
}
.cn-header .cn-link:focus-visible,
.cn-header .cn-account-btn:focus-visible,
.cn-header .cn-icon-btn:focus-visible { outline: 2px solid var(--cn-accent); outline-offset: 2px; }

/* ── ฝั่งขวา ── */
.cn-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cn-header .cn-btn-text { padding: 0 8px; color: var(--cn-text); font-size: 14px; font-weight: 500; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.cn-header .cn-btn-text:hover { color: #fff; }
.cn-header .cn-btn {
    display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 20px; border-radius: 999px;
    background: var(--cn-accent); color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
    border: 1px solid var(--cn-accent); transition: background .15s, border-color .15s;
}
.cn-header .cn-btn:hover { background: var(--cn-accent-2); border-color: var(--cn-accent-2); color: #fff; }
.cn-header .cn-btn.is-ghost { background: transparent; border-color: rgba(255, 255, 255, .2); color: var(--cn-text); }
.cn-header .cn-btn.is-ghost:hover { border-color: var(--cn-muted); color: #fff; }

/* ── ปุ่มบัญชี + dropdown ── */
.cn-account { position: relative; }
.cn-account-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px 0 4px; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: var(--cn-text);
    font-family: inherit; font-size: 14px; font-weight: 500; transition: background .15s, border-color .15s;
}
.cn-account-btn:hover, .cn-account.is-open .cn-account-btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }
.cn-account-btn.is-active { border-color: rgba(41, 132, 232, .6); }
.cn-account-btn .cn-ico { width: 18px; height: 18px; color: var(--cn-muted); transition: transform .2s; }
.cn-account.is-open .cn-account-btn .cn-ico { transform: rotate(180deg); }
.cn-account-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-avatar {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--cn-accent) 0%, #1b4f8f 100%); color: #fff; font-size: 14px; font-weight: 600; line-height: 1;
}
.cn-avatar.is-lg { width: 42px; height: 42px; font-size: 18px; }

.cn-menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 10; width: 260px; padding: 8px; border-radius: 14px;
    background: var(--cn-card); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility 0s .16s;
}
/* สะพานกันเมาส์หลุดช่วงช่องว่างระหว่างปุ่มกับเมนู */
.cn-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.cn-account.is-open .cn-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .16s; }
.cn-menu-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--cn-line); }
.cn-menu-who { min-width: 0; display: flex; flex-direction: column; }
.cn-header .cn-menu-name { color: #fff; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-header .cn-menu-name:hover { color: var(--cn-accent-2); }
.cn-menu-sub { font-size: 12px; color: var(--cn-dim); }
.cn-header .cn-menu-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
    color: var(--cn-muted); font-size: 14px; text-decoration: none; transition: background .12s, color .12s;
}
.cn-header .cn-menu-item:hover, .cn-header .cn-menu-item:focus-visible { background: rgba(255, 255, 255, .06); color: #fff; outline: none; }
.cn-header .cn-menu-item.is-active { color: #fff; background: rgba(41, 132, 232, .12); }
.cn-header .cn-menu-item.is-active .cn-ico { color: var(--cn-accent); }
.cn-header .cn-menu-item.is-danger:hover { color: var(--cn-danger); background: rgba(229, 72, 77, .1); }
.cn-menu-sep { height: 1px; margin: 6px 4px; background: var(--cn-line); }

/* ── มือถือ ── */
.cn-only-mobile { display: none; }
.cn-header .cn-icon-btn {
    width: 42px; height: 42px; padding: 0; border-radius: 10px; border: 0; cursor: pointer;
    align-items: center; justify-content: center; background: transparent; color: #fff;
}
.cn-header .cn-icon-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.cn-icon-btn .cn-ico { width: 22px; height: 22px; }
.cn-burger { position: relative; }
.cn-burger span { position: absolute; left: 11px; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s, top .2s; }
.cn-burger span:nth-child(1) { top: 14px; }
.cn-burger span:nth-child(2) { top: 20px; }
.cn-burger span:nth-child(3) { top: 26px; }
.cn-burger[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.cn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cn-burger[aria-expanded="true"] span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

.cn-drawer[hidden] { display: none; }
.cn-drawer {
    position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 100%); height: calc(100dvh - 100%);
    overflow-y: auto; overscroll-behavior: contain; background: rgba(2, 13, 24, .97); border-top: 1px solid var(--cn-line);
    animation: cn-drawer-in .2s ease-out;
}
@keyframes cn-drawer-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.cn-drawer-inner { padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; }
.cn-header .cn-drawer-user {
    display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 8px; border-radius: 12px;
    background: var(--cn-card); border: 1px solid var(--cn-line); text-decoration: none;
}
.cn-drawer-user > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.cn-drawer-user strong { color: #fff; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-drawer-user small { color: var(--cn-dim); font-size: 12px; }
.cn-drawer-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.cn-drawer-auth .cn-btn { height: 46px; font-size: 15px; }
.cn-drawer-title { margin: 18px 12px 6px; font-size: 12px; font-weight: 500; color: var(--cn-dim); letter-spacing: .3px; }
.cn-header .cn-drawer-link {
    display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 10px;
    color: var(--cn-text); font-size: 16px; text-decoration: none;
}
.cn-header .cn-drawer-link .cn-ico { width: 20px; height: 20px; color: var(--cn-muted); }
.cn-header .cn-drawer-link:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.cn-header .cn-drawer-link.is-active { background: rgba(41, 132, 232, .12); color: #fff; }
.cn-header .cn-drawer-link.is-active .cn-ico { color: var(--cn-accent); }
.cn-header .cn-drawer-link.is-danger { color: var(--cn-danger); }
.cn-header .cn-drawer-link.is-danger .cn-ico { color: var(--cn-danger); }
html.cn-lock, html.cn-lock body { overflow: hidden; }

@media (max-width: 1199px) {
    .cn-nav { gap: 16px; }
    .cn-header .cn-link { padding: 0 10px; font-size: 14px; }
    .cn-header .cn-link.is-active::after { left: 10px; right: 10px; }
    .cn-account-name { max-width: 90px; }
}
@media (max-width: 991px) {
    .cn-nav { height: 60px; gap: 4px; }
    .cn-header.sticky:not(.at-top) .cn-nav { height: 60px; }
    .cn-links, .cn-actions { display: none; }
    .cn-only-mobile { display: inline-flex; }
    .cn-logo { margin-right: auto; }
    .cn-logo img, .cn-header.sticky:not(.at-top) .cn-logo img { width: 120px; }
}
@media (max-width: 767px) {
    /* มือถือ: พื้นทึบตลอด (เดิม style.css ก็ทำแบบนี้) */
    .cn-header.sticky, .cn-header.sticky.at-top {
        background: var(--cn-bg);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        border-bottom-color: var(--cn-line);
    }
}