/* ============================================================
   RAYDRIC ONLINE — ธีมหน้าต่างเกม Ragnarok Online (Classic)
   ไฟล์เดียวจบ: แก้สีได้ที่ :root ด้านล่าง
   ============================================================ */

:root{
    /* กรอบหน้าต่าง */
    --win-border   : #5f82a6;
    --win-border-in: #ffffff;
    --win-bar-1    : #eaf3fc;
    --win-bar-2    : #b8d2ec;
    --win-bar-3    : #9dbfe0;
    --win-body     : #f4f8fc;
    --win-shadow   : 2px 2px 0 rgba(20,40,60,.28);

    /* ตัวอักษร */
    --ink          : #1f3a55;
    --ink-soft     : #5a7690;
    --link         : #1f6bb5;

    /* ไฮไลต์ */
    --sel          : #cfe4fa;
    --gold         : #c9932c;
    --hp           : #d84b4b;
    --sp           : #4a7fd8;
    --ok           : #3f9d4a;
    --no           : #b5453f;

    --radius       : 10px;   /* ความโค้งมุมหน้าต่าง */
    --bg-opacity   : .26;    /* ความชัดของภาพพื้นหลัง (0 = ไม่เห็น, 1 = เต็ม) */
    --font         : Tahoma, "Leelawadee UI", "Segoe UI", "Noto Sans Thai", sans-serif;
}

/* ---------------- พื้นฐาน ---------------- */
*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
    margin:0;
    font-family:var(--font);
    font-size:13.2px;
    line-height:1.55;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    padding-bottom:34px;                 /* เผื่อ taskbar */
}

/* ---------------- พื้นหลัง: ภาพเมือง + ฝ้าขาวให้จาง ----------------
   ปรับความเข้มของภาพที่ --bg-opacity (มาก = ชัดขึ้น)
   เปลี่ยนรูปได้ที่ assets/img/bg-city.jpg
   ------------------------------------------------------------------ */
.ro-bg{
    position:fixed; inset:0; z-index:-1;
    background:linear-gradient(180deg,#b6c8da 0%, #c8d4e0 45%, #d7dde4 100%);
}
/* ชั้นรูปภาพ */
.ro-bg::before{
    content:"";
    position:absolute; inset:0;
    background:url("../img/bg-city.jpg") no-repeat center center;
    background-size:cover;
    opacity:var(--bg-opacity);
}
/* ชั้นฝ้าขาว + ขอบมืดนิด ๆ ให้ภาพจางและอ่านง่าย */
.ro-bg::after{
    content:"";
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse at 50% -5%, rgba(255,255,255,.6), rgba(255,255,255,.18) 55%, rgba(255,255,255,0) 78%),
        radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0) 42%, rgba(30,55,85,.22) 100%),
        linear-gradient(180deg, rgba(240,245,251,.5) 0%, rgba(228,237,246,.38) 50%, rgba(206,220,233,.55) 100%);
}

a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------------- หัวเว็บ / โลโก้ ---------------- */
.ro-header{
    position:relative;
    text-align:center;
    padding:18px 12px 10px;
}
.ro-header__acc{
    position:absolute;
    top:14px;
    right:14px;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
    max-width:220px;
}
.ro-header__user{
    font-size:12px;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.55);
    border:1px solid rgba(20,40,65,.15);
    white-space:nowrap;
}
@media (max-width:640px){
    .ro-header__acc{ position:static; margin-top:8px; justify-content:center; max-width:none; }
}
.ro-header{ perspective:900px; }
.ro-logo{
    display:inline-block;
    text-decoration:none !important;
    line-height:1;
    user-select:none;
}
.ro-logo__img{
    display:block;
    width:min(430px, 78vw);
    height:auto;
    filter:drop-shadow(0 4px 10px rgba(20,40,65,.35));
    animation:roLogoFloat 5.5s ease-in-out infinite;
    transition:transform .35s ease, filter .35s ease;
    transform-style:preserve-3d;
    will-change:transform;
}
.ro-logo:hover .ro-logo__img{
    animation-play-state:paused;
    transform:translateY(-5px) scale(1.035) rotateY(6deg) rotateX(2deg);
    filter:drop-shadow(0 16px 22px rgba(20,40,65,.45)) brightness(1.04);
}
@keyframes roLogoFloat{
    0%, 100%{ transform:translateY(0) rotateX(0deg) rotateY(0deg); filter:drop-shadow(0 4px 10px rgba(20,40,65,.35)); }
    50%     { transform:translateY(-7px) rotateX(3deg) rotateY(-4deg); filter:drop-shadow(0 14px 18px rgba(20,40,65,.4)); }
}
@media (prefers-reduced-motion: reduce){
    .ro-logo__img{ animation:none; }
}
.ro-logo__tag{
    display:block;
    margin-top:2px;
    font-size:11px;
    letter-spacing:.32em;
    color:#39546e;
    text-shadow:0 1px 0 rgba(255,255,255,.75);
}

/* ---------------- ผัง 2 คอลัมน์ ---------------- */
.ro-desktop{
    position:relative;
    max-width:1080px;
    margin:0 auto;
    padding:0 14px 40px;
    display:grid;
    grid-template-columns:300px 1fr;
    gap:14px;
    align-items:start;
}
.ro-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }

/* ---------------- หน้าต่างสไตล์ RO ---------------- */
.ro-win{
    background:var(--win-body);
    border:1px solid var(--win-border);
    border-radius:var(--radius);
    box-shadow:var(--win-shadow), inset 0 0 0 1px rgba(255,255,255,.85);
    position:relative;
    overflow:hidden;              /* ให้เนื้อในถูกตัดตามมุมโค้ง */
}
.ro-win.is-dragging{ opacity:.96; }
.ro-win.is-hidden{ display:none; }

.ro-win__bar{
    display:flex; align-items:center; gap:6px;
    height:26px;
    padding:0 10px 0 10px;
    cursor:default;
    background:linear-gradient(180deg,var(--win-bar-1) 0%, var(--win-bar-2) 55%, var(--win-bar-3) 100%);
    border-bottom:1px solid var(--win-border);
    border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    user-select:none;
}
.ro-win__collapse{
    font-size:9.9px; color:#41628a; cursor:pointer;
    transition:transform .12s ease;
}
.ro-win.is-collapsed .ro-win__collapse{ transform:rotate(-90deg); }
.ro-win.is-collapsed .ro-win__body{ display:none; }

.ro-win__title{
    flex:1; min-width:0;
    font-weight:700; font-size:12.1px; color:#1d3d5c;
    text-shadow:0 1px 0 rgba(255,255,255,.7);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ro-win__close{
    width:14px; height:14px; line-height:12px;
    padding:0; font-size:9.9px; color:#33506e;
    background:linear-gradient(180deg,#fdfefe,#cddcea);
    border:1px solid #6d8ead; border-radius:6px;
    cursor:pointer;
}
.ro-win__close:hover{ background:linear-gradient(180deg,#fff,#f0b3b3); color:#8f2020; }

.ro-win__body{ padding:10px; }

/* กรอบเนื้อหาไม่มีสกรอลแล้ว — ยืดตามเนื้อหาเต็มความสูง */
.ro-win--content .ro-win__body{ padding:12px 14px 14px; }

/* สกรอลบาร์แบบ RO (ใช้เฉพาะกรอบที่ยังต้องเลื่อน เช่น ตารางอันดับ) */
.ro-rank-wrap::-webkit-scrollbar{ width:12px; }
.ro-rank-wrap::-webkit-scrollbar-track{
    background:#e7eef6; border-left:1px solid #b9cde0;
}
.ro-rank-wrap::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg,#ffffff,#bed6ec 60%,#9dbcda);
    border:1px solid #6f92b4; border-radius:6px;
}

/* ---------------- กรอบสถานะเซิร์ฟเวอร์ ---------------- */
.ro-status__top{ display:flex; gap:8px; align-items:center; }

.ro-portrait{
    position:relative;
    width:62px; height:62px; flex:none;
    border:1px solid #7e9cba;
    border-radius:6px;
    background:linear-gradient(180deg,#ffffff,#dbe7f3);
    box-shadow:inset 0 0 0 1px #fff;
    display:grid; place-items:center;
    overflow:hidden;
}
.ro-portrait__emblem{
    font-size:35.2px; font-weight:900; line-height:1;
    color:#3b6da5;
    text-shadow:0 1px 0 #fff, 0 2px 4px rgba(0,0,0,.25);
}
.ro-portrait__ring{
    position:absolute; inset:-30% -30% auto -30%; height:160%;
    background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%);
    pointer-events:none;
}
.ro-portrait.is-online{ box-shadow:inset 0 0 0 1px #fff, 0 0 0 1px #56a55e; }
.ro-portrait.is-offline{ filter:grayscale(.7); }

.ro-status__meters{ flex:1; min-width:0; }

.ro-field{ display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.ro-field__key{ font-weight:700; color:#41627f; font-size:11px; }

.ro-status__badge{
    display:inline-flex; align-items:center; gap:4px;
    font-weight:700; font-size:11px; letter-spacing:.06em;
    padding:1px 6px; border-radius:6px;
    border:1px solid #7e9cba; background:#eef5fc;
}
.ro-status__badge.is-online { color:#256b2c; border-color:#79b47f; background:#eaf7ea; }
.ro-status__badge.is-offline{ color:#8b2b26; border-color:#c58c88; background:#fbeceb; }
.ro-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 4px currentColor; }
.ro-status__badge.is-online .ro-dot{ animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.ro-kv{
    margin:8px 0 0; padding:6px;
    display:grid; grid-template-columns:52px 1fr; gap:2px 6px;
    background:#fff; border:1px solid #c6d8e8; border-radius:6px;
    font-size:12.1px;
}
.ro-kv dt{ color:#63809a; }
.ro-kv dd{ margin:0; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ro-portlist{
    list-style:none; margin:6px 0 0; padding:0;
    display:flex; gap:4px;
}
.ro-portlist li{
    flex:1; display:flex; align-items:center; justify-content:center; gap:4px;
    font-size:11px; padding:2px 0;
    border:1px solid #c6d8e8; border-radius:6px; background:#fff;
}
.ro-portlist i{ width:6px; height:6px; border-radius:50%; }
.ro-portlist .ok{ color:#2c6b34; } .ro-portlist .ok i{ background:var(--ok); }
.ro-portlist .no{ color:#8b2b26; } .ro-portlist .no i{ background:var(--no); }

.ro-status__foot{
    margin:6px 0 0; font-size:11px; color:var(--ink-soft);
    display:flex; align-items:center; gap:6px;
}
.ro-tag-demo{
    font-size:9.9px; font-weight:700; letter-spacing:.08em;
    padding:0 4px; border:1px solid #d7b34e; background:#fff6da; color:#8a6416; border-radius:6px;
}

/* ---------------- ปุ่ม ---------------- */
.ro-btnrow{ display:flex; gap:4px; margin-top:8px; }
.ro-btn{
    flex:1;
    display:inline-flex; align-items:center; justify-content:center; gap:4px;
    padding:3px 10px;
    font-family:var(--font); font-size:12.1px; font-weight:700; color:#20415e;
    text-decoration:none !important;
    background:linear-gradient(180deg,#ffffff 0%, #e2edf8 48%, #c2d8ee 100%);
    border:1px solid #6f92b4; border-radius:6px;
    box-shadow:inset 0 1px 0 #fff;
    cursor:pointer;
    white-space:nowrap;
}
.ro-btn:hover{ background:linear-gradient(180deg,#ffffff,#f0f7ff 45%,#d6e7f8); border-color:#4e7ba8; }
.ro-btn:active{ background:linear-gradient(180deg,#c2d8ee,#e6f0fa); box-shadow:inset 0 1px 2px rgba(0,0,0,.2); }
.ro-btn--sm{ flex:none; padding:2px 8px; font-size:11px; }
.ro-btn--gold{
    background:linear-gradient(180deg,#fff8e2,#ffe193 48%,#e0b44e);
    border-color:#b58c30; color:#664b0d;
}
.ro-btn--gold:hover{ background:linear-gradient(180deg,#fffdf3,#ffeab4 45%,#eac368); }

/* ---------------- Main Menu ---------------- */
.ro-menu{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.ro-menu__item{
    display:flex; align-items:center; gap:5px;
    padding:4px 5px;
    font-size:12.1px; color:#26445f; text-decoration:none !important;
    border:1px solid transparent; border-radius:6px;
    white-space:nowrap; overflow:hidden;
}
.ro-menu__item:hover{ background:var(--sel); border-color:#9dc0e0; }
.ro-menu__item.is-active{
    background:linear-gradient(180deg,#dceaf8,#b9d4ee);
    border-color:#7ba3c9; font-weight:700;
    box-shadow:inset 0 1px 0 #fff;
}
.ro-menu__icon{ font-size:13.2px; line-height:1; filter:saturate(.9); }
.ro-menu__label{ overflow:hidden; text-overflow:ellipsis; }

/* ---------------- กล่อง "ระบบเสริม" ---------------- */
.ro-feat{ display:flex; flex-direction:column; gap:4px; }
.ro-feat__item{
    display:flex; align-items:center; gap:8px;
    padding:5px 7px;
    background:linear-gradient(180deg,#ffffff 0%, #eef5fb 100%);
    border:1px solid #b9cde0; border-radius:8px;
    text-decoration:none !important; color:#20415e;
}
.ro-feat__item:hover{ background:var(--sel); border-color:#4e7ba8; }
.ro-feat__icon{ width:30px; height:30px; flex:none; }
.ro-feat__label{ font-size:11.6px; font-weight:700; line-height:1.25; }

/* ---------------- ตารางอันดับ ---------------- */
.ro-tabs{ display:flex; gap:3px; margin-bottom:6px; }
.ro-tab{
    flex:1; padding:3px 2px;
    font-family:var(--font); font-size:11px; font-weight:700; color:#3a5d7d;
    background:linear-gradient(180deg,#f7fbff,#dce9f6);
    border:1px solid #93b4d3; border-bottom-color:#7fa3c6;
    border-radius:6px 6px 0 0; cursor:pointer;
    white-space:nowrap;
}
.ro-tab:hover{ background:linear-gradient(180deg,#ffffff,#e9f3fd); }
.ro-tab.is-active{
    background:linear-gradient(180deg,#ffffff,#cfe3f7);
    color:#1b3c5b; border-color:#5f88b0;
    box-shadow:inset 0 -2px 0 #7fb0dd;
}

.ro-rank-wrap{
    background:#fff;
    border:1px solid #b9cde0; border-radius:8px;
    max-height:none; overflow:hidden;
}
.ro-rank{ list-style:none; margin:0; padding:0; }
/* แถวแบบ 2 บรรทัด: ชื่อ + ค่าอยู่บรรทัดบน, อาชีพอยู่บรรทัดล่าง (เหมาะกับคอลัมน์ซ้าย) */
.ro-rank__row{
    display:grid;
    grid-template-columns:22px 1fr auto;
    grid-template-areas:
        "no name val"
        "no job  job";
    column-gap:7px;
    align-items:center;
    padding:4px 8px;
    font-size:12.1px;
    border-bottom:1px dotted #d7e3ee;
}
.ro-rank__row:last-child{ border-bottom:0; }
.ro-rank__row:nth-child(even){ background:#f6fafd; }
.ro-rank__row:hover{ background:var(--sel); }
.ro-rank__no{
    grid-area:no;
    display:grid; place-items:center;
    width:22px; height:22px; font-size:11px; font-weight:700; color:#5a7690;
    background:#eef4fa; border:1px solid #cfdeeb; border-radius:50%;
}
.ro-rank__row.is-top1 .ro-rank__no{ background:#fff2c9; border-color:#dcb54a; color:#8a6416; }
.ro-rank__row.is-top2 .ro-rank__no{ background:#eef1f4; border-color:#a9b6c2; color:#55636f; }
.ro-rank__row.is-top3 .ro-rank__no{ background:#f6e3d2; border-color:#c99a6d; color:#7c5330; }
.ro-rank__name{ grid-area:name; font-weight:700; color:#1d3d5c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ro-rank__row.is-top .ro-rank__name{ color:#12405f; }
.ro-rank__job{ grid-area:job; font-size:11px; color:#7590a8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ro-rank__val{ grid-area:val; text-align:right; color:#2b5c8b; font-weight:700; white-space:nowrap; }
.ro-rank__empty{ padding:10px; text-align:center; color:var(--ink-soft); }

.ro-rank-foot{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:6px;
}
.ro-rank-hint{ font-size:11px; color:var(--ink-soft); }

/* ---------------- หน้าต่างลอยมุมขวาล่าง ---------------- */
.ro-float{
    position:fixed; right:16px; bottom:38px; z-index:800;
    display:flex; gap:8px; align-items:flex-end;
}
.ro-win--mini{ width:112px; }
.ro-win--mini .ro-win__body{ padding:6px; }
.ro-mini-btn{
    display:block; text-align:center;
    padding:4px 2px; font-size:12.1px; font-weight:700; color:#20415e;
    text-decoration:none !important;
    background:linear-gradient(180deg,#ffffff,#e2edf8 48%,#c2d8ee);
    border:1px solid #6f92b4; border-radius:6px;
}
.ro-mini-btn:hover{ background:linear-gradient(180deg,#fff,#eef6ff 45%,#d3e6f8); }

/* ---------------- แถบล่าง ---------------- */
.ro-taskbar{
    position:fixed; left:0; right:0; bottom:0; z-index:900;
    height:28px; display:flex; align-items:center; gap:8px;
    padding:0 10px;
    background:linear-gradient(180deg,#e9f1f9,#c3d6e9 60%,#a9c3dc);
    border-top:1px solid #6f92b4;
    box-shadow:0 -1px 0 #fff inset;
    font-size:12.1px;
}
.ro-taskbar__brand{ font-weight:900; letter-spacing:.1em; color:#2b5680; }
.ro-taskbar__items{ flex:1; display:flex; gap:4px; overflow:hidden; }
.ro-taskbar__btn{
    padding:2px 8px; font-size:11px; font-family:var(--font); color:#20415e;
    background:linear-gradient(180deg,#fff,#dbe9f6);
    border:1px solid #7ba3c9; border-radius:6px; cursor:pointer;
}
.ro-taskbar__btn:hover{ background:linear-gradient(180deg,#fff,#c9e0f6); }
.ro-taskbar__clock{ color:#37556f; font-variant-numeric:tabular-nums; }

/* ปุ่มเพลงพื้นหลัง */
.ro-bgm{ display:flex; align-items:center; gap:6px; }
.ro-bgm__hint{
    font-size:11px; color:#7d5a12; white-space:nowrap;
    padding:1px 7px; border-radius:8px;
    border:1px solid #dcb54a; background:linear-gradient(180deg,#fffbe9,#ffeec0);
    animation:bgmhint 1.8s ease-in-out infinite;
}
@keyframes bgmhint{ 0%,100%{opacity:1} 50%{opacity:.5} }
@media (max-width:700px){ .ro-bgm__hint{ display:none; } }
.ro-bgm__btn{
    width:24px; height:21px; padding:0;
    font-family:var(--font); font-size:12.1px; line-height:1; color:#3a5d7d;
    background:linear-gradient(180deg,#fff,#dbe9f6);
    border:1px solid #7ba3c9; border-radius:6px; cursor:pointer;
}
.ro-bgm__btn:hover{ background:linear-gradient(180deg,#fff,#c9e0f6); }
.ro-bgm__btn.is-on{
    color:#1c5c2a;
    background:linear-gradient(180deg,#fbfffb,#cfe9d2);
    border-color:#79b47f;
}
.ro-bgm__btn:disabled{ opacity:.45; cursor:not-allowed; }

.ro-bgm__vol{
    -webkit-appearance:none; appearance:none;
    width:62px; height:5px; margin:0;
    background:linear-gradient(180deg,#8fa9c2,#c3d7ea);
    border:1px solid #6f92b4; border-radius:4px; cursor:pointer;
}
.ro-bgm__vol::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:10px; height:13px; border-radius:3px;
    background:linear-gradient(180deg,#fff,#d3e4f5);
    border:1px solid #56789b;
}
.ro-bgm__vol::-moz-range-thumb{
    width:10px; height:13px; border-radius:3px;
    background:linear-gradient(180deg,#fff,#d3e4f5);
    border:1px solid #56789b;
}
@media (max-width:520px){ .ro-bgm__vol{ display:none; } }

/* ============================================================
   คอมโพเนนต์ที่ใช้ในหน้าเนื้อหา (pages/*.php)
   ============================================================ */
.ro-content h2{
    margin:0 0 6px; font-size:17.6px; color:#17405f;
    text-shadow:0 1px 0 #fff;
}
.ro-content h3{
    margin:14px 0 4px; font-size:13.2px; color:#1f5480;
    padding-left:8px; border-left:3px solid #7fb0dd;
}
.ro-content h3:first-child{ margin-top:2px; }
/* หัวข้อย่อยใต้ h3 - ใช้ในหน้าข้อมูลเซิร์ฟเวอร์ (ระบบต่อสู้ที่ปรับพิเศษ) */
.ro-content h4{
    margin:10px 0 4px; font-size:12.4px; color:#2a6390; font-weight:700;
}
.ro-content p{ margin:0 0 8px; }
.ro-content ul, .ro-content ol{ margin:0 0 8px; padding-left:20px; }
.ro-content li{ margin-bottom:2px; }
.ro-content hr{ border:0; border-top:1px dashed #b9cde0; margin:12px 0; }

.ro-date{ font-size:11px; color:var(--ink-soft); }

.ro-badge{
    display:inline-block; padding:0 6px;
    font-size:11px; font-weight:700; border-radius:6px;
    border:1px solid #7fa8cf; background:#e8f2fc; color:#20537f;
}
.ro-badge--event{ border-color:#d7b34e; background:#fff6da; color:#8a6416; }
.ro-badge--patch{ border-color:#8fbf8f; background:#eaf7ea; color:#2c6b34; }
.ro-badge--woe  { border-color:#c58c88; background:#fbeceb; color:#8b2b26; }

/* สไลด์แบนเนอร์หน้าแรก (ตั้งค่าได้ที่ Admin CP > สไลด์หน้าแรก) */
.ro-slideshow{
    position:relative;
    width:100%; height:200px;
    margin:0 0 12px;
    border-radius:8px; overflow:hidden;
    border:1px solid #c6d8e8;
    background:#dde7f0;
}
.ro-slide{ position:absolute; inset:0; display:block; opacity:0; }
.ro-slideshow.is-single .ro-slide{ opacity:1; }
.ro-slide a{ display:block; width:100%; height:100%; }
.ro-slide__img{ display:block; width:100%; height:100%; object-fit:cover; }
.ro-slide__cap{
    position:absolute; left:0; right:0; bottom:0;
    padding:6px 10px;
    font-size:12.1px; font-weight:700; color:#fff;
    background:linear-gradient(0deg, rgba(10,25,45,.72), rgba(10,25,45,0));
    text-shadow:0 1px 2px rgba(0,0,0,.5);
}
@media (max-width:640px){ .ro-slideshow{ height:150px; } }
@media (prefers-reduced-motion: reduce){
    .ro-slide{ animation:none !important; opacity:1 !important; }
}

/* ป๊อปอัพประกาศตอนเข้าหน้าแรก (ตั้งค่าได้ที่ Admin CP > ป๊อปอัพประกาศ) */
.ro-popup{
    position:fixed; inset:0; z-index:1000;
    display:flex; align-items:center; justify-content:center;
    padding:16px;
    background:rgba(10,20,35,.55);
    animation:roPopupBg .25s ease;
}
.ro-popup__box{
    position:relative;
    /* กว้างขึ้นจากเดิม (360px) — รูปประกาศส่วนใหญ่เป็นแนวนอน 360px แล้วอ่านตัวหนังสือไม่ออก
       92vw กันล้นจอมือถือ */
    max-width:min(520px, 92vw); width:100%;
    background:var(--win-body);
    border:1px solid var(--win-border); border-radius:var(--radius);
    box-shadow:0 10px 30px rgba(10,20,35,.45), inset 0 0 0 1px rgba(255,255,255,.85);
    overflow:hidden;
    animation:roPopupIn .3s cubic-bezier(.2,.9,.3,1.3);
}
/* contain ไม่ใช่ cover — รูปประกาศต้องเห็นทั้งใบ ถ้า cover จะถูกครอบตัดหัวท้ายทิ้ง
   ซึ่งมักเป็นตรงที่เขียนวันที่/เงื่อนไขไว้พอดี · height:auto ให้กล่องสูงตามสัดส่วนรูปจริง */
.ro-popup__img{
    display:block; width:100%; height:auto;
    max-height:min(70vh, 620px); object-fit:contain; background:#fff;
}
.ro-popup__close{
    position:absolute; top:6px; right:6px;
    width:24px; height:24px; line-height:22px; text-align:center;
    font-size:14px; font-weight:700; color:#33506e; cursor:pointer;
    background:linear-gradient(180deg,#fdfefe,#cddcea);
    border:1px solid #6d8ead; border-radius:50%;
}
.ro-popup__close:hover{ background:linear-gradient(180deg,#fff,#f0b3b3); color:#8f2020; }
.ro-popup__title{
    padding:8px 10px; font-size:12.1px; font-weight:700; color:#1d3d5c; text-align:center;
    border-top:1px solid #c6d8e8;
}
@keyframes roPopupBg{ from{ opacity:0; } to{ opacity:1; } }
@keyframes roPopupIn{ from{ opacity:0; transform:scale(.88) translateY(10px); } to{ opacity:1; transform:scale(1) translateY(0); } }

/* กล่องข่าว */
.ro-news{ margin:0; padding:0; list-style:none; }
.ro-news__item{
    padding:8px; margin-bottom:8px;
    background:#fff; border:1px solid #c6d8e8; border-radius:6px;
    box-shadow:inset 0 1px 0 #fff;
}
.ro-news__head{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.ro-news__title{ font-weight:700; color:#17405f; font-size:13.2px; }

/* กล่องข้อมูล / เตือน */
.ro-panel{
    padding:8px; margin:0 0 10px;
    background:#fff; border:1px solid #c6d8e8; border-radius:6px;
}
.ro-alert{
    padding:6px 8px; margin:0 0 10px;
    border-left:3px solid #7fb0dd; background:#eaf3fb; color:#1f4c72;
    border-radius:6px;
}
.ro-alert--warn{ border-left-color:#dcb54a; background:#fff7e2; color:#7d5a12; }
.ro-alert--ok  { border-left-color:#79b47f; background:#eef8ee; color:#286b30; }
.ro-alert--err { border-left-color:#cc6b64; background:#fdeeed; color:#8b2b26; }

/* ฟอร์ม: ช่องที่ผิด + ข้อความ error */
.ro-input.is-error{ border-color:#c86a63; background:#fff7f6; }
.ro-err{ margin:2px 0 0; font-size:11px; color:#a33a33; }
.ro-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* captcha */
.ro-captcha{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ro-captcha__img{
    display:block; width:150px; height:46px;
    border:1px solid #8aa9c6; border-radius:6px; background:#f4f8fc;
}
.ro-captcha__math{
    font-size:17.6px; font-weight:900; letter-spacing:.06em; color:#1f3a55;
    padding:6px 12px; border:1px solid #8aa9c6; border-radius:6px;
    background:linear-gradient(180deg,#ffffff,#e6eff8);
}
.ro-captcha__in{ flex:1; min-width:120px; }

/* ตาราง */
.ro-table{
    width:100%;
    border-collapse:separate; border-spacing:0;
    background:#fff; border:1px solid #b9cde0;
    border-radius:8px; overflow:hidden;
    font-size:12.1px; margin:0 0 10px;
}
.ro-table tr:last-child td{ border-bottom:0; }
.ro-table th{
    text-align:left; padding:4px 7px;
    background:linear-gradient(180deg,#eaf3fc,#cfe0f0);
    border-bottom:1px solid #a8c4de; color:#1d3d5c; font-size:12.1px;
}
.ro-table td{ padding:4px 7px; border-bottom:1px dotted #d7e3ee; }
.ro-table tr:nth-child(even) td{ background:#f7fbfe; }
.ro-table tr:hover td{ background:var(--sel); }

/* กริดการ์ด */
.ro-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; margin-bottom:10px; }
.ro-card{
    padding:8px; background:#fff;
    border:1px solid #c6d8e8; border-radius:6px;
    box-shadow:inset 0 1px 0 #fff;
}
.ro-card__t{ font-weight:700; color:#1f5480; margin-bottom:3px; }
.ro-card__big{ font-size:22px; font-weight:900; color:#2b5c8b; line-height:1.2; }

/* การ์ดเควส/สูตร (เช่นเควสหมวก) — หัวการ์ด (ไอคอน+ชื่อ) ตามด้วยตารางวัตถุดิบย่อย */
.ro-questcard{
    padding:8px; margin:0 0 12px; background:#fff;
    border:1px solid #c6d8e8; border-radius:8px;
    box-shadow:inset 0 1px 0 #fff;
}
.ro-questcard__head{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.ro-questcard__icon{ flex:none; image-rendering:pixelated; }
.ro-questcard__info{ min-width:0; }
.ro-questcard__title{ font-weight:700; color:#1f5480; }
.ro-questcard .ro-table{ margin-bottom:0; }

/* ฟอร์ม */
.ro-form{ display:grid; gap:7px; max-width:340px; }
.ro-form label{ display:block; font-size:12.1px; color:#41627f; margin-bottom:2px; font-weight:700; }
.ro-input{
    width:100%; padding:4px 6px;
    font-family:var(--font); font-size:13.2px; color:var(--ink);
    background:#fff; border:1px solid #8aa9c6; border-radius:6px;
    box-shadow:inset 1px 1px 2px rgba(40,70,100,.12);
}
.ro-input:focus{ outline:none; border-color:#4e7ba8; box-shadow:inset 1px 1px 2px rgba(40,70,100,.12), 0 0 0 2px #cfe4fa; }
.ro-help{ font-size:11px; color:var(--ink-soft); }

/* ช่องค้นหาไอเทม */
.ro-itemsearch{
    display:flex; gap:6px; align-items:center; flex-wrap:wrap;
    margin:0 0 10px;
}
.ro-itemsearch .ro-input[type=text]{ flex:1; min-width:180px; }
.ro-itemsearch select.ro-input{ flex:none; width:auto; min-width:120px; }
.ro-itemsearch .ro-btn{ flex:none; }

/* แบ่งหน้า */
.ro-pager{ display:flex; gap:5px; align-items:center; justify-content:center; margin:2px 0 10px; }
.ro-pager__now{ font-size:11px; color:var(--ink-soft); padding:0 6px; }

/* บล็อกโค้ด/สคริปต์ไอเทม */
.ro-code{
    margin:0 0 10px; padding:8px 10px;
    background:#f7fbfe; border:1px solid #c6d8e8; border-radius:8px;
    font-family:Consolas, "Courier New", monospace; font-size:11px;
    color:#26445f; white-space:pre-wrap; word-break:break-word;
    max-height:260px; overflow:auto;
}

/* ขั้นตอน */
.ro-steps{ counter-reset:step; list-style:none; margin:0 0 10px; padding:0; }
.ro-steps li{
    counter-increment:step;
    position:relative; padding:4px 0 4px 26px; margin-bottom:2px;
}
.ro-steps li::before{
    content:counter(step);
    position:absolute; left:0; top:4px;
    width:18px; height:18px; display:grid; place-items:center;
    font-size:11px; font-weight:700; color:#20537f;
    background:linear-gradient(180deg,#fff,#d9e8f6);
    border:1px solid #8aa9c6; border-radius:50%;
}

/* ============================================================
   จอเล็ก
   ============================================================ */
@media (max-width: 860px){
    .ro-desktop{ grid-template-columns:1fr; }
    .ro-float{ position:static; margin-top:4px; justify-content:center; }
    .ro-win__body--scroll{ max-height:none; }
    .ro-rank__row{ grid-template-columns:22px 1fr 86px; }
    .ro-rank__job{ display:none; }
}