/* _template/desktop · ธีมแดง-ขาว เน้นหวย · mobile first, กรอบ 440px บนจอใหญ่ · prefix u2- */
:root {
    --u2-red: #E31B23;
    --u2-red2: #C8141C;
    --u2-dark: #8E0A10;
    --u2-ink: #2B1B1B;
    --u2-mute: #8A7474;
    --u2-blush: #FFF4F4;
    --u2-line: #F6D3D3;
    --u2-gold: #FFC93C;
    --u2-w: 440px;
    --u2-nav-h: 64px;
}

body.ui2 {
    margin: 0;
    min-height: 100vh;
    background: #F3E3E3 radial-gradient(circle at 50% 0, #FFE9E9 0, #F1D9D9 70%) fixed;
    font-family: 'Kanit', sans-serif;
    color: var(--u2-ink);
}
body.ui2 #wrapper { display: none; }

.u2-app {
    position: relative;
    max-width: var(--u2-w);
    min-height: 100vh;
    margin: 0 auto;
    padding-bottom: calc(var(--u2-nav-h) + 22px + env(safe-area-inset-bottom));
    background: var(--u2-blush);
    box-shadow: 0 0 40px rgba(142, 10, 16, .18);
    overflow-x: hidden;
}
.u2-app a { text-decoration: none; }

/* ---------- header ---------- */
.u2-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 58px;
    padding: 0 12px;
    background: linear-gradient(180deg, #A70D14 0%, var(--u2-red2) 100%);
    box-shadow: 0 4px 14px rgba(142, 10, 16, .35);
}
.u2-logo { flex: 0 1 auto; min-width: 0; line-height: 0; }
.u2-logo a, .u2-logo img { display: block; }
.u2-logo img {
    height: 50px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
}
.u2-head-btns { display: flex; flex: 0 0 auto; gap: 6px; }
.u2-head-btns a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform .15s;
}
.u2-head-btns a:active { transform: scale(.96); }
.u2-btn-login { color: #fff; border: 1.5px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .08); }
.u2-btn-reg { color: var(--u2-red2); background: linear-gradient(180deg, #fff 0%, #FFF0D6 100%); box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.u2-btn-login:hover { color: #fff; }
.u2-btn-reg:hover { color: var(--u2-dark); }
.u2-head-btns a img { width: 22px; height: 22px; margin-left: -4px; }
.u2-head-btns .u2-member { display: none; }
.u2-head-btns.logged .u2-guest { display: none; }
.u2-head-btns.logged .u2-member { display: inline-flex; }

/* ---------- hero slider ---------- */
.u2-hero { padding: 12px 12px 0; }
.u2-hero-sw {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    box-shadow: 0 8px 22px rgba(142, 10, 16, .35);
}
.u2-hero-sw .swiper-slide { display: block; line-height: 0; }
.u2-hero-sw img { width: 100%; height: 100%; object-fit: cover; }
.u2-hero-pg.swiper-pagination-bullets { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2; text-align: center; line-height: 0; }
.u2-hero-pg .swiper-pagination-bullet { width: 7px; height: 7px; margin: 0 3px; background: #fff; opacity: .55; transition: width .2s; }
.u2-hero-pg .swiper-pagination-bullet-active { width: 18px; border-radius: 4px; opacity: 1; background: var(--u2-gold); }

/* ---------- categories 5 col ---------- */
.u2-cats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    padding: 14px 12px 4px;
}
.u2-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    aspect-ratio: 1 / 1.08;
    padding: 4px 2px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--u2-line);
    box-shadow: 0 4px 10px rgba(200, 20, 28, .08);
    color: var(--u2-ink);
    transition: transform .15s;
}
.u2-cat:active { transform: scale(.95); }
.u2-cat img { width: 76%; max-width: 62px; height: auto; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .18)); }
.u2-cat span { font-size: 14px; font-weight: 600; line-height: 1.2; }
.u2-cat:hover { color: var(--u2-red2); }

/* ---------- results ---------- */
.u2-results { padding: 14px 12px 6px; }
.u2-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.u2-sec-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--u2-ink); }
.u2-sec-head h2 { display: flex; align-items: center; gap: 4px; }
.u2-sec-head h2 img { width: 34px; height: 34px; }
.u2-sec-head a {
    flex: 0 0 auto;
    padding: 5px 12px;
    border: 1.5px solid var(--u2-red);
    border-radius: 999px;
    background: #fff;
    color: var(--u2-red2);
    font-size: 13px;
    font-weight: 600;
}
.u2-sec-head a i { font-size: 11px; margin-left: 2px; }

.u2-res-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 8px; align-items: stretch; }
.u2-res-side { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }

.u2-res-head { display: flex; align-items: center; gap: 8px; }
.u2-res-head h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.25; }
.u2-res-head p { margin: 0; font-size: 12px; line-height: 1.3; color: var(--u2-mute); }

.u2-flag { flex: 0 0 auto; width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2)); }

/* การ์ดใหญ่ หวยรัฐบาล */
.u2-res-main {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 10px 10px;
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(120% 70% at 50% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 65%), radial-gradient(80% 60% at 100% 100%, rgba(255, 107, 107, .38) 0%, rgba(255, 107, 107, 0) 70%), radial-gradient(70% 55% at 0% 100%, rgba(255, 196, 0, .16) 0%, rgba(255, 196, 0, 0) 70%), linear-gradient(165deg, #FFF7F7 0%, #FFE6E7 55%, #FFD2D5 100%);
    border: 1px solid var(--u2-line);
    box-shadow: 0 4px 12px rgba(200, 20, 28, .08);
}
.u2-prize1 {
    margin-top: auto; /* prize1+prize2 กึ่งกลางแนวตั้งในพื้นที่ใต้หัวการ์ด */
    padding: 8px 6px;
    border-radius: 12px;
    text-align: center;
    background: var(--u2-blush);
    border: 1px solid var(--u2-line);
}
.u2-prize1 span, .u2-prize2 span, .u2-mini span { display: block; font-size: 12px; line-height: 1.3; }
.u2-prize1 span, .u2-prize2 span { color: var(--u2-mute); }
.u2-prize1 strong { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: 1px; color: var(--u2-red2); }
.u2-prize2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: auto; }
.u2-prize2 > div { padding: 6px 4px; border-radius: 10px; text-align: center; background: var(--u2-blush); border: 1px solid var(--u2-line); }
.u2-prize2 strong { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--u2-ink); }

/* การ์ดเล็ก ลาว / ฮานอย */
.u2-res-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 9px 9px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--u2-line);
    box-shadow: 0 4px 12px rgba(200, 20, 28, .08);
}
.u2-res-card .u2-flag { width: 28px; height: 28px; }
.u2-res-card .u2-res-head h3 { font-size: 14px; }
.u2-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.u2-mini > div { padding: 4px 2px; border-radius: 8px; text-align: center; background: var(--u2-blush); border: 1px solid var(--u2-line); }
.u2-mini span { font-size: 11px; color: var(--u2-mute); }
.u2-mini strong { display: block; font-size: 19px; font-weight: 800; line-height: 1.15; color: var(--u2-ink); }
.u2-res-btn {
    display: block;
    margin-top: auto;
    padding: 3px 0;
    border-radius: 999px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #F2343B, var(--u2-red2));
    box-shadow: 0 3px 8px rgba(227, 27, 35, .3);
}

/* ---------- footer copyright ---------- */
.u2-footer { margin: 4px 12px 0; padding: 14px 0 24px; border-top: 1px solid var(--u2-line); text-align: center; } /* 24px: เว้นให้ปุ่มสมัครกลางเมนูล่างที่ยื่นขึ้นมา */
.u2-footer p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--u2-mute); }
.u2-footer strong { color: var(--u2-red2); font-weight: 700; }

/* ---------- trust row (แบบ paotung234 .v2-trust) 2x2 ---------- */
.u2-trust {
    list-style: none;
    margin: 8px 12px 16px;
    padding: 14px 6px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--u2-blush) 100%);
    border: 1px solid var(--u2-line);
    box-shadow: 0 6px 18px rgba(200, 20, 28, .08);
}
.u2-trust li { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 8px; min-width: 0; }
.u2-trust li:nth-child(even)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: var(--u2-line);
}
.u2-trust li:nth-child(4)::before { top: 30%; }
.u2-trust li:nth-child(n+3) { padding-top: 14px; }
.u2-trust li:nth-child(n+3)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
    height: 1px;
    background: var(--u2-line);
}
.u2-trust i {
    flex: none;
    width: 34px;
    font-size: 26px;
    line-height: 1;
    text-align: center;
    background: linear-gradient(180deg, #FF5A60 0%, var(--u2-red2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 3px rgba(200, 20, 28, .25));
}
.u2-trust li > div { display: flex; flex-direction: column; min-width: 0; }
.u2-trust-title { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--u2-ink); white-space: nowrap; }
.u2-trust-note { font-size: 11.5px; line-height: 1.4; color: var(--u2-mute); white-space: nowrap; }
.u2-res-btn:hover { color: #fff; }

/* ---------- bottom nav ---------- */
.u2-bnav {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 900;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    width: 100%;
    max-width: var(--u2-w);
    height: calc(var(--u2-nav-h) + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom);
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 18px rgba(142, 10, 16, .14);
}
.u2-bnav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: var(--u2-nav-h);
    color: var(--u2-red2);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1;
}
.u2-bnav a > img { width: 30px; height: 30px; object-fit: contain; }
.u2-bnav a:hover { color: var(--u2-dark); }
.u2-bnav .u2-bnav-reg { justify-content: flex-end; padding-bottom: 9px; font-weight: 600; }
.u2-bnav .u2-bnav-reg b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-top: -30px;
    border-radius: 50%;
    border: 3px solid var(--u2-gold);
    background: radial-gradient(circle at 50% 35%, #fff 0%, #FFE6E6 100%);
    box-shadow: 0 6px 16px rgba(227, 27, 35, .45), 0 0 0 4px #fff;
}
.u2-bnav .u2-bnav-reg b img { width: 42px; height: 42px; }

/* ---------- modal login / register (ui2) ---------- */
[ng-cloak] { display: none !important; }
.u2-modal { font-family: 'Kanit', sans-serif; color: var(--u2-ink); }
.u2-modal .modal-dialog { max-width: 400px; margin: 14px auto; padding: 0 14px; }
.u2-modal .modal-content {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 20px 50px rgba(80, 0, 6, .4);
}
.u2-m-head {
    position: relative;
    padding: 18px 18px 16px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 85% -10%, rgba(255, 201, 60, .35) 0, transparent 45%),
        linear-gradient(160deg, #F2343B 0%, var(--u2-red2) 50%, var(--u2-dark) 100%);
}
.u2-m-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 17px;
    line-height: 34px;
}
.u2-m-close:hover { background: rgba(255, 255, 255, .3); }
.u2-m-icon {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 4px;
    padding: 6px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--u2-gold);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}
.u2-m-title { margin: 4px 0 0; font-size: 22px; font-weight: 700; color: #fff; }
.u2-m-sub { margin: 2px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .85); }

.u2-steps { display: flex; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.u2-steps li {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .18);
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    font-weight: 500;
}
.u2-steps li b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    font-size: 12px;
}
.u2-steps li.is-on { background: #fff; color: var(--u2-red2); }
.u2-steps li.is-on b { background: var(--u2-red); color: #fff; }

.u2-m-body { padding: 18px 18px 20px; }
.u2-field { display: block; margin: 0 0 14px; }
.u2-field-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--u2-ink); }
.u2-input {
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    border: 1.5px solid var(--u2-line);
    border-radius: 14px;
    background: #FFFAFA;
    transition: border-color .15s, box-shadow .15s;
}
.u2-input:focus-within { border-color: var(--u2-red); background: #fff; box-shadow: 0 0 0 4px rgba(227, 27, 35, .12); }
.u2-input > i:first-child { flex: 0 0 44px; text-align: center; color: #C9A3A3; font-size: 16px; }
.u2-input:focus-within > i:first-child, .u2-input.is-ok > i:first-child { color: var(--u2-red); }
.u2-input input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 12px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: var(--u2-ink);
}
.u2-input input::placeholder { color: #BFA9A9; }
.u2-input .u2-ok { display: none; flex: 0 0 auto; margin-right: 12px; color: #1FA45B; }
.u2-input.is-ok .u2-ok { display: block; }
.u2-input.is-ok { border-color: #9ED9B6; }
.u2-input.is-bad { border-color: #F08A8A; }
.u2-eye { flex: 0 0 44px; height: 100%; border: 0; background: none; color: #A78C8C; font-size: 16px; }
.u2-hint { display: block; margin-top: 5px; font-size: 12.5px; color: var(--u2-mute); }
.u2-hint-bad { color: var(--u2-red); }

.u2-m-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    margin-top: 6px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #F2343B 0%, var(--u2-red2) 100%);
    box-shadow: 0 8px 18px rgba(227, 27, 35, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    transition: transform .15s, filter .15s;
}
.u2-m-submit:active { transform: scale(.98); }
.u2-m-submit:disabled { background: #E9D6D6; box-shadow: none; color: #fff; }
.u2-m-switch { margin-top: 14px; text-align: center; font-size: 14.5px; color: var(--u2-mute); }
.u2-m-switch a { color: var(--u2-red2); font-weight: 700; }
.u2-m-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--u2-line);
    font-size: 13.5px;
    color: var(--u2-mute);
}
.u2-m-help img { width: 24px; height: 24px; }
.u2-m-help:hover { color: var(--u2-red2); }

.u2-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #FFECEC;
    border: 1px solid #F7B9B9;
    color: #B3121A;
    font-size: 14px;
}
.u2-alert > i { margin-top: 3px; }
.u2-alert span { flex: 1; }
.u2-alert button { border: 0; background: none; color: inherit; }

.u2-banks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    padding: 2px;
}
.u2-bank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 2px 6px;
    border: 1.5px solid var(--u2-line);
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.u2-bank-logo { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.u2-bank-logo img { width: 72%; height: 72%; object-fit: contain; }
.u2-bank-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; min-height: 2.5em; overflow: hidden; font-size: 11.5px; line-height: 1.25; text-align: center; color: var(--u2-mute); }
.u2-bank.is-on { border-color: var(--u2-red); background: #FFF1F1; box-shadow: 0 0 0 3px rgba(227, 27, 35, .12); }
.u2-bank.is-on .u2-bank-name { color: var(--u2-red2); font-weight: 600; }
.u2-m-status { margin: 12px 0 0; text-align: center; font-size: 14px; color: #1FA45B; }

/* ---------- หน้าโปรโมชั่น / บทความ (UI2_PAGE) ---------- */
.u2-page { padding: 14px 12px 8px; }
.u2-page-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.u2-page-head img { flex: none; width: 52px; height: 52px; }
.u2-page-head h1 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--u2-ink); }
.u2-page-head p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--u2-mute); }
.u2-empty { padding: 40px 0; text-align: center; color: var(--u2-mute); }

/* ปุ่มทั่วไป + สลับ guest/member ตาม .chk_login.logged (login.js) */
.u2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.u2-btn-red { border: 0; color: #fff; background: linear-gradient(180deg, #F2343B 0%, var(--u2-red2) 100%); box-shadow: 0 6px 14px rgba(227, 27, 35, .3); }
.u2-btn-ghost { border: 1.5px solid var(--u2-red); color: var(--u2-red2); background: #fff; }
.u2-btn:active { transform: scale(.97); }
.chk_login:not(.u2-head-btns) .u2-member { display: none; }
.chk_login.logged:not(.u2-head-btns) .u2-guest { display: none; }
.chk_login.logged:not(.u2-head-btns) .u2-member { display: inline-flex; }
.u2-m-foot.chk_login.logged .u2-member { display: flex; }

/* การ์ดโปรโมชั่น */
.u2-promos { display: grid; gap: 14px; }
.u2-promo { overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--u2-line); box-shadow: 0 6px 18px rgba(200, 20, 28, .08); }
.u2-promo-img { display: block; line-height: 0; background: var(--u2-blush); }
.u2-promo-img img { display: block; width: 100%; height: auto; }
.u2-promo-body { padding: 12px 14px 14px; }
.u2-promo-body h2 { margin: 0 0 10px; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--u2-ink); }
.u2-act { display: flex; gap: 8px; }
.u2-act .u2-btn { flex: 1 1 0; }

/* modal รายละเอียดโปร (ใช้ .u2-modal ร่วมกับ login/register) */
.u2-m-head-sm { padding: 16px 52px 14px; }
.u2-m-head-sm .u2-m-title { margin: 0; font-size: 18px; line-height: 1.35; }
.u2-promo-modal-img { display: block; width: 100%; height: auto; margin: 0 0 12px; border-radius: 14px; }
.u2-m-foot { padding: 12px 18px 16px; border-top: 1px solid var(--u2-line); background: #fff; }
.u2-m-foot .u2-m-submit { margin: 0; }

/* เนื้อหา HTML จากหลังบ้าน (รายละเอียดโปร / บทความ) */
.u2-prose { font-size: 15.5px; line-height: 1.75; color: #3B2B2B; overflow-wrap: anywhere; }
.u2-prose > :first-child { margin-top: 0; }
.u2-prose * { font-family: inherit !important; } /* หลังบ้านใส่ font-family: Times New Roman แบบ inline */
.u2-prose p { margin: 0 0 12px; }
.u2-prose h2, .u2-prose h3, .u2-prose h4 { margin: 20px 0 8px; font-weight: 700; line-height: 1.35; color: var(--u2-ink); }
.u2-prose h2 { font-size: 20px; }
.u2-prose h3 { font-size: 18px; }
.u2-prose h4 { font-size: 16px; }
.u2-prose a { color: var(--u2-red2); text-decoration: underline; }
.u2-prose ul, .u2-prose ol { margin: 0 0 12px; padding-left: 22px; }
.u2-prose li { margin: 0 0 4px; }
.u2-prose li::marker { color: var(--u2-red); }
.u2-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.u2-prose table { width: 100%; margin: 0 0 12px; border-collapse: collapse; font-size: 14px; }
.u2-prose th, .u2-prose td { padding: 6px 8px; border: 1px solid var(--u2-line); }
.u2-prose blockquote { margin: 0 0 12px; padding: 8px 12px; border-left: 4px solid var(--u2-red); border-radius: 0 10px 10px 0; background: #fff; }

/* รายการบทความ */
.u2-posts { display: grid; gap: 10px; }
.u2-post { display: flex; gap: 12px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--u2-line); box-shadow: 0 4px 12px rgba(200, 20, 28, .06); color: var(--u2-ink); }
.u2-post-img { flex: none; width: 128px; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--u2-blush) center / cover no-repeat; }
.u2-post-body { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.u2-post-body strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.4; }
.u2-post-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.45; color: var(--u2-mute); }
.u2-post-more { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--u2-red2); }
.u2-post-more i { font-size: 11px; }
.u2-pager { display: flex; justify-content: center; margin: 16px 0 4px; }
.u2-pager .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 38px; margin: 0 3px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--u2-line); background: #fff; color: var(--u2-ink); font-size: 14px; }
.u2-pager .btn[disabled] { opacity: .45; }
.u2-pager .btn-primary, .u2-pager .btn.active, .u2-pager .btn-danger { border-color: var(--u2-red); background: var(--u2-red); color: #fff; opacity: 1; }

/* หน้าอ่านบทความ */
.u2-crumb { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; color: var(--u2-mute); }
.u2-crumb a { color: var(--u2-mute); }
.u2-crumb a:hover { color: var(--u2-red2); }
.u2-crumb i { font-size: 9px; }
.u2-article-title { margin: 0 0 12px; font-size: 22px; font-weight: 700; line-height: 1.4; color: var(--u2-ink); }
.u2-article-img { margin: 0 0 16px; line-height: 0; }
.u2-article-img img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 6px 18px rgba(200, 20, 28, .1); }
.u2-cta { display: flex; align-items: center; gap: 10px; margin: 20px 0 14px; padding: 12px; border-radius: 16px; border: 1px solid var(--u2-line); background: linear-gradient(135deg, #fff 0%, #FFE6E7 100%); }
.u2-cta > img { flex: none; width: 46px; height: 46px; }
.u2-cta > div { flex: 1 1 auto; min-width: 0; }
.u2-cta strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--u2-ink); }
.u2-cta span { display: block; font-size: 12.5px; color: var(--u2-mute); }
.u2-cta .u2-btn { flex: none; height: 40px; padding: 0 14px; }
.u2-nextprev { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.u2-nextprev a { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--u2-line); color: var(--u2-ink); }
.u2-nextprev small { font-size: 12px; font-weight: 600; color: var(--u2-red2); }
.u2-nextprev a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.u2-np-next { grid-column: 2; text-align: right; }
.u2-back { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 12px; border: 1.5px solid var(--u2-red); background: #fff; color: var(--u2-red2); font-weight: 600; }

/* ---------- หน้าหมวดเกม (page.php) ---------- */
.u2-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 14px; }
.u2-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 62px; border-radius: 14px; border: 1px solid var(--u2-line); background: #fff; color: var(--u2-ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.u2-tab img { width: 30px; height: 30px; }
.u2-tab.is-active { border-color: transparent; color: #fff; background: linear-gradient(180deg, #F2343B 0%, var(--u2-red2) 100%); box-shadow: 0 5px 12px rgba(227, 27, 35, .28); }
.u2-games { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.u2-games.is-single { grid-template-columns: 1fr; }
.u2-game { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid var(--u2-line); box-shadow: 0 4px 12px rgba(200, 20, 28, .07); color: var(--u2-ink); }
.u2-game-img { display: block; line-height: 0; background: #2B1B1B; }
.u2-game-img img { display: block; width: 100%; height: auto; transition: transform .25s; }
.u2-game:hover .u2-game-img img { transform: scale(1.04); }
.u2-game:active { transform: scale(.98); }
.u2-game-foot { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.u2-game-foot b { font-size: 14.5px; font-weight: 700; line-height: 1.3; text-align: center; }
.u2-game-play { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 10px; color: #fff; background: linear-gradient(180deg, #F2343B 0%, var(--u2-red2) 100%); font-size: 14px; font-weight: 600; }
.u2-game-play i { font-size: 11px; }

/* ---------- หน้าจอเล็กมาก ---------- */
@media (max-width: 374px) {
    .u2-trust li { gap: 6px; padding-left: 6px; padding-right: 4px; }
    .u2-trust i { width: 26px; font-size: 21px; }
    .u2-trust-title { font-size: 12px; }
    .u2-trust-note { font-size: 10.5px; }
    .u2-logo img { height: 32px; max-width: 130px; }
    .u2-head-btns a { padding: 0 9px; font-size: 13px; }
    .u2-cat span { font-size: 12.5px; }
    .u2-prize1 strong { font-size: 25px; }
    .u2-prize2 strong { font-size: 20px; }
    .u2-mini strong { font-size: 17px; }
    .u2-sec-head h2 { font-size: 18px; }
    .u2-tab { font-size: 12.5px; }
}