/* ========================================================================== ข่าวอุบลมองต่างมุม — Design tokens แนวคิด: หนักแน่นด้านนอก อบอุ่นด้านใน โซนเข้ม = จับตา/ร้องเรียน โซนครีม = อุบลมุมบวก ========================================================================== */ /* ค่าเริ่มต้น: โหมดพอร์ทัลข่าว พื้นขาวสะอาด อ่านง่าย */ :root, [data-palette="paper"] { --ink-900: #F2F3F5; --ink-800: #FFFFFF; --ink-700: #FFFFFF; --ink-600: #E3E5E8; --line-dark: #E2E4E8; --line-dark-soft: #EDEEF1; --rose: #C81E5B; --rose-600: #A81549; --rose-100: #FAD3E0; --sky: #1B5FA8; --cream: #EFF7F1; --cream-200: #DBEBE1; --ink-on-cream: #123326; --sand-600: #5E7A69; --sand-700: #3E5A4A; --cat-watch: #BE1650; --cat-positive: #0C7A50; --cat-isan: #AE4E09; --cat-video: #6425A0; --cat-weekly: #4634B4; --cat-pr: #0A6E82; --cat-lotto: #12693A; /* สีจางของแต่ละหมวด ใช้ทำเส้นใต้และพื้นหลังอ่อน */ --tint-watch: #F7DCE6; --tint-positive: #D5EEE1; --tint-isan: #F7E3CC; --tint-video: #E6DAF5; --tint-weekly: #DEDAF7; --tint-pr: #D2EAF0; --gold: #B98A1E; --band-amber: #FDF6EA; --band-violet: #F3F0FC; --band-teal: #EEF7F9; --on-dark: #16181D; --on-dark-2: #2A2E36; --on-dark-3: #454A54; --on-dark-4: #5A6070; --on-dark-5: #767D8B; --on-dark-6: #949AA6; --ok: #1C7A4E; --wait: #8A5A12; --danger: #B2242A; } /* โหมดถ่านอุ่น */ [data-palette="charcoal"] { --ink-900: #16130F; --ink-800: #1D1915; --ink-700: #262119; --ink-600: #322B22; --line-dark: #3A322A; --line-dark-soft: #2A241D; --rose: #E1547F; --rose-600: #C4436A; --rose-100: #F7CEDD; --sky: #D9A05C; --cream: #F8F4EC; --cream-200: #E9E1D3; --ink-on-cream: #221E18; --sand-600: #8B8171; --sand-700: #6C6357; --on-dark: #EFEAE2; --on-dark-2: #DCD5C9; --on-dark-3: #BDB4A6; --on-dark-4: #A79D8D; --on-dark-5: #8C8274; --on-dark-6: #756C60; --ok: #63C79B; --wait: #E0A45E; --danger: #E07C7E; } /* โหมดเขียวเข้ม */ [data-palette="forest"] { --ink-900: #0C1713; --ink-800: #10201A; --ink-700: #172C24; --ink-600: #1F3A30; --line-dark: #274438; --line-dark-soft: #1B3229; --rose: #E1547F; --rose-600: #C4436A; --rose-100: #F7CEDD; --sky: #7FC9A8; --cream: #F7F5EE; --cream-200: #E8E2D6; --ink-on-cream: #16241F; --sand-600: #8B8878; --sand-700: #6B6A5C; --on-dark: #E9F0EA; --on-dark-2: #D0DCD2; --on-dark-3: #ADBDB0; --on-dark-4: #97A89A; --on-dark-5: #7D8E80; --on-dark-6: #6A7A6D; --ok: #6FCFA2; --wait: #E0A45E; --danger: #E07C7E; } :root { --font-display: "Anuphan", "Noto Sans Thai", system-ui, sans-serif; --font-body: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif; --step--1: 0.8125rem; --step-0: 1rem; --step-1: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem); --step-2: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem); --step-3: clamp(1.5rem, 1.2vw + 1.2rem, 2rem); --step-4: clamp(1.875rem, 2.4vw + 1.2rem, 2.875rem); --wrap: 1200px; --gutter: clamp(1.125rem, 4vw, 2.5rem); --radius: 8px; --radius-sm: 6px; --section-y: clamp(3.25rem, 6vw, 5.5rem); } /* ========================================================================== Reset / base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--ink-800); color: var(--on-dark-3); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } img, svg, video, iframe { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.4; color: var(--on-dark); margin: 0; letter-spacing: -0.01em; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 3px; } button { font: inherit; cursor: pointer; } ::selection { background: var(--rose); color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; top: -100px; transform: translateX(-50%); background: var(--rose); color: #fff; padding: 12px 22px; border-radius: 0 0 var(--radius) var(--radius); z-index: 200; font-size: var(--step--1); } .skip-link:focus { top: 0; } .container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--ink-800); border-bottom: 1px solid var(--line-dark); } .header-bar { display: flex; align-items: center; gap: 18px; min-height: 68px; } .brand { display: flex; align-items: center; gap: 12px; margin-right: auto; } .brand__mark { width: 42px; height: 42px; flex: none; border-radius: 50%; object-fit: contain; } .brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--on-dark); line-height: 1.25; } .brand__sub { font-size: 0.6875rem; color: var(--on-dark-5); line-height: 1.4; margin-top: 1px; } .nav { display: none; } .nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav a { display: block; padding: 9px 13px; border-radius: var(--radius-sm); font-size: 0.9375rem; color: var(--on-dark-3); transition: background 150ms ease, color 150ms ease; } .nav a:hover { background: var(--ink-700); color: var(--on-dark); } .nav .current-menu-item > a { color: var(--on-dark); box-shadow: inset 0 -2px 0 var(--rose); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 20px; border-radius: var(--radius); font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; border: 1px solid transparent; text-align: center; transition: background 160ms ease, border-color 160ms ease, transform 120ms ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--rose); color: #fff; } .btn--primary:hover { background: var(--rose-600); } .btn--ghost { border-color: var(--line-dark); color: var(--on-dark-2); } .btn--ghost:hover { background: var(--ink-700); border-color: var(--on-dark-6); } .btn--onCream { background: var(--ink-on-cream); color: #fff; } .btn--onCream:hover { background: #26323F; } .btn--block { width: 100%; } .btn--lg { padding: 15px 26px; font-size: 1rem; } .header-cta { display: none; } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--line-dark); color: var(--on-dark-2); } .menu-toggle svg { width: 22px; height: 22px; } .menu-toggle .icon-close { display: none; } .menu-toggle[aria-expanded="true"] .icon-open { display: none; } .menu-toggle[aria-expanded="true"] .icon-close { display: block; } .drawer { display: none; border-top: 1px solid var(--line-dark); background: var(--ink-800); padding: 14px 0 22px; } .drawer.is-open { display: block; } .drawer ul { list-style: none; margin: 0 0 16px; padding: 0; } .drawer a { display: block; padding: 13px 4px; font-size: 1.0625rem; color: var(--on-dark-2); border-bottom: 1px solid var(--line-dark-soft); } @media (min-width: 900px) { .header-cta { display: block; } .menu-toggle, .drawer { display: none !important; } .header-bar { min-height: 76px; gap: 26px; } } /* ========================================================================== Sections ========================================================================== */ .section { padding-block: var(--section-y); } .section--dark { background: var(--ink-800); } .section--darker { background: var(--ink-900); } .section--panel { background: var(--ink-700); border-block: 1px solid var(--line-dark-soft); } .section--cream { background: var(--cream); color: var(--sand-700); } .section--cream h1, .section--cream h2, .section--cream h3 { color: var(--ink-on-cream); } .section--tight { padding-block: clamp(2rem, 3.5vw, 2.75rem); } .kicker { display: inline-block; font-family: var(--font-display); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.14em; color: var(--rose); border-left: 2px solid var(--rose); padding-left: 10px; margin-bottom: 14px; } .section--cream .kicker { color: var(--rose-600); border-color: var(--rose-600); } .section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .section-head h2 { font-size: var(--step-3); } .section-head p { margin: 0; font-size: 0.875rem; color: var(--on-dark-5); } .section--cream .section-head p { color: var(--sand-600); } .section-head .more { margin-left: auto; font-size: 0.875rem; color: var(--rose); } .section-head .more:hover { text-decoration: underline; } /* ========================================================================== Hero ========================================================================== */ .hero { display: grid; gap: clamp(2rem, 4vw, 2.75rem); } .hero__lead .lead-title { font-weight: 600; font-size: var(--step-4); line-height: 1.32; margin: 14px 0 12px; letter-spacing: -0.02em; } .hero__lead .lead-excerpt { color: var(--on-dark-4); font-size: var(--step-1); } .hero__media { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--ink-600); } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__side { border-top: 1px solid var(--line-dark); padding-top: 22px; } .hero__side .side-label { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--on-dark-5); margin-bottom: 16px; } .side-item { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--line-dark-soft); } .side-item:last-child { border: 0; margin: 0; padding: 0; } .side-item h3 { font-size: 0.9375rem; font-weight: 500; line-height: 1.6; margin-bottom: 7px; color: var(--on-dark-2); } .side-item a:hover h3 { color: var(--rose); } @media (min-width: 940px) { .hero { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .hero__side { border-top: 0; border-left: 1px solid var(--line-dark); padding: 0 0 0 clamp(1.5rem, 2.4vw, 2.25rem); } } /* ========================================================================== Status pills — หัวใจของความน่าเชื่อถือ ========================================================================== */ .status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 0.75rem; font-weight: 500; padding: 5px 11px; border-radius: 4px; white-space: nowrap; } .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .status--checking { background: var(--st-check-bg); color: var(--st-check-fg); } .status--forwarded { background: var(--st-fwd-bg); color: var(--st-fwd-fg); } .status--resolved { background: var(--st-ok-bg); color: var(--st-ok-fg); } .status--closed { background: var(--st-end-bg); color: var(--st-end-fg); } .meta { font-size: 0.75rem; color: var(--on-dark-6); } .section--cream .meta { color: var(--sand-600); } .meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } /* ========================================================================== Cards ========================================================================== */ .grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .card__media { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: var(--ink-600); margin-bottom: 13px; } .section--cream .card__media { background: var(--cream-200); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .card:hover .card__media img { transform: scale(1.035); } .card__title { font-size: 0.9375rem; font-weight: 500; line-height: 1.6; margin-bottom: 8px; color: var(--on-dark-2); } .card__desc { font-size: 0.8125rem; line-height: 1.75; color: var(--on-dark-4); margin: 0 0 9px; } .section--cream .card__desc { color: var(--sand-700); } .section--cream .card__title { color: var(--ink-on-cream); } .card:hover .card__title { color: var(--rose); } .section--cream .card:hover .card__title { color: var(--rose-600); } /* ========================================================================== ขั้นตอนการร้องเรียน ========================================================================== */ .steps { display: grid; gap: 18px; } .step { display: flex; gap: 13px; align-items: flex-start; } .step__icon { color: var(--rose); flex: none; margin-top: 2px; } .step__icon svg { width: 21px; height: 21px; } .step h3 { font-size: 0.9375rem; font-weight: 500; margin-bottom: 4px; } .step p { font-size: 0.8125rem; color: var(--on-dark-5); line-height: 1.7; margin: 0; } @media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 26px; } } /* ========================================================================== วิดีโอ — โหลดภาพปกก่อน กดแล้วค่อยโหลด YouTube ========================================================================== */ .video-layout { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); } @media (min-width: 940px) { .video-layout { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } } .vfacade { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; overflow: hidden; border-radius: var(--radius); background: var(--ink-600); display: block; } .vfacade img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease, opacity 250ms ease; } .vfacade::after { content: ""; position: absolute; inset: 0; background: rgba(10, 19, 34, 0.26); transition: background 250ms ease; } .vfacade:hover img { transform: scale(1.03); } .vfacade:hover::after { background: rgba(10, 19, 34, 0.06); } .vfacade__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%; background: var(--rose); color: #fff; z-index: 2; display: grid; place-items: center; transition: transform 200ms ease, background 200ms ease; } .vfacade:hover .vfacade__play { transform: translate(-50%, -50%) scale(1.07); background: var(--rose-600); } .vfacade__play svg { width: 22px; height: 22px; margin-left: 3px; } .vfacade iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .vfacade.is-playing::after, .vfacade.is-playing .vfacade__play { display: none; } .video-main__title { font-size: var(--step-2); margin: 16px 0 8px; line-height: 1.45; } .video-list { display: grid; gap: 16px; align-content: start; } .video-item { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 13px; align-items: start; } .video-item .vfacade { border-radius: var(--radius-sm); } .video-item .vfacade__play { width: 38px; height: 38px; } .video-item .vfacade__play svg { width: 14px; height: 14px; } .video-item h3 { font-size: 0.875rem; font-weight: 500; line-height: 1.6; color: var(--on-dark-2); margin-bottom: 5px; } /* ========================================================================== แถบชวนร้องเรียน ========================================================================== */ .cta-band { display: grid; gap: 20px; align-items: center; } .cta-band h2 { font-size: var(--step-2); margin-bottom: 8px; } .cta-band p { font-size: 0.875rem; color: var(--on-dark-5); margin: 0; } @media (min-width: 800px) { .cta-band { grid-template-columns: 1fr auto; gap: 34px; } } .assurance { display: flex; gap: 10px; align-items: flex-start; background: var(--ink-900); border-radius: var(--radius); padding: 14px 15px; font-size: 0.8125rem; line-height: 1.75; color: var(--on-dark-4); } .assurance svg { width: 17px; height: 17px; color: var(--ok); flex: none; margin-top: 3px; } /* ========================================================================== ช่องทางติดต่อ ========================================================================== */ .channel { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line-dark); margin-bottom: 10px; transition: border-color 160ms ease, background 160ms ease; } .channel:hover { border-color: var(--on-dark-6); background: var(--ink-700); } .channel--primary { background: var(--rose); border-color: var(--rose); } .channel--primary:hover { background: var(--rose-600); border-color: var(--rose-600); } .channel--primary .channel__label { color: #fff; } .channel--primary .channel__note { color: var(--rose-100); } .channel__icon { flex: none; color: var(--on-dark-3); } .channel--primary .channel__icon { color: #fff; } .channel__icon svg { width: 22px; height: 22px; } .channel__body { flex: 1; min-width: 0; } .channel__label { font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; color: var(--on-dark-2); } .channel__phone { font-size: 1.0625rem; letter-spacing: 0.03em; color: var(--on-dark); font-variant-numeric: tabular-nums; } .channel__note { font-size: 0.6875rem; color: var(--on-dark-5); margin-top: 3px; } .channel__chev { flex: none; color: var(--on-dark-6); } .channel--primary .channel__chev { color: #fff; } .divider-label { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; } .divider-label::before, .divider-label::after { content: ""; height: 1px; background: var(--line-dark); flex: 1; } .divider-label span { font-size: 0.6875rem; color: var(--on-dark-6); } /* ========================================================================== ฟอร์ม ========================================================================== */ .field { margin-bottom: 18px; } .field label { display: block; font-size: 0.875rem; color: var(--on-dark-2); margin-bottom: 7px; } .field .hint { font-size: 0.75rem; color: var(--on-dark-6); margin-top: 6px; line-height: 1.7; } .field .req { color: var(--rose); } input[type="text"], input[type="tel"], input[type="email"], input[type="search"], select, textarea { width: 100%; padding: 12px 14px; background: var(--ink-700); color: var(--on-dark); border: 1px solid var(--line-dark); border-radius: var(--radius-sm); font: inherit; font-size: 1rem; } textarea { min-height: 150px; resize: vertical; line-height: 1.8; } input::placeholder, textarea::placeholder { color: var(--on-dark-6); } input:hover, select:hover, textarea:hover { border-color: var(--on-dark-6); } .choice { display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); margin-bottom: 9px; cursor: pointer; } .choice:hover { border-color: var(--on-dark-6); background: var(--ink-700); } .choice input { margin-top: 5px; accent-color: var(--rose); flex: none; } .choice__label { font-size: 0.9375rem; color: var(--on-dark-2); } .choice__note { font-size: 0.75rem; color: var(--on-dark-6); margin-top: 3px; line-height: 1.7; } .notice { border-radius: var(--radius); padding: 15px 17px; font-size: 0.875rem; line-height: 1.75; margin-bottom: 22px; } .notice--info { background: var(--ink-700); color: var(--on-dark-4); border-left: 3px solid var(--rose); border-radius: 0 var(--radius) var(--radius) 0; } .notice--ok { background: var(--st-ok-bg); color: var(--st-ok-fg); } .notice--warn { background: var(--st-fwd-bg); color: var(--st-fwd-fg); } /* ========================================================================== ค้นสถานะเรื่อง + ไทม์ไลน์ ========================================================================== */ .lookup { display: flex; gap: 10px; flex-wrap: wrap; } .lookup input { flex: 1; min-width: 190px; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; } .case-card { background: var(--ink-700); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem); } .case-code { font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--on-dark-5); margin-bottom: 10px; } .timeline { list-style: none; margin: 22px 0 0; padding: 0 0 0 22px; border-left: 1px solid var(--line-dark); } .timeline li { position: relative; padding-bottom: 22px; } .timeline li:last-child { padding-bottom: 0; } .timeline li::before { content: ""; position: absolute; left: -27px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-700); border: 2px solid var(--line-dark); } .timeline li:first-child::before { background: var(--rose); border-color: var(--rose); } .timeline time { display: block; font-size: 0.75rem; color: var(--on-dark-6); margin-bottom: 4px; } .timeline p { font-size: 0.875rem; color: var(--on-dark-3); margin: 0; } /* ========================================================================== บทความ ========================================================================== */ .article-head { max-width: 760px; } .article-title { font-weight: 600; font-size: var(--step-4); line-height: 1.34; margin: 16px 0 14px; letter-spacing: -0.02em; } .article-figure { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; } .article-figure img { width: 100%; border-radius: var(--radius); } .article-figure figcaption { font-size: 0.75rem; color: var(--on-dark-6); margin-top: 10px; } .prose { max-width: 720px; font-size: var(--step-1); color: var(--on-dark-3); line-height: 1.95; } .prose h2 { font-size: var(--step-2); margin: 2em 0 0.7em; } .prose h3 { font-size: var(--step-1); margin: 1.7em 0 0.6em; } .prose a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; } .prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; } .prose li { margin-bottom: 0.55em; } .prose blockquote { margin: 1.7em 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--rose); color: var(--on-dark-2); } .prose img { border-radius: var(--radius); margin: 1.7em 0; } .prose hr { border: 0; border-top: 1px solid var(--line-dark); margin: 2.4em 0; } .editorial-note { margin-top: clamp(2rem, 4vw, 3rem); padding: 18px 20px; background: var(--ink-700); border-radius: var(--radius); font-size: 0.8125rem; line-height: 1.8; color: var(--on-dark-5); max-width: 720px; } /* ========================================================================== สถานะว่าง ========================================================================== */ .empty { border: 1px dashed var(--line-dark); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 2.75rem); text-align: center; } .empty h3 { font-size: var(--step-1); margin-bottom: 8px; } .empty p { font-size: 0.875rem; color: var(--on-dark-5); max-width: 46ch; margin-inline: auto; } .section--cream .empty { border-color: var(--cream-200); } .section--cream .empty p { color: var(--sand-600); } .placeholder-flag { display: inline-block; font-size: 0.6875rem; letter-spacing: 0.08em; background: var(--st-fwd-bg); color: var(--st-fwd-fg); padding: 4px 10px; border-radius: 4px; margin-bottom: 14px; } /* ========================================================================== Pagination ========================================================================== */ .pagination { margin-top: clamp(2rem, 4vw, 3rem); } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; margin-right: 6px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--on-dark-3); } .pagination .page-numbers:hover { border-color: var(--on-dark-6); background: var(--ink-700); } .pagination .current { background: var(--rose); border-color: var(--rose); color: #fff; } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--ink-900); border-top: 1px solid var(--line-dark); } .footer-grid { display: grid; gap: 34px; padding-block: clamp(2.5rem, 5vw, 3.5rem); } @media (min-width: 800px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; } } .footer-grid h3 { font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--on-dark-5); margin-bottom: 15px; font-weight: 500; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: 10px; } .footer-grid a { font-size: 0.875rem; color: var(--on-dark-3); } .footer-grid a:hover { color: var(--rose); } .footer-about p { font-size: 0.8125rem; color: var(--on-dark-5); line-height: 1.85; max-width: 40ch; } .footer-bottom { border-top: 1px solid var(--line-dark-soft); padding-block: 20px; font-size: 0.75rem; color: var(--on-dark-6); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; } /* ========================================================================== Animation หลักการ: เคลื่อนไหวเพื่อบอกลำดับการอ่าน ไม่ใช่เพื่อความหวือหวา ทุกอย่างปิดเองเมื่อผู้ใช้ตั้งค่าลดการเคลื่อนไหวไว้ในเครื่อง คลาส has-anim ใส่โดย JavaScript เนื้อหาจึงมองเห็นเสมอแม้ JS ไม่ทำงาน ========================================================================== */ html.has-anim .reveal { opacity: 0; transform: translateY(16px); will-change: opacity, transform; } html.has-anim .reveal.is-in { opacity: 1; transform: none; transition: opacity 620ms ease, transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1); } html.has-anim .hero__lead .kicker, html.has-anim .hero__lead .hero__media, html.has-anim .hero__lead .lead-title, html.has-anim .hero__lead .lead-excerpt, html.has-anim .hero__lead .meta-row { opacity: 0; animation: ut-rise 720ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } html.has-anim .hero__lead .kicker { animation-delay: 60ms; } html.has-anim .hero__lead .hero__media { animation-delay: 140ms; } html.has-anim .hero__lead .lead-title { animation-delay: 240ms; } html.has-anim .hero__lead .lead-excerpt { animation-delay: 330ms; } html.has-anim .hero__lead .meta-row { animation-delay: 410ms; } @keyframes ut-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .site-header { transition: border-color 220ms ease, background 220ms ease; } .site-header.is-scrolled { border-bottom-color: var(--on-dark-6); } .card a { display: block; } .card__title { transition: color 180ms ease; } .side-item h3 { transition: color 180ms ease; } .channel { transition: border-color 180ms ease, background 180ms ease, transform 160ms ease; } .channel:hover { transform: translateX(2px); } .kicker { transition: none; } .status--checking::before { animation: ut-pulse 2.6s ease-in-out infinite; } @keyframes ut-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .btn--primary { transition: background 160ms ease, transform 120ms ease, box-shadow 200ms ease; } .btn--primary:hover { box-shadow: 0 4px 18px rgba(225, 74, 125, 0.28); } @media (prefers-reduced-motion: reduce) { html.has-anim .reveal, html.has-anim .hero__lead .kicker, html.has-anim .hero__lead .hero__media, html.has-anim .hero__lead .lead-title, html.has-anim .hero__lead .lead-excerpt, html.has-anim .hero__lead .meta-row { opacity: 1 !important; transform: none !important; animation: none !important; } .status--checking::before { animation: none; } } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* สีป้ายสถานะ แยกตามโหมดสีเพื่อให้ตัดกับพื้นหลังเสมอ */ :root, [data-palette="paper"] { --st-check-bg: #E7EAF0; --st-check-fg: #3D536F; --st-fwd-bg: #FBEEDA; --st-fwd-fg: #8A5A12; --st-ok-bg: #E0F0E7; --st-ok-fg: #1F6B45; --st-end-bg: #EFE9F3; --st-end-fg: #5C4B6B; } [data-palette="charcoal"] { --cat-watch: #E86A93; --cat-positive: #6FD2A6; --cat-isan: #E8B071; --cat-video: #C2A8EA; --cat-weekly: #B2A5F0; --cat-pr: #78CDD4; --cat-lotto: #6FD2A6; --gold: #E0BC6A; --tint-watch: #3A2029; --tint-positive: #1B3229; --tint-isan: #33261A; --tint-video: #2A2136; --tint-weekly: #262039; --tint-pr: #17303A; --band-amber: #241E16; --band-violet: #211C29; --band-teal: #16262B; --st-check-bg: #2C2820; --st-check-fg: #BFB6A4; --st-fwd-bg: #3B2C17; --st-fwd-fg: #E0A45E; --st-ok-bg: #1E3229; --st-ok-fg: #63C79B; --st-end-bg: #2F2530; --st-end-fg: #C0A9C4; } [data-palette="forest"] { --cat-watch: #E86A93; --cat-positive: #7CD9AE; --cat-isan: #E8B071; --cat-video: #C2A8EA; --cat-weekly: #B2A5F0; --cat-pr: #78CDD4; --cat-lotto: #7CD9AE; --gold: #E0BC6A; --tint-watch: #2E1F2A; --tint-positive: #17332A; --tint-isan: #2C2A1B; --tint-video: #251F33; --tint-weekly: #221F36; --tint-pr: #16303A; --band-amber: #1E2A1C; --band-violet: #1D2430; --band-teal: #16292E; --st-check-bg: #1B3229; --st-check-fg: #A9C4B5; --st-fwd-bg: #38301C; --st-fwd-fg: #E0A45E; --st-ok-bg: #17392C; --st-ok-fg: #6FCFA2; --st-end-bg: #2A2A34; --st-end-fg: #B4AECB; } /* โหมดกระดาษอุ่น: โซนอุบลมุมบวกกลายเป็นแถบเข้ม สลับมุมมองให้เห็นชัด */ [data-palette="paper"] .section--cream .empty { border-color: var(--cream-200); } [data-palette="paper"] .site-header { background: var(--ink-700); } [data-palette="paper"] .nav a:hover { background: var(--ink-900); } [data-palette="paper"] .drawer { background: var(--ink-700); } [data-palette="paper"] .channel:hover { background: var(--ink-900); } [data-palette="paper"] .btn--primary:hover { box-shadow: 0 4px 16px rgba(196, 66, 108, 0.24); } [data-palette="paper"] .case-card, [data-palette="paper"] .editorial-note { background: var(--ink-900); } /* ========================================================================== ส่วนประกอบแบบเว็บข่าว: แถบบน แถบหมวด คอลัมน์ข้าง และรายการข่าวแบบแถว ========================================================================== */ .topbar { background: #0C0E11; color: #9AA1AC; font-size: 0.8125rem; } .topbar .container { display: flex; align-items: center; gap: 14px; min-height: 52px; } .topbar .today { margin-right: auto; color: #6F7883; font-size: 0.75rem; } .tb-sep { width: 1px; height: 22px; background: #2A2E35; flex: none; } .tb-search { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: #D6DBE2; font-size: 0.875rem; padding: 8px 4px; transition: color 160ms ease; } .tb-search:hover { color: #fff; } .tb-search svg { opacity: 0.85; } .tb-social { display: flex; align-items: center; gap: 9px; } .social { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: transform 180ms ease, filter 180ms ease; } .social svg { width: 20px; height: 20px; } .social:hover { transform: translateY(-2px); filter: brightness(1.12); } .tb-pill { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #3A3F48; border-radius: 999px; padding: 5px 16px 5px 6px; color: #EDEFF2; font-size: 0.8125rem; font-family: var(--font-display); font-weight: 500; transition: border-color 180ms ease, background 180ms ease; } .tb-pill:hover { border-color: var(--rose); background: rgba(200, 30, 91, 0.12); } .tb-pill .brand__mark { width: 24px; height: 24px; } .searchpanel { border-top: 1px solid #23272E; background: #14171B; } .searchpanel[hidden] { display: none; } .searchpanel form { display: flex; gap: 10px; padding: 14px 0; } .searchpanel input { flex: 1; background: #1D2127; border-color: #2E333B; color: #EDEFF2; } .searchpanel input::placeholder { color: #6F7883; } @media (max-width: 820px) { .topbar .today, .tb-sep { display: none; } .topbar .container { gap: 10px; justify-content: space-between; min-height: 48px; } .tb-search span { display: none; } .tb-social { gap: 7px; } .social { width: 30px; height: 30px; } .social svg { width: 18px; height: 18px; } .tb-pill span { display: none; } .tb-pill { padding: 5px; } } @media (max-width: 560px) { .tb-social .social:nth-child(n+4) { display: none; } } .navstrip { background: var(--ink-800); border-bottom: 2px solid var(--rose); } .navstrip .container { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; } .navstrip .container::-webkit-scrollbar { display: none; } .navstrip ul { display: flex; list-style: none; margin: 0; padding: 0; } .navstrip a { display: flex; align-items: center; white-space: nowrap; padding: 12px 16px; font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; color: var(--on-dark-2); border-bottom: 3px solid transparent; margin-bottom: -2px; } .navstrip a:hover { color: var(--rose); } .navstrip .is-active a, .navstrip a.is-active { color: var(--rose); border-bottom-color: var(--rose); } @media (max-width: 899px) { .navstrip { display: none; } } .layout-main { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); align-items: start; } @media (min-width: 1000px) { .layout-main { grid-template-columns: minmax(0, 1fr) 316px; } } .rail { display: grid; gap: 26px; } .rail-box { border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; } .rail-box > h2 { font-size: 0.9375rem; padding: 12px 16px; margin: 0; background: var(--ink-900); border-bottom: 1px solid var(--line-dark); } .rail-box .rail-body { padding: 6px 16px 14px; } .rank { list-style: none; margin: 0; padding: 0; counter-reset: r; } .rank li { counter-increment: r; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-dark-soft); } .rank li:last-child { border-bottom: 0; } .rank li::before { content: counter(r); font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; color: var(--rose); line-height: 1.3; } .rank h3 { font-size: 0.875rem; font-weight: 400; line-height: 1.65; color: var(--on-dark-2); } .rank a:hover h3 { color: var(--rose); } .chip { display: inline-block; font-family: var(--font-display); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--rose); margin-bottom: 6px; } .chip--solid { background: var(--rose); color: #fff; padding: 3px 8px; border-radius: 3px; } .newsrow { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-dark-soft); } .newsrow:first-child { padding-top: 0; } .newsrow:last-child { border-bottom: 0; } .newsrow__media { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--ink-600); } .newsrow__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .newsrow:hover .newsrow__media img { transform: scale(1.04); } .newsrow h3 { font-size: 1rem; font-weight: 500; line-height: 1.6; margin-bottom: 7px; color: var(--on-dark); } .newsrow:hover h3 { color: var(--rose); } .newsrow p { font-size: 0.8125rem; color: var(--on-dark-4); line-height: 1.7; margin: 0 0 7px; } @media (max-width: 560px) { .newsrow { grid-template-columns: 108px minmax(0, 1fr); gap: 12px; } .newsrow p { display: none; } } .block-head { --bh: var(--on-dark); --bh-tint: var(--line-dark); position: relative; display: flex; align-items: center; gap: 13px; padding-bottom: 13px; margin-bottom: 20px; border-bottom: 1px solid var(--line-dark); } /* แถบสีตั้งหน้าหัวข้อ บอกหมวดด้วยสายตาก่อนอ่านตัวอักษร */ .block-head::before { content: ""; flex: none; width: 5px; height: 24px; border-radius: 3px; background: var(--bh); } /* เส้นใต้สองโทน ช่วงแรกเป็นสีหมวด ที่เหลือเป็นเส้นบาง */ .block-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 96px; height: 3px; border-radius: 2px; background: var(--bh); } .block-head h1, .block-head h2 { font-size: 1.3125rem; margin: 0; color: var(--bh); letter-spacing: -0.01em; } .block-head .more { margin-left: auto; font-size: 0.8125rem; color: var(--bh); padding: 5px 13px; border-radius: 999px; background: var(--bh-tint); transition: background 160ms ease, color 160ms ease; } .block-head .more:hover { background: var(--bh); color: #fff; text-decoration: none; } .block-head--watch { --bh: var(--cat-watch); --bh-tint: var(--tint-watch); } .block-head--weekly { --bh: var(--cat-weekly); --bh-tint: var(--tint-weekly); } .block-head--positive { --bh: var(--cat-positive); --bh-tint: var(--tint-positive); } .block-head--isan { --bh: var(--cat-isan); --bh-tint: var(--tint-isan); } .block-head--video { --bh: var(--cat-video); --bh-tint: var(--tint-video); } .block-head--pr { --bh: var(--cat-pr); --bh-tint: var(--tint-pr); } .section--cream .block-head, .section--amber .block-head, .section--violet .block-head { border-bottom-color: rgba(0, 0, 0, 0.09); } .section--compact { padding-block: clamp(2rem, 3.5vw, 2.75rem); } /* ========================================================================== สีประจำหมวด และแถบสีพื้นหลัง ทำให้ผู้อ่านแยกออกด้วยสายตาว่ากำลังอยู่ในหมวดไหน โดยไม่ต้องอ่านป้าย ========================================================================== */ .section--amber { background: var(--band-amber); } .section--violet { background: var(--band-violet); } .section--teal { background: var(--band-teal); } .chip--watch { color: var(--cat-watch); } .chip--positive { color: var(--cat-positive); } .chip--isan { color: var(--cat-isan); } .chip--video { color: var(--cat-video); } .chip--solid.chip--watch { background: var(--cat-watch); color: #fff; } .chip--solid.chip--positive { background: var(--cat-positive); color: #fff; } .chip--solid.chip--isan { background: var(--cat-isan); color: #fff; } .navstrip a[data-cat="watch"]:hover { color: var(--cat-watch); } .navstrip a[data-cat="positive"]:hover { color: var(--cat-positive); } .navstrip a[data-cat="isan"]:hover { color: var(--cat-isan); } .navstrip .is-active a[data-cat="positive"] { color: var(--cat-positive); border-bottom-color: var(--cat-positive); } .navstrip .is-active a[data-cat="isan"] { color: var(--cat-isan); border-bottom-color: var(--cat-isan); } /* ========================================================================== ตรวจผลสลากกินแบ่งรัฐบาล ========================================================================== */ .lotto { border: 1px solid var(--cat-lotto); border-radius: var(--radius); overflow: hidden; } .lotto__head { background: var(--cat-lotto); color: #fff; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .lotto__head h2 { font-size: 0.9375rem; color: #fff; margin: 0; } .lotto__head .draw { font-size: 0.75rem; color: #D6EEE0; margin-left: auto; } .lotto__body { padding: 16px; background: var(--ink-700); } .lotto__first { text-align: center; margin-bottom: 14px; } .lotto__label { font-size: 0.75rem; color: var(--on-dark-5); margin-bottom: 6px; } .lotto__big { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 7vw, 2.75rem); letter-spacing: 0.14em; color: var(--cat-lotto); line-height: 1.2; font-variant-numeric: tabular-nums; } .lotto__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .lotto__cell { border: 1px solid var(--line-dark); border-radius: var(--radius-sm); padding: 11px 12px; text-align: center; } .lotto__num { font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; letter-spacing: 0.1em; color: var(--on-dark); font-variant-numeric: tabular-nums; } .lotto__num span { display: inline-block; margin: 0 5px; } .lotto__check { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-dark); } .lotto__check .lookup input { font-size: 1.25rem; letter-spacing: 0.18em; text-align: center; } .lotto__result { margin-top: 12px; } .lotto__result:empty { display: none; } .lotto__hit { background: var(--st-ok-bg); color: var(--st-ok-fg); border-radius: var(--radius-sm); padding: 13px 15px; font-size: 0.9375rem; line-height: 1.7; } .lotto__miss { background: var(--ink-900); color: var(--on-dark-4); border-radius: var(--radius-sm); padding: 13px 15px; font-size: 0.9375rem; } .lotto__note { font-size: 0.6875rem; color: var(--on-dark-6); line-height: 1.7; margin-top: 12px; } /* ========================================================================== สไลด์ข่าวเด่น เนื้อหาทั้งชุด ภาพ ป้ายหมวด พาดหัว คำโปรย และสถานะ เปลี่ยนตามสไลด์ ใช้ซ่อน-แสดงแทนการเลื่อนแนวนอน ความสูงจึงปรับตามเนื้อหาแต่ละชิ้นได้ ========================================================================== */ .hero-slider { position: relative; margin-bottom: 26px; } .hs__slide { display: none; } .hs__slide.is-active { display: block; } html.has-anim .hs__slide.is-active { animation: ut-slide-in 420ms cubic-bezier(0.2, 0.7, 0.2, 1); } @keyframes ut-slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .hs__media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--ink-600); } .hs__media img { width: 100%; height: 100%; object-fit: cover; } .hs__counter { position: absolute; right: 10px; bottom: 10px; z-index: 2; background: rgba(10, 12, 16, 0.62); color: #fff; font-size: 0.75rem; padding: 5px 11px; border-radius: 4px; font-variant-numeric: tabular-nums; } .hs__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(10, 12, 16, 0.5); color: #fff; display: grid; place-items: center; transition: background 160ms ease; } .hs__nav:hover { background: rgba(10, 12, 16, 0.78); } .hs__nav--prev { left: 10px; } .hs__nav--next { right: 10px; } .hs__nav svg { width: 20px; height: 20px; } .hs__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 16px; } .hs__thumb { background: none; border: 0; padding: 10px 0 0; text-align: left; border-top: 3px solid var(--line-dark); transition: border-color 200ms ease; } .hs__thumb:hover { border-top-color: var(--on-dark-6); } .hs__thumb.is-active { border-top-color: var(--rose); } .hs__thumb span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.75rem; line-height: 1.6; color: var(--on-dark-5); } .hs__thumb.is-active span { color: var(--on-dark); } .hs__pause { margin-top: 12px; font-size: 0.75rem; padding: 6px 12px; border: 1px solid var(--line-dark); background: none; color: var(--on-dark-5); border-radius: var(--radius-sm); } .hs__pause:hover { border-color: var(--on-dark-6); color: var(--on-dark-3); } @media (max-width: 700px) { .hs__thumbs { gap: 6px; margin-top: 12px; } .hs__thumb { padding: 0; height: 4px; border-top-width: 4px; } .hs__thumb span { display: none; } .hs__nav { width: 38px; height: 38px; } } /* ========================================================================== เรื่องเด่นประจำสัปดาห์ บรรณาธิการเลือกเอง ไม่ได้เรียงตามวันที่ จึงใช้ตัวเลขลำดับกำกับ ========================================================================== */ .chip--weekly { color: var(--cat-weekly); } .chip--pr { color: var(--cat-pr); } .chip--solid.chip--pr { background: var(--cat-pr); color: #fff; } .weekly { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); } @media (min-width: 900px) { .weekly { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } } .weekly__media { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--ink-600); margin-bottom: 14px; } .weekly__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .weekly__lead:hover .weekly__media img { transform: scale(1.03); } .weekly__lead h3 { font-size: var(--step-2); line-height: 1.45; margin-bottom: 10px; } .weekly__lead:hover h3 { color: var(--cat-weekly); } .weekly__lead p { font-size: 0.9375rem; color: var(--on-dark-4); line-height: 1.8; margin: 0; } .weekly__list { list-style: none; margin: 0; padding: 0; counter-reset: w; } .weekly__list li { counter-increment: w; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line-dark); } .weekly__list li:first-child { padding-top: 0; } .weekly__list li:last-child { border-bottom: 0; padding-bottom: 0; } .weekly__list li::before { content: counter(w, decimal-leading-zero); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--cat-weekly); opacity: 0.45; line-height: 1.1; } .weekly__list h3 { font-size: 0.9375rem; font-weight: 500; line-height: 1.65; margin-bottom: 5px; color: var(--on-dark-2); } .weekly__list a:hover h3 { color: var(--cat-weekly); } /* ========================================================================== ข่าวประชาสัมพันธ์ ต้องแยกออกจากข่าวกองบรรณาธิการให้ผู้อ่านเห็นชัด ========================================================================== */ .pr-note { display: flex; gap: 9px; align-items: flex-start; background: var(--ink-900); border-left: 3px solid var(--cat-pr); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 12px 14px; margin-bottom: 20px; font-size: 0.8125rem; line-height: 1.75; color: var(--on-dark-4); } .pr-note svg { width: 17px; height: 17px; color: var(--cat-pr); flex: none; margin-top: 3px; } .card--pr .card__media { position: relative; } .card--pr .card__media::after { content: "ประชาสัมพันธ์"; position: absolute; left: 8px; top: 8px; background: var(--cat-pr); color: #fff; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 500; padding: 4px 9px; border-radius: 3px; } /* ========================================================================== โลโก้ภาพจริง ========================================================================== */ .brand__mark { display: block; } .site-header .brand__mark { width: 52px; height: 52px; } .site-footer .brand__mark { width: 44px; height: 44px; } .tb-pill .brand__mark { width: 26px; height: 26px; } @media (max-width: 560px) { .site-header .brand__mark { width: 44px; height: 44px; } } /* ========================================================================== แถบบน ปรับให้ดูสมบูรณ์เสมอแม้กรอกลิงก์โซเชียลไม่ครบ ========================================================================== */ .tb-social:empty { display: none; } .tb-social:empty + .tb-sep { display: none; } .topbar .container > .tb-sep:first-of-type:last-of-type { display: none; } .social { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } .tb-search { border-radius: var(--radius-sm); } .tb-search:hover { background: rgba(255, 255, 255, 0.07); } .tb-pill { background: rgba(255, 255, 255, 0.04); } /* ========================================================================== แถบข่าวด่วน ปุ่มแชร์ แท็ก และปุ่มขึ้นบนสุด ========================================================================== */ .nstrip { background: var(--ink-900); border-block: 1px solid var(--line-dark); } .nstrip__wrap { display: flex; align-items: center; gap: 12px; padding-block: 12px; } .nstrip__label { flex: none; align-self: stretch; display: flex; align-items: center; background: var(--rose); color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 0.8125rem; padding: 0 14px; border-radius: var(--radius-sm); } .nstrip__viewport { flex: 1; min-width: 0; overflow: hidden; } .nstrip__track { display: flex; gap: 10px; width: max-content; animation: nstrip-run var(--nstrip-dur, 60s) linear infinite; } .nstrip__viewport:hover .nstrip__track, .nstrip__viewport:focus-within .nstrip__track { animation-play-state: paused; } @keyframes nstrip-run { from { transform: translateX(0); } to { transform: translateX(-50%); } } .nstrip__item { flex: 0 0 auto; width: 300px; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; background: var(--ink-800); border: 1px solid var(--line-dark); border-radius: var(--radius-sm); transition: border-color 160ms ease, background 160ms ease; } .nstrip__item:hover { border-color: var(--rose); background: var(--ink-700); } .nstrip__thumb { display: block; width: 76px; height: 56px; border-radius: 4px; overflow: hidden; background: var(--ink-600); flex: none; } .nstrip__thumb img { width: 100%; height: 100%; object-fit: cover; } .nstrip__body { display: block; min-width: 0; } .nstrip__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8125rem; line-height: 1.55; color: var(--on-dark-2); } .nstrip__item:hover .nstrip__title { color: var(--rose); } .nstrip__time { display: block; margin-top: 5px; font-size: 0.6875rem; color: var(--on-dark-6); font-variant-numeric: tabular-nums; } @media (max-width: 820px) { .nstrip__label { font-size: 0.75rem; padding: 0 11px; } .nstrip__item { width: 250px; } } /* ถ้าผู้ใช้ตั้งค่าลดการเคลื่อนไหว ให้หยุดวิ่งแล้วเลื่อนดูเองแทน */ @media (prefers-reduced-motion: reduce) { .nstrip__viewport { overflow-x: auto; } .nstrip__track { animation: none; } } .toolbar { display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center; padding: 14px 0; margin-top: 20px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); } .share, .fontsize, .taglist { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .share { margin-right: auto; } .share__label { font-size: 0.75rem; color: var(--on-dark-5); } .share__btn { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--line-dark); border-radius: 999px; font-size: 0.8125rem; color: var(--on-dark-3); background: none; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; } .share__btn:hover { border-color: var(--on-dark-6); color: var(--on-dark); } .share__btn--facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; } .share__btn--line:hover { background: #06C755; border-color: #06C755; color: #fff; } .share__btn--x:hover { background: #2E3238; border-color: #2E3238; color: #fff; } .fontsize button { width: 38px; height: 34px; border: 1px solid var(--line-dark); background: none; border-radius: var(--radius-sm); color: var(--on-dark-3); font-family: var(--font-display); font-size: 0.875rem; } .fontsize button:hover { border-color: var(--on-dark-6); color: var(--on-dark); } .fontsize button.is-on { background: var(--rose); border-color: var(--rose); color: #fff; } .taglist { margin-top: 26px; } .taglist a { padding: 6px 14px; border-radius: 999px; background: var(--ink-900); border: 1px solid var(--line-dark); font-size: 0.8125rem; color: var(--on-dark-3); } .taglist a:hover { border-color: var(--rose); color: var(--rose); } .prose.size-large { font-size: 1.1875rem; line-height: 2.05; } .prose.size-xlarge { font-size: 1.375rem; line-height: 2.1; } .totop { position: sticky; bottom: 24px; margin-left: auto; margin-right: 20px; display: block; width: 46px; height: 46px; border-radius: 50%; background: var(--rose); color: #fff; border: 0; z-index: 60; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); transition: background 160ms ease, transform 160ms ease; } .totop:hover { background: var(--rose-600); transform: translateY(-2px); } .totop svg { width: 20px; height: 20px; margin: 0 auto; } .totop[hidden] { display: none; } @media (max-width: 640px) { .nstrip { background: var(--ink-900); border-bottom: 1px solid var(--line-dark); } .nstrip__wrap { display: flex; align-items: center; gap: 12px; padding-block: 12px; } .nstrip__label { flex: none; align-self: stretch; display: flex; align-items: center; background: var(--rose); color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 0.8125rem; padding: 0 14px; border-radius: var(--radius-sm); } .nstrip__nav { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-dark); background: var(--ink-800); color: var(--on-dark-4); display: grid; place-items: center; transition: border-color 160ms ease, color 160ms ease; } .nstrip__nav:hover { border-color: var(--rose); color: var(--rose); } .nstrip__nav svg { width: 16px; height: 16px; } .nstrip__nav[disabled] { opacity: 0.35; pointer-events: none; } .nstrip__track { flex: 1; min-width: 0; display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; } .nstrip__track::-webkit-scrollbar { display: none; } .nstrip__item { flex: 0 0 auto; width: 300px; scroll-snap-align: start; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; background: var(--ink-800); border: 1px solid var(--line-dark); border-radius: var(--radius-sm); transition: border-color 160ms ease, background 160ms ease; } .nstrip__item:hover { border-color: var(--rose); background: var(--ink-700); } .nstrip__thumb { display: block; width: 76px; height: 56px; border-radius: 4px; overflow: hidden; background: var(--ink-600); flex: none; } .nstrip__thumb img { width: 100%; height: 100%; object-fit: cover; } .nstrip__body { display: block; min-width: 0; } .nstrip__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8125rem; line-height: 1.55; color: var(--on-dark-2); } .nstrip__item:hover .nstrip__title { color: var(--rose); } .nstrip__time { display: block; margin-top: 5px; font-size: 0.6875rem; color: var(--on-dark-6); font-variant-numeric: tabular-nums; } @media (max-width: 820px) { .nstrip__nav { display: none; } .nstrip__label { font-size: 0.75rem; padding: 0 11px; } .nstrip__item { width: 250px; } } .toolbar { gap: 12px 16px; } .fontsize { display: none; } } /* ========================================================================== ภาพประกอบในหน้าข่าว รองรับ 4 รูปแบบการจัดวาง ========================================================================== */ .inline-figure { margin: 1.9em 0; } .inline-figure img { width: 100%; border-radius: var(--radius); display: block; } .inline-figure figcaption, .photogrid figcaption, .float-figure figcaption { font-size: 0.8125rem; color: var(--on-dark-5); line-height: 1.7; margin-top: 9px; } .photogrid { display: grid; gap: 14px; margin-top: clamp(1.75rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .photogrid--big { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin-top: 18px; } .photogrid figure { margin: 0; } .photogrid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; transition: transform 400ms ease; } .photogrid a:hover img { transform: scale(1.02); } .float-figure { margin: 0 0 1.4em; width: 100%; } .float-figure img { width: 100%; border-radius: var(--radius); display: block; } @media (min-width: 760px) { .float-figure { width: 46%; } .float-figure--right { float: right; margin: 0.4em 0 1.2em 1.6em; } .float-figure--left { float: left; margin: 0.4em 1.6em 1.2em 0; } } .prose--alternate::after { content: ""; display: block; clear: both; } .prose--text { max-width: 660px; } /* ========================================================================== กล่องชวนติดตาม ท้ายบทความ ========================================================================== */ .follow { display: grid; gap: 18px; align-items: center; margin-top: clamp(2rem, 4vw, 2.75rem); padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid var(--line-dark); border-left: 4px solid var(--rose); border-radius: 0 var(--radius) var(--radius) 0; background: var(--ink-900); } @media (min-width: 720px) { .follow { grid-template-columns: 1fr auto; gap: 28px; } } .follow h2 { font-size: var(--step-2); margin-bottom: 6px; } .follow p { font-size: 0.875rem; color: var(--on-dark-5); margin: 0; } .follow__btns { display: flex; flex-wrap: wrap; gap: 10px; } .follow__btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px; font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; color: #fff; white-space: nowrap; transition: transform 140ms ease, filter 160ms ease; } .follow__btn:hover { transform: translateY(-2px); filter: brightness(1.08); } .follow__btn--line { background: #06C755; } .follow__btn--fb { background: #1877F2; } .follow__btn--yt { background: #FF0000; } /* ========================================================================== คลังข่าวย้อนหลัง ========================================================================== */ .archive-nav { display: grid; gap: 18px; } .archive-year { border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 14px 16px; } .archive-year__label { display: block; font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; color: var(--on-dark-2); margin-bottom: 11px; } .archive-months { display: flex; flex-wrap: wrap; gap: 8px; } .archive-months a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-dark); background: var(--ink-800); font-size: 0.875rem; color: var(--on-dark-3); transition: border-color 160ms ease, color 160ms ease, background 160ms ease; } .archive-months a span { font-size: 0.6875rem; color: var(--on-dark-6); background: var(--ink-900); padding: 2px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; } .archive-months a:hover { border-color: var(--rose); color: var(--rose); } .archive-months a.is-on { background: var(--rose); border-color: var(--rose); color: #fff; } .archive-months a.is-on span { background: rgba(255, 255, 255, 0.24); color: #fff; } /* ========================================================================== ชั้นปรับโฉม — แบบเว็บข่าวไทย สีจัด แน่น เด่นชัด ========================================================================== */ :root, [data-palette="paper"] { /* พื้นหลังเทาอ่อน เพื่อให้การ์ดสีขาวลอยเด่นขึ้นมา */ --ink-800: #EEF0F4; --ink-900: #FFFFFF; --ink-700: #FFFFFF; --ink-600: #DCE0E6; --line-dark: #DDE1E7; --line-dark-soft: #E9ECF0; --on-dark: #12151A; --on-dark-2: #22262E; --on-dark-3: #3D434D; --on-dark-4: #5B626C; --on-dark-5: #7C838D; --on-dark-6: #99A0AA; /* ชมพูบานเย็นสด ตรงกับโลโก้ */ --rose: #D81B60; --rose-600: #B0144C; --rose-100: #FDE3EE; --sky: #1565C0; --cat-watch: #D81B60; --cat-weekly: #4A3AC8; --cat-positive: #12855C; --cat-isan: #C2610A; --cat-video: #7A2FB8; --cat-pr: #0E7C93; --cat-lotto: #12855C; --tint-watch: #FDE3EE; --tint-weekly: #E7E4FB; --tint-positive: #DCF2E8; --tint-isan: #FCEBD5; --tint-video: #F0E4FA; --tint-pr: #DCF0F5; --band-violet: #EFECFC; --band-amber: #FDF3E4; --band-teal: #E6F4F8; --cream: #E6F5EC; --cream-200: #CFEADB; --ink-on-cream: #0D2E1E; --sand-600: #4E7A63; --sand-700: #2E5843; --font-display: "Anuphan", "Noto Sans Thai", system-ui, sans-serif; --radius: 10px; --radius-sm: 7px; } /* ---------- ตัวอักษรหนาแน่น อ่านง่าย ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } .lead-title { font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.6rem) !important; line-height: 1.28 !important; } .article-title { font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.5rem) !important; line-height: 1.3 !important; } .card__title { font-weight: 600; font-size: 1rem; line-height: 1.55; } .newsrow h3 { font-weight: 600; font-size: 1.0625rem; line-height: 1.55; } /* ---------- หัวข้อหมวด เป็นแถบสีทึบ เห็นชัดจากไกล ---------- */ .block-head { background: var(--bh, var(--on-dark)); border: 0; border-radius: var(--radius-sm); padding: 12px 18px; margin-bottom: 20px; gap: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09); } .block-head::before, .block-head::after { display: none; } .block-head h1, .block-head h2 { color: #fff !important; font-weight: 600; font-size: clamp(1.1875rem, 2vw, 1.375rem); } .block-head .more { margin-left: auto; color: #fff; background: rgba(255, 255, 255, 0.2); border: 0; border-radius: 999px; padding: 5px 15px; font-size: 0.8125rem; font-weight: 500; } .block-head .more:hover { background: rgba(255, 255, 255, 0.34); color: #fff; } /* ---------- การ์ดข่าว มีกรอบและเงา ลอยจากพื้น ---------- */ .card { background: #fff; border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06); transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } .card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(16, 24, 40, 0.13); border-color: var(--rose); } .card__media { border-radius: 0; } .card__title, .card__desc, .card .meta-row { padding-inline: 14px; } .card__title { margin-top: 12px; } .card .meta-row { padding-bottom: 14px; } /* ป้ายหมวดสีทึบบนภาพ */ .card .card__media { position: relative; } .chip { display: inline-block; padding: 4px 11px; border-radius: 4px; background: var(--rose); color: #fff !important; font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.03em; } .chip--watch { background: var(--cat-watch); } .chip--weekly { background: var(--cat-weekly); } .chip--positive { background: var(--cat-positive); } .chip--isan { background: var(--cat-isan); } .chip--video { background: var(--cat-video); } .chip--pr { background: var(--cat-pr); } /* ---------- แถวข่าว แน่นขึ้น มีเส้นสีนำสายตา ---------- */ .newsrow { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 15px; margin-bottom: 10px; background: #fff; border: 1px solid var(--line-dark); border-left: 4px solid var(--cat-watch); border-radius: var(--radius-sm); transition: box-shadow 180ms ease, transform 180ms ease; } .newsrow:hover { transform: translateX(3px); box-shadow: 0 6px 16px rgba(16, 24, 40, 0.1); } .newsrow__media { border-radius: var(--radius-sm); } @media (max-width: 560px) { .newsrow { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 11px; } } /* ---------- คอลัมน์ขวา ---------- */ .rail-box { background: #fff; border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06); } .rail-box > h2 { background: var(--on-dark); color: #fff; padding: 13px 16px; font-size: 1rem; border: 0; } .rail-box .rail-body { padding: 4px 16px 12px; } .rank li { grid-template-columns: 34px minmax(0, 1fr); gap: 13px; } .rank li::before { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink-800); color: var(--on-dark-4); font-size: 0.875rem; font-weight: 600; opacity: 1; } .rank li:nth-child(1)::before { background: var(--cat-watch); color: #fff; } .rank li:nth-child(2)::before { background: var(--cat-isan); color: #fff; } .rank li:nth-child(3)::before { background: var(--cat-weekly); color: #fff; } /* ---------- แถบข่าววิ่ง ---------- */ .nstrip { background: var(--on-dark); border: 0; } .nstrip__label { background: var(--rose); color: #fff; border: 0; font-weight: 600; } .nstrip__item { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: var(--radius-sm); width: 300px; padding: 8px; } .nstrip__item:hover { background: rgba(255, 255, 255, 0.15); border-color: var(--rose); } .nstrip__title { color: #EDEFF2; font-weight: 500; } .nstrip__item:hover .nstrip__title { color: #fff; } .nstrip__time { color: #98A0AB; } /* ---------- ส่วนหัวเว็บ ---------- */ .site-header { background: #fff; border-bottom: 3px solid var(--rose); } .header-bar { min-height: 84px; } .brand__name { font-weight: 700; font-size: 1.3125rem; } .site-header .brand__mark { width: 58px; height: 58px; } .navstrip { background: var(--on-dark); border: 0; } .navstrip a { color: #D6DAE0; font-weight: 500; font-size: 0.9375rem; padding: 14px 18px; border-bottom: 3px solid transparent; } .navstrip a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .navstrip .is-active a { color: #fff; border-bottom-color: var(--rose); background: rgba(216, 27, 96, 0.22); } /* ---------- โซนต่างๆ แน่นขึ้น ---------- */ .section--compact { padding-block: clamp(2rem, 3.5vw, 2.75rem); } .section--dark { background: var(--ink-800); } .section--darker { background: #12151A; } .grid { gap: 18px; } .layout-main { gap: clamp(1.75rem, 3vw, 2.5rem); } .hs__grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: center; } @media (min-width: 940px) { .hs__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } } .hs__media { aspect-ratio: 16 / 10; border-radius: var(--radius); box-shadow: 0 6px 20px rgba(16, 24, 40, 0.16); } .hs__text .chip { margin-bottom: 12px; } .hs__text .lead-title { margin: 0 0 12px; } .hero-slider { background: #fff; border: 1px solid var(--line-dark); border-radius: var(--radius); padding: clamp(1.1rem, 2.5vw, 1.75rem); box-shadow: 0 2px 10px rgba(16, 24, 40, 0.07); } .hs__thumbs { margin-top: 18px; } .hs__thumb { border-top-width: 3px; padding-top: 10px; } /* ---------- เรื่องเด่นสัปดาห์ ---------- */ .weekly__lead, .weekly__list { background: #fff; border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 16px; } .weekly__list li::before { color: var(--cat-weekly); opacity: 1; font-weight: 700; } /* ---------- ปุ่ม ---------- */ .btn { border-radius: var(--radius-sm); font-weight: 600; } .btn--primary { box-shadow: 0 3px 10px rgba(216, 27, 96, 0.28); } .btn--primary:hover { box-shadow: 0 6px 18px rgba(216, 27, 96, 0.36); } /* ---------- ส่วนท้าย ---------- */ .site-footer { background: #12151A; border-top: 3px solid var(--rose); } .site-footer .brand__name { color: #fff; } .site-footer p, .site-footer a, .site-footer .brand__sub { color: #99A0AA; } .site-footer h3 { color: #fff; } .site-footer a:hover { color: var(--rose); } .footer-bottom { border-top-color: #262A31; color: #79808A; } /* ---------- สถานะและป้าย ---------- */ .status { font-weight: 600; border-radius: 4px; } /* ========================================================================== ส่วนเสริมรอบใหม่ ========================================================================== */ /* ---------- ลายดอกบัว เอกลักษณ์เมืองอุบล ---------- */ .proof, .site-footer { position: relative; background-image: url("data:image/svg+xml;utf8,"); background-size: 150px 150px; } /* ---------- โซนผลงานที่เห็นผลแล้ว ---------- */ .proof { background-color: #0E3A2A; color: #EAF3EE; } .proof__head { display: grid; gap: 22px; align-items: center; margin-bottom: 26px; } @media (min-width: 900px) { .proof__head { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; } } .proof__eyebrow { display: inline-block; font-size: 0.6875rem; letter-spacing: 0.2em; color: #74D7AA; margin-bottom: 8px; font-weight: 600; } .proof h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.05rem); margin-bottom: 9px; } .proof p { color: #A9C6B8; font-size: 0.9375rem; margin: 0; max-width: 52ch; line-height: 1.85; } .proof__stats { display: flex; gap: 16px; } .proof__stats div { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); padding: 15px 22px; text-align: center; min-width: 118px; } .proof__stats b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.05rem; line-height: 1.15; color: #fff; } .proof__stats span { font-size: 0.75rem; color: #9CBEB0; } .proof .card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); } .proof .card:hover { border-color: #74D7AA; } .proof .card__title { color: #F2F7F4; } .proof .card__desc { color: #A9C6B8; } .proof .meta { color: #8FB0A2; } .proof__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .proof .btn--ghost { border-color: rgba(255, 255, 255, 0.3); color: #EAF3EE; } .proof .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #74D7AA; } /* ---------- การ์ดใบเด่นในแต่ละหมวด ---------- */ @media (min-width: 760px) { .card--feature { grid-column: span 2; grid-row: span 2; } .card--feature .card__media { aspect-ratio: 16 / 10; } .card--feature .card__title { font-size: 1.375rem; line-height: 1.42; } .card--feature .card__desc { font-size: 0.9375rem; } } /* ---------- ป้ายบนภาพ ---------- */ .card__media { position: relative; overflow: hidden; } .card__cat { position: absolute; left: 10px; bottom: 10px; z-index: 2; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28); } .card--pr .card__cat { display: none; } .flag { position: absolute; right: 10px; top: 10px; z-index: 2; font-family: var(--font-display); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 4px; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28); } .flag--now { background: #E01B1B; } .flag--upd { background: #B26A00; } @keyframes flag-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } } html.has-anim .flag--now { animation: flag-pulse 2.4s ease-in-out infinite; } /* ---------- แถบความคืบหน้าการอ่าน ---------- */ .readbar { position: sticky; top: 0; z-index: 70; height: 3px; background: transparent; } .readbar span { display: block; height: 100%; width: 0; background: var(--rose); transition: width 90ms linear; } /* ---------- แถบเมนูล่างบนมือถือ ---------- */ .tabbar { display: none; } @media (max-width: 860px) { .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid var(--line-dark); box-shadow: 0 -3px 14px rgba(16, 24, 40, 0.1); padding-bottom: env(safe-area-inset-bottom, 0); } .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 8px; font-size: 0.625rem; color: var(--on-dark-4); } .tabbar a:hover, .tabbar a:focus-visible { color: var(--rose); } .tabbar svg { width: 21px; height: 21px; } /* ปุ่มร้องเรียนเด่นกว่าปุ่มอื่น เพราะเป็นภารกิจหลักของเว็บ */ .tabbar__cta { color: #fff !important; position: relative; } .tabbar__cta::before { content: ""; position: absolute; inset: 5px 6px; background: var(--rose); border-radius: 12px; box-shadow: 0 3px 10px rgba(216, 27, 96, 0.4); } .tabbar__cta svg, .tabbar__cta span { position: relative; z-index: 1; } body { padding-bottom: 68px; } .totop { bottom: 84px; } } /* ป้ายด่วนในแถวข่าวและสไลด์ */ .newsrow__media { position: relative; overflow: hidden; } .newsrow__media .flag { right: 6px; top: 6px; font-size: 0.625rem; padding: 3px 8px; } .hs__text .flag { position: static; display: inline-block; margin-left: 8px; vertical-align: middle; box-shadow: none; } /* ========================================================================== หน้ารวมเรื่องร้องเรียน นับถอยหลังสลาก และโหมดกลางคืน ========================================================================== */ /* ---------- หัวหน้าเรื่องร้องเรียน ---------- */ .casehero { background-color: #12151A; color: #E9ECF1; background-image: url("data:image/svg+xml;utf8,"); background-size: 150px 150px; } .casehero h1 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 6px 0 10px; } .casehero p { color: #A2AAB5; max-width: 60ch; margin: 0; } .casehero .proof__eyebrow { color: var(--rose); } .casehero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 26px; } .casehero__stats div { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: var(--radius); padding: 16px 18px; } .casehero__stats b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.95rem; line-height: 1.15; color: #fff; } .casehero__stats span { font-size: 0.75rem; color: #98A1AC; } /* ---------- ตัวกรอง ---------- */ .casefilter { display: grid; gap: 14px; margin-bottom: 24px; } .casefilter__group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .casefilter__label { font-size: 0.75rem; color: var(--on-dark-5); font-weight: 600; letter-spacing: 0.08em; margin-right: 4px; min-width: 48px; } .casefilter a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--line-dark); font-size: 0.875rem; color: var(--on-dark-3); transition: border-color 160ms ease, color 160ms ease, background 160ms ease; } .casefilter a span { font-size: 0.6875rem; background: var(--ink-800); color: var(--on-dark-5); padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; } .casefilter a:hover { border-color: var(--rose); color: var(--rose); } .casefilter a.is-on { background: var(--rose); border-color: var(--rose); color: #fff; } .casefilter a.is-on span { background: rgba(255, 255, 255, 0.25); color: #fff; } /* ---------- รายการเรื่อง ---------- */ .caselist { display: grid; gap: 14px; } @media (min-width: 780px) { .caselist { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .caseitem { background: #fff; border: 1px solid var(--line-dark); border-left: 5px solid var(--on-dark-6); border-radius: var(--radius); padding: 18px 20px; transition: box-shadow 180ms ease, transform 180ms ease; } .caseitem:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 24, 40, 0.11); } .caseitem--checking { border-left-color: #8A7A55; } .caseitem--forwarded { border-left-color: var(--sky); } .caseitem--resolved { border-left-color: var(--cat-positive); } .caseitem--closed { border-left-color: var(--on-dark-5); } .caseitem__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 11px; } .caseitem__code { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; background: var(--ink-800); color: var(--on-dark-3); padding: 3px 10px; border-radius: 4px; letter-spacing: 0.04em; } .caseitem h3 { font-size: 1.0625rem; line-height: 1.55; margin-bottom: 10px; color: var(--on-dark); } .caseitem__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; } .caseitem__tags span { font-size: 0.75rem; color: var(--on-dark-4); background: var(--ink-800); padding: 4px 11px; border-radius: 999px; } .caseitem__last { font-size: 0.8125rem; line-height: 1.8; color: var(--on-dark-4); border-top: 1px dashed var(--line-dark); padding-top: 11px; margin: 0 0 11px; } .caseitem__last strong { display: block; color: var(--on-dark-3); font-size: 0.75rem; margin-bottom: 2px; } .caseitem__link { font-size: 0.8125rem; color: var(--rose); font-weight: 500; } .caseitem__link:hover { text-decoration: underline; } /* ---------- นับถอยหลังงวดสลาก ---------- */ .lotto__count { display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: var(--tint-positive); border-bottom: 1px solid var(--line-dark); } .lotto__count-num { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--cat-lotto); min-width: 52px; text-align: center; } .lotto__count-txt { font-size: 0.8125rem; line-height: 1.55; color: var(--on-dark-3); } .lotto__count-txt small { color: var(--on-dark-5); font-size: 0.6875rem; } /* ---------- ปุ่มสลับโหมด ---------- */ .tb-theme { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #2E3339; background: none; color: #C6CBD2; display: grid; place-items: center; transition: border-color 160ms ease, color 160ms ease; } .tb-theme:hover { border-color: var(--rose); color: #fff; } .tb-theme svg { width: 18px; height: 18px; } .tb-theme .ico-moon { display: none; } [data-palette="charcoal"] .tb-theme .ico-sun, [data-palette="forest"] .tb-theme .ico-sun { display: none; } [data-palette="charcoal"] .tb-theme .ico-moon, [data-palette="forest"] .tb-theme .ico-moon { display: block; } /* โหมดมืดต้องปรับส่วนที่กำหนดสีขาวไว้ตายตัว */ [data-palette="charcoal"] .card, [data-palette="forest"] .card, [data-palette="charcoal"] .newsrow, [data-palette="forest"] .newsrow, [data-palette="charcoal"] .rail-box, [data-palette="forest"] .rail-box, [data-palette="charcoal"] .caseitem, [data-palette="forest"] .caseitem, [data-palette="charcoal"] .casefilter a, [data-palette="forest"] .casefilter a, [data-palette="charcoal"] .hero-slider, [data-palette="forest"] .hero-slider, [data-palette="charcoal"] .weekly__lead, [data-palette="forest"] .weekly__lead, [data-palette="charcoal"] .weekly__list, [data-palette="forest"] .weekly__list { background: var(--ink-700); border-color: var(--line-dark); } [data-palette="charcoal"] .site-header, [data-palette="forest"] .site-header { background: var(--ink-800); } [data-palette="charcoal"] .tabbar, [data-palette="forest"] .tabbar { background: var(--ink-700); border-top-color: var(--line-dark); } /* ========================================================================== ประสบการณ์บนมือถือ ผู้อ่านส่วนใหญ่ใช้มือถือ ส่วนนี้จึงไม่ใช่การย่อหน้าจอลงมา แต่ออกแบบใหม่สำหรับนิ้วโป้งและการอ่านบนจอเล็กโดยเฉพาะ ========================================================================== */ @media (max-width: 899px) { /* ---------- แถบหมวดซ่อนบนมือถือ ใช้ปุ่มสามขีดแทน ---------- * บนจอเล็กพื้นที่มีค่ามาก ให้เนื้อหาข่าวได้พื้นที่เต็มที่ * หมวดทั้งหมดอยู่ในเมนูสามขีด และหน้าที่ใช้บ่อยอยู่แถบล่างแล้ว */ .navstrip { display: none; } /* ---------- ส่วนหัวติดขอบบน หลบเมื่อเลื่อนลง ---------- */ .site-header { position: sticky; top: 0; z-index: 55; transition: transform 240ms ease; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.09); } body.head-hide .site-header { transform: translateY(-100%); } /* ปุ่มสามขีดให้เด่นขึ้น เพราะตอนนี้เป็นทางเดียวที่จะเข้าถึงหมวด */ .menu-toggle { border: 1px solid var(--line-dark); border-radius: var(--radius-sm); width: 46px; height: 46px; } /* เมนูในลิ้นชักให้กดง่าย */ .drawer nav a { padding: 15px 4px; font-size: 1.0625rem; } .header-bar { min-height: 68px; } .site-header .brand__mark { width: 46px; height: 46px; } .brand__name { font-size: 1.0625rem; } .brand__sub { display: none; } /* ---------- นิ้วโป้งต้องกดโดนทุกครั้ง ---------- */ a, button, input[type="submit"], .chip, .tabbar a { -webkit-tap-highlight-color: rgba(216, 27, 96, 0.15); } .btn { min-height: 50px; padding: 14px 22px; font-size: 1rem; } .casefilter a, .archive-months a, .taglist a { min-height: 42px; padding: 10px 16px; } .share__btn { min-height: 46px; padding: 11px 18px; } /* ---------- ช่องกรอกต้องไม่ทำให้จอซูมเอง ---------- */ input, select, textarea { font-size: 16px !important; min-height: 50px; } textarea { min-height: 140px; } /* ---------- ปุ่มปรับขนาดตัวอักษร สำคัญมากบนมือถือ ---------- */ .fontsize { display: flex; width: 100%; } .fontsize button { flex: 1; min-height: 46px; font-size: 1rem; } .toolbar { flex-direction: column; align-items: stretch; gap: 14px; } .share { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .share__label { grid-column: 1 / -1; } .share__btn { justify-content: center; } /* ---------- ภาพในข่าวเต็มขอบจอ อ่านแล้วโล่งตา ---------- */ .article-figure, .inline-figure { margin-inline: calc(var(--gutter) * -1); border-radius: 0; } .article-figure img, .inline-figure img { border-radius: 0; } .article-figure figcaption, .inline-figure figcaption { padding-inline: var(--gutter); } /* ---------- ตัวหนังสือใหญ่ขึ้น อ่านสบายตา ---------- */ .prose { font-size: 1.125rem; line-height: 2; } .article-title { font-size: 1.6rem !important; line-height: 1.4 !important; } .lead-title { font-size: 1.5rem !important; line-height: 1.4 !important; } .card__title { font-size: 1rem; } .newsrow h3 { font-size: 1rem; } /* ---------- แถบข่าววิ่ง หยุดเมื่อแตะ กดง่ายขึ้น ---------- */ .nstrip__track { animation-duration: calc(var(--nstrip-dur, 60s) * 1.5); } .nstrip.is-touched .nstrip__track { animation-play-state: paused; } .nstrip__item { width: 260px; } /* ---------- คอลัมน์ข้างย้ายลงล่าง แต่กล่องสลากขึ้นก่อน ---------- */ .rail { gap: 18px; } /* ---------- ตารางในหน้าจัดการเลื่อนแนวนอนได้ ---------- */ .lotto__big { font-size: 2.4rem; letter-spacing: 0.1em; } .lotto__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .card--feature { grid-column: 1 / -1; } .card--feature .card__media { aspect-ratio: 16 / 9; } .card__title { font-size: 0.9375rem; line-height: 1.5; } .card__desc { display: none; } .card--feature .card__desc { display: block; } .caselist { grid-template-columns: 1fr; } .casehero__stats { grid-template-columns: repeat(2, 1fr); } .proof__stats { width: 100%; } .proof__stats div { flex: 1; } .proof__cta .btn { width: 100%; justify-content: center; } } /* ---------- แถบล่าง สถานะหน้าที่กำลังเปิด ---------- */ @media (max-width: 860px) { .tabbar a.is-on { color: var(--rose); font-weight: 600; } .tabbar a.is-on svg { transform: scale(1.08); } .tabbar__cta.is-on::before { box-shadow: 0 4px 14px rgba(216, 27, 96, 0.55); } .tabbar a { min-height: 56px; justify-content: center; } } /* ---------- แถบแก้ไขสำหรับผู้ดูแล แสดงเฉพาะตอนล็อกอินอยู่ ---------- */ .editbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--tint-watch); border: 1px dashed var(--rose); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 20px; font-size: 0.875rem; color: var(--rose-600); } .editbar strong { margin-left: auto; color: var(--rose); } .editbar:hover { background: var(--rose); border-style: solid; color: #fff; } .editbar:hover strong { color: #fff; } /* กล่องตัวเลขในโซนผลงาน รองรับสามช่อง */ .proof__stats div { min-width: 104px; padding: 14px 18px; } .proof__stats b { font-size: 1.85rem; } @media (max-width: 620px) { .proof__stats { flex-wrap: wrap; } .proof__stats div { flex: 1 1 30%; } } /* ========================================================================== กล่องสลากในคอลัมน์ข้าง ย่อให้กระชับ ไม่กินพื้นที่ข่าว ========================================================================== */ .lotto__head { padding: 10px 14px; } .lotto__head h2 { font-size: 0.875rem; } .lotto__head .draw { font-size: 0.6875rem; } .lotto__count { padding: 9px 14px; gap: 11px; } .lotto__count-num { font-size: 1.5rem; min-width: 40px; } .lotto__count-txt { font-size: 0.75rem; line-height: 1.45; } .lotto__count-txt small { font-size: 0.625rem; } .lotto__body { padding: 13px 14px; } .lotto__first { margin-bottom: 10px; } .lotto__label { font-size: 0.6875rem; margin-bottom: 3px; } .lotto__big { font-size: 2rem; letter-spacing: 0.1em; } .lotto__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .lotto__cell { padding: 8px 9px; } .lotto__num { font-size: 1rem; letter-spacing: 0.06em; } .lotto__num span { margin: 0 3px; } .lotto__check { margin-top: 12px; padding-top: 12px; } .lotto__check .lookup { gap: 7px; } .lotto__check .lookup input { font-size: 1rem; letter-spacing: 0.12em; padding: 10px 12px; } .lotto__check .lookup .btn { padding: 10px 15px; font-size: 0.875rem; } .lotto__hit, .lotto__miss { padding: 10px 12px; font-size: 0.8125rem; } .lotto__note { font-size: 0.625rem; margin-top: 9px; } .lotto__note a { color: var(--rose); text-decoration: underline; } /* ---------- แบบเต็มสำหรับหน้าตรวจสลากโดยเฉพาะ ---------- */ .lotto--full .lotto__head { padding: 14px 18px; } .lotto--full .lotto__head h2 { font-size: 1.0625rem; } .lotto--full .lotto__count { padding: 14px 18px; } .lotto--full .lotto__count-num { font-size: 2.25rem; min-width: 58px; } .lotto--full .lotto__count-txt { font-size: 0.875rem; } .lotto--full .lotto__body { padding: 20px 18px; } .lotto--full .lotto__big { font-size: clamp(2.4rem, 8vw, 3.2rem); letter-spacing: 0.14em; } .lotto--full .lotto__label { font-size: 0.75rem; } .lotto--full .lotto__grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .lotto--full .lotto__cell { padding: 12px 13px; } .lotto--full .lotto__num { font-size: 1.375rem; letter-spacing: 0.1em; } .lotto--full .lotto__check .lookup input { font-size: 1.25rem; padding: 13px 15px; } .lotto--full .lotto__note { font-size: 0.6875rem; } /* ---------- ตัวเล่นวิดีโอสำหรับไฟล์ที่อัปโหลดเอง ---------- */ .vplayer { width: 100%; display: block; background: #000; border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; } .video-item .vplayer { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); } /* ========================================================================== ภาพแนวตั้ง แสดงให้ถูกต้องไม่ถูกตัดหัวตัดท้าย ========================================================================== */ /* ภาพหลักในบทความ แสดงตามสัดส่วนจริง ไม่บังคับตัดเป็นแนวนอน */ .article-figure img, .inline-figure img { width: 100%; height: auto; object-fit: contain; max-height: 82vh; margin-inline: auto; background: var(--ink-900); } .article-figure, .inline-figure { text-align: center; } .article-figure figcaption, .inline-figure figcaption { text-align: left; } /* ภาพในตารางภาพประกอบ ตัดจากด้านบน เพื่อไม่ให้หัวคนหาย */ .photogrid img, .card__media img, .newsrow__media img, .hs__media img, .weekly__media img, .nstrip__thumb img { object-position: center 30%; } /* ตารางภาพประกอบ ให้ภาพแนวตั้งได้พื้นที่มากขึ้น */ .photogrid img { aspect-ratio: 3 / 4; } .photogrid--big img { aspect-ratio: 4 / 3; }