a { color: var(--accent); }
.io-bar { background: var(--panel); border-bottom: 1px solid var(--line); position: relative; z-index: 40; }
.io-bar .in { max-width: 1280px; margin: 0 auto; padding: 0 16px; height: 54px; display: flex; align-items: center; gap: 10px; }
.io-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font: 700 18px/1 Cinzel, "Noto Sans Thai", serif; white-space: nowrap; }
.io-logo b { color: var(--accent); font-weight: 700; margin-left: .28em; }
.io-logo img { width: 28px; height: 28px; object-fit: contain; }
.io-menu { display: flex; align-items: center; gap: 2px; margin-left: 14px; flex: 1; min-width: 0; }
.io-grp { position: relative; }
.io-grp > button { font: 600 14px/1 "Noto Sans Thai", system-ui, sans-serif; color: var(--muted); background: none; border: 0; padding: 10px 12px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.io-grp > button::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); opacity: .7; }
.io-grp > button:hover, .io-grp.open > button { background: var(--panel-2); color: var(--ink); }
.io-grp.cur > button { color: var(--ink); }
.io-grp.cur > button span { box-shadow: inset 0 -2px 0 var(--accent); }
.io-drop { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 230px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.io-grp.open .io-drop { display: block; }
.io-drop a, .io-drawer a { display: block; text-decoration: none; color: var(--ink); padding: 8px 12px; border-radius: 10px; }
.io-drop a small, .io-drawer a small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; }
.io-drop a:hover, .io-drawer a:hover { background: var(--panel-2); }
.io-drop a[aria-current="page"], .io-drawer a[aria-current="page"] { background: var(--accent-soft, var(--panel-2)); color: var(--accent); font-weight: 700; }
.io-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.io-acc { text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.io-acc[aria-current="page"], .io-acc:hover { border-color: var(--accent); color: var(--accent); }
.io-acc .n { background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.io-icon { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 16px; padding: 0; }
.io-icon:hover { border-color: var(--accent); }
.io-burger { display: none; }
.io-drawer { display: none; }
@media (max-width: 860px) {
  .io-menu { display: none; }
  .io-burger { display: grid; }
  .io-acc .t { display: none; }
  .io-logo { font-size: 16px; }
  .io-drawer { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); }
  .io-drawer.open { display: block; }
  .io-drawer .pane { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: var(--panel); padding: 14px 12px 30px; overflow-y: auto; box-shadow: -10px 0 30px rgba(0,0,0,.25); }
  .io-drawer h4 { margin: 16px 12px 4px; font-size: 12px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
  .io-drawer .close { float: right; }
}


.io-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin: 18px 0 18px; position: sticky; top: 0; z-index: 30; background: var(--bg); }
.io-tabs::-webkit-scrollbar { display: none; }
.io-tabs button { flex: none; font: 700 15px/1.2 "Noto Sans Thai", system-ui, sans-serif; color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 14px 10px; cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.io-tabs button img { width: 22px; height: 22px; object-fit: contain; }
.io-tabs button:hover { color: var(--ink); }
.io-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
[data-panel][hidden] { display: none !important; }
[data-panel] { animation: io-fade .18s ease; }
@keyframes io-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.io-foot { border-top: 1px solid var(--line); margin-top: 48px; color: var(--muted); font-size: 12.5px; }
.io-foot .in { max-width: 1280px; margin: 0 auto; padding: 22px 16px 36px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.io-foot a { color: var(--muted); }
@media (max-width: 440px) { .io-logo .n1 { display: none; } .io-logo b { margin-left: 0; } }