/* เมนูส่วนกลาง ใช้ชื่อ class เฉพาะเพื่อไม่ชนกับ CSS ของแต่ละหน้า */
.dbm-site-header, .dbm-site-header * { box-sizing: border-box; }
.dbm-site-header {
    position: sticky; top: 0; z-index: 1000; margin: 0; padding: 0;
    color: #fff; background: #700070; border: 0; border-bottom: 4px solid #fff200;
    font-family: Tahoma, Arial, sans-serif; font-size: 14px; line-height: 1.5;
    box-shadow: 0 3px 16px rgba(60,0,60,.12);
}
.dbm-site-header__inner {
    width: min(1280px, calc(100% - 40px)); min-height: 80px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.dbm-site-header a { text-decoration: none; color: #fff; }
.dbm-site-header__brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-size: 18px; font-weight: 800; }
.dbm-site-header__brand small { display: block; margin-top: 3px; color: #ecd9ec; font-size: 11px; font-weight: 400; }
.dbm-site-header__logo { display: grid; place-items: center; width: 46px; height: 46px; color: #fff200; border: 2px solid #fff200; border-radius: 13px; font-size: 15px; }
.dbm-site-header__menu, .dbm-site-header__links, .dbm-site-header__actions { display: flex; align-items: center; gap: 8px; }
.dbm-site-header__menu { gap: 22px; }
.dbm-site-header__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 9px; white-space: nowrap; }
.dbm-site-header__links a:hover, .dbm-site-header__links a[aria-current="page"] { color: #fff200; background: rgba(255,255,255,.1); }
.dbm-site-header__actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 15px; border-radius: 10px; font-weight: 700; white-space: nowrap; }
.dbm-site-header a.dbm-site-header__primary { color: #4f004f; background: #fff200; border: 1px solid #fff200; }
.dbm-site-header a.dbm-site-header__outline { border: 1px solid #c58bc5; color: #fff; background: transparent; }
.dbm-site-header__actions a:hover { filter: brightness(.93); }
.dbm-site-header a:focus-visible, .dbm-site-header button:focus-visible { outline: 3px solid #fff200; outline-offset: 4px; }
.dbm-site-header__toggle { display: none; }
.dbm-site-header__toggle[hidden] { display: none; }
#about, #overview, #how-to-use { scroll-margin-top: 100px; }
@media (max-width: 1120px) {
    .dbm-site-header__inner { flex-wrap: wrap; gap: 0; padding: 14px 0; min-height: 76px; }
    .dbm-site-header__brand { font-size: 17px; }
    .dbm-site-header__toggle { display: inline-flex; gap: 9px; align-items: center; justify-content: center; width: auto; min-height: 44px; margin: 0; padding: 8px 12px; color: #fff; background: transparent; border: 1px solid #c58bc5; border-radius: 10px; font: inherit; cursor: pointer; }
    .dbm-site-header__menu { width: 100%; flex-direction: column; align-items: stretch; gap: 14px; padding-top: 14px; }
    .dbm-site-header--enhanced .dbm-site-header__menu { display: none; }
    .dbm-site-header--enhanced.dbm-site-header--open .dbm-site-header__menu { display: flex; }
    .dbm-site-header__links { flex-direction: column; align-items: stretch; gap: 2px; }
    .dbm-site-header__actions { flex-wrap: wrap; border-top: 1px solid #a14aa1; padding-top: 14px; }
    .dbm-site-header__actions a { flex: 1 1 auto; }
}
@media (max-width: 400px) {
    .dbm-site-header__inner { width: calc(100% - 24px); }
    .dbm-site-header__brand { gap: 8px; font-size: 14px; }
    .dbm-site-header__logo { width: 38px; height: 38px; font-size: 12px; }
}

.dbm-site-header__more{position:relative}.dbm-site-header__more summary{cursor:pointer;font:inherit;color:#fff;padding:10px;border-radius:8px;white-space:nowrap}.dbm-site-header__more>div{position:absolute;right:0;top:100%;min-width:210px;max-width:300px;max-height:60vh;overflow:auto;padding:10px;background:#650065;border:1px solid #bb79bd;border-radius:10px;z-index:100}.dbm-site-header__more>div a{display:block;white-space:normal;overflow-wrap:anywhere}.dbm-site-header__more summary:focus-visible{outline:3px solid #ffff00}.dbm-site-header__inner{flex-wrap:wrap}.dbm-site-header__menu{flex-wrap:wrap}@media(max-width:900px){.dbm-site-header__more>div{position:static;max-width:none}}