:root{ --cl-card-radius: 22px; --cl-soft: #F3F5F7; --cl-line: #E5E8EC; --cl-text: #1E293B; --cl-muted: #64748B; }
.wp-block-group:has(.cl-widget), .wp-block-columns:has(.cl-widget), .entry-content > *:has(.cl-widget){ border:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important; margin:0 !important; }
.cl-widget.cl-card{ padding:0 !important; margin:0 !important; background:transparent; border:0; box-shadow:none; }
.cl-widget.cl-lates .cl-list{ display:grid; grid-template-columns: 1fr; gap: 24px; --date-col: 112px; --card-pad: 22px; --gap: 16px; --flag-w: 20px; --flag-h: 20px; --fs-title: 16px; --fs-date: 16px; --fs-label: 16px; --fs-first: 15px; --fs-mini: 15px; --fs-day: 15px; --fs-mon: 15px; }
@media (min-width:900px){ .cl-widget.cl-lates .cl-list:has(> *:nth-child(2)){ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; --date-col: 96px; --card-pad: 18px; --gap: 14px; --flag-w: 20px; --flag-h: 20px; --fs-title: 15px; --fs-date: 15px; --fs-label: 15px; --fs-first: 15px; --fs-mini: 15px; --fs-day: 15px; --fs-mon: 15px; } }
@media (min-width:1200px){ .cl-widget.cl-lates .cl-list:has(> *:nth-child(3)){ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; --date-col: 88px; --card-pad: 16px; --gap: 12px; --flag-w: 20px; --flag-h: 20px; --fs-title: 16px; --fs-date: 16px; --fs-label: 16px; --fs-first: 15px; --fs-mini: 15px; --fs-day: 15px; --fs-mon: 15px; } }
.cl-widget, .cl-widget *, .cl-card-wrap, .cl-card-wrap *{ font-family: 'Kanit', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Thai", "Noto Sans", "Liberation Sans", sans-serif !important; }
.cl-widget input, .cl-widget select, .cl-widget textarea, .cl-widget button{ font-family: inherit !important; }
.cl-lh .cl-lh-left .cl-head-flag{ border-radius:200px;width: 20px !important; }
.cl-widget.cl-lates .cl-list > *{ min-width:0; }
.cl-widget.cl-lates .cl-card{ grid-template-columns: var(--date-col) 1fr; padding: var(--card-pad); border-top: 7px solid var(--cs-hero); border-left: 1px solid var(--cs-hero); border-right: 1px solid var(--cs-hero); border-bottom: 1px solid var(--cs-hero); border-radius: 10px; }
.cl-widget.cl-lates .cl-card .cl-title{ font-size: var(--fs-title); min-width:0; }
.cl-widget.cl-lates .cl-card .cl-title::before{ width: var(--flag-w); height: var(--flag-h); flex: 0 0 var(--flag-w); }
.cl-widget.cl-lates .cl-card-left .cl-day{ font-size: var(--fs-day); }
.cl-widget.cl-lates .cl-card-left .cl-mon{ font-size: var(--fs-mon); }
.cl-widget.cl-lates .cl-prizes{ gap: var(--gap); }
.cl-widget.cl-lates .cl-prizes .cl-label{ font-size: var(--fs-label); }
.cl-widget.cl-lates .cl-box.cl-first .cl-num{ font-size: var(--fs-first); line-height: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-widget.cl-lates .cl-prizes .cl-box:not(.cl-first) .cl-num{ font-size: var(--fs-mini); line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-widget.cl-lates .cl-box.cl-first{ padding: calc(var(--card-pad) - 6px) calc(var(--card-pad) - 4px); }
.cl-widget.cl-lates .cl-prizes .cl-box:not(.cl-first){ padding: calc(var(--card-pad) - 8px) calc(var(--card-pad) - 6px); }
.cl-widget.cl-lates .cl-num{ word-break: keep-all; }
@media (max-width: 480px){ .cl-widget.cl-lates .cl-list{ grid-template-columns: 1fr !important; --fs-title: 26px; --fs-first: 32px; --fs-mini: 24px; --fs-day: 44px; } }
.cl-card.cl-lates{ display:block; padding: var(--card-pad); }
.cl-lh{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.cl-lh-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.cl-head-flag{ width: var(--flag-w); height: var(--flag-h); border-radius:6px; object-fit:cover; flex:0 0 var(--flag-w); }
.cl-head-title{ font-weight:500; font-size: var(--fs-title); color: var(--cs-hero-text); line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-head-date{ font-weight:500; color: var(--cs-accent); font-size: var(--fs-date); white-space:nowrap; }
.cl-big{ background: var(--cl-soft); border:1px solid var(--divider); border-radius:5px; padding: 14px 16px; margin-bottom: 14px; }
.cl-big-label{ font-weight:500; color: var(--cl-text); margin-bottom:10px; font-size: var(--fs-label); }
.cl-big-num{ background: var(--num-bg); border-radius:5px; padding:12px 16px; font-weight:600; font-size:20px; color: var(--num-text); letter-spacing:.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cl-mini-row{ display:grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); }
.cl-mini{ background:var(--cl-soft); border:1px solid var(--divider); border-radius:5px; padding: 12px 14px; }
.cl-mini-label{ font-weight:500; color: var(--cl-text); margin-bottom:10px; font-size: 12px; }
.cl-mini-num{ background: var(--num-bg); border-radius:5px; padding: 10px 12px; font-weight:600; font-size: 12px; color: var(--num-text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.cl-card{ background: #fff; border: 1px solid var(--cl-line); border-radius: var(--cl-card-radius); padding: 22px; display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto; gap: 18px 22px; box-shadow: 0 6px 22px rgba(2,8,23,.06); }
.cl-card-left{ grid-row: 1 / span 2; background: var(--cl-soft); border-radius: 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 24px 12px; color: var(--cl-text); }
.cl-card-left .cl-day{ font-size: 48px; line-height: 1; font-weight: 500; }
.cl-card-left .cl-mon{ margin-top: 8px; font-size: 18px; color: var(--cl-muted); }
.cl-card-body{ display: contents; }
.cl-title{ grid-column: 2; align-self: start; font-size: 28px; font-weight: 500; color: var(--cl-text); display:flex; align-items:center; gap:14px; }
.cl-title::before{ content:""; inline-size: 62px; block-size: 42px; border-radius: 6px; background: var(--cl-soft) center/cover no-repeat; flex: 0 0 62px; }
.cl-type-gov .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/gov.png'); }
.cl-type-lao .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/lao.png'); }
.cl-type-lao-vip .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/lao-vip.png'); }
.cl-type-baac .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/baac.png'); }
.cl-type-hanoi .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/hanoi.png'); }
.cl-type-malay .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/malay.png'); }
.cl-type-hanoi-vip .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/hanoi-vip.png'); }
.cl-type-hanoi-special .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/hanoi-special.png'); }
.cl-type-hanoi-extra .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/hanoi-extra.png'); }
.cl-type-hangseng-am .cl-title::before, .cl-type-hangseng-pm .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/hs.png'); }
.cl-type-taiwan .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/tw.png'); }
.cl-type-nikkei-am .cl-title::before, .cl-type-nikkei-pm .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/nikkei.png'); }
.cl-type-korea .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/kr.png'); }
.cl-type-china-am .cl-title::before, .cl-type-china-pm .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/cn.png'); }
.cl-type-singapore .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/sg.png'); }
.cl-type-thai .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/th.png'); }
.cl-type-india .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/in.png'); }
.cl-type-egypt .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/eg.png'); }
.cl-type-russia .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/ru.png'); }
.cl-type-germany .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/de.png'); }
.cl-type-uk .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/uk.png'); }
.cl-type-dowjones .cl-title::before{ background-image:url('/wp-content/plugins/check-lottery/assets/icons/us.png'); }
.cl-prizes{ grid-column: 2; display:grid; gap:16px; grid-template-columns: 1fr; }
.cl-prizes.cl-large{ grid-template-columns: 1fr; }
@media (min-width: 720px){ .cl-prizes:not(.cl-large){ grid-template-columns: repeat(3, 1fr); } .cl-prizes .cl-box:first-child{ grid-column: 1 / -1; } }
.cl-box.cl-first{ background: var(--cl-soft); border-radius: 18px; padding: 14px 16px; }
.cl-box.cl-first .cl-label{ display:block; font-weight:500; color:var(--cl-muted); margin-bottom:10px; }
.cl-box.cl-first .cl-num{ font-size: 34px; font-weight:500; letter-spacing:.02em; background:var(--num-bg); border-radius:12px; padding:12px 16px; color:var(--num-text); }
.cl-prizes .cl-box:not(.cl-first){ background:#fff; border:1px solid var(--cl-line); border-radius:18px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.cl-prizes .cl-box:not(.cl-first) .cl-label{ font-weight:500; color:var(--cl-muted); }
.cl-prizes .cl-box:not(.cl-first) .cl-num{ font-size: 28px; font-weight:500; letter-spacing:.02em; background:var(--num-bg); border-radius:12px; padding:10px 12px; }
.wp-block-group:has(.cl-widget), .wp-block-columns:has(.cl-widget), .entry-content > *:has(.cl-widget){ border:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important; margin:0 !important; }
.cl-widget{ width:100%; }
.cl-widget.cl-card{ width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; background:transparent; border:0; box-shadow:none; }
.cl-card-single{ width:100%; box-sizing:border-box; border:2px solid var(--cs-hero); border-radius:10px; background:var(--cl-card-bg); box-shadow:0 8px 26px rgba(2,8,23,.06); overflow:hidden; font-family:"Kanit",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Thai",sans-serif; }
.cl-card-single .cs-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; background:var(--cs-hero); color: var(--cs-hero-text); }
.cl-card-single .cs-head-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.cl-card-single .cs-flag{ width:28px!important; height:28px!important; border-radius:999px; object-fit:cover; background:#fff; }
.cl-card-single .cs-title{ font-weight:500; font-size:18px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--table-head-text); }
.cl-card-single .cs-date{ font-weight:500; color: var(--table-head-text); }
.cl-card-single .cs-big{ background:var(--cl-soft); border:1px solid var(--divider); border-radius:5px; padding:16px; margin:16px; }
.cl-card-single .cs-big-label{ font-weight:500; color: var(--cl-text); margin-bottom:10px; font-size:16px; }
.cl-card-single .cs-big-num{ background:var(--num-bg); border-radius:5px; padding:14px 16px; font-weight:600; font-size:20px; color:var(--num-text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.cl-card-single .cs-mini-row{ display:grid; gap:16px; grid-template-columns: repeat(3, 1fr); padding: 0 16px 16px; }
.cl-card-single .cs-mini{ background:var(--cl-soft); border:1px solid var(--divider); border-radius:5px; padding:12px 14px; }
.cl-card-single .cs-mini-label{ font-weight:500; color: var(--cl-text); margin-bottom:10px; font-size:16px; }
.cl-card-single .cs-mini-num{ white-space: normal; background:var(--num-bg); border-radius:8px; padding: 10px 12px; font-weight:600; font-size:16px; color:var(--num-text); }
@media (max-width:640px){ .cl-card-single .cs-mini-row{ grid-template-columns: 1fr; } }
.cl-checker-min{ border-radius: 10px; border: 2px solid var(--cs-hero); background: var(--cl-card-bg); box-shadow: 0 12px 32px rgba(2,8,23,.08); overflow: hidden; }
.cl-checker-min .cl-only-title-row{ display:flex; align-items:center; justify-content:center; gap:12px; padding: 14px 16px; background: var(--cs-hero); color: var(--table-head-text); border-bottom: 1px solid rgba(0,0,0,.08); margin: 0; }
.cl-checker-min .cl-check-flag{ width: 28px!important; height: 28px!important; border-radius: 999px; object-fit: cover; background:#fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.cl-checker-min .cl-only-title{ margin:0; font-size:20px; font-weight:500; letter-spacing:.2px; color: var(--table-head-text); line-height:1.1; }
.cl-checker-min .cl-subtitle{ display:block; font-size:12.5px; opacity:.9; margin-top:2px; text-align:left; }
.cl-checker-min .cl-only-controls{ padding: 25px; }
.cl-checker-min .cl-select-wrap{ width: 250px; max-width: 100%; margin: 6px auto 15px; position: relative; }
.cl-checker-min .cl-select-wrap select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; height: 40px; border-radius: 999px; border: 2px solid var(--in-border); background: var(--in-bg); width: 100%; padding: 0 25px 0 25px; text-align: center; text-align-last: center; font-weight: 500; font-size: 16px; color: var(--cs-accent); box-shadow: inset 0 1px 0 rgba(2,6,23,.04); }
.cl-checker-min .cl-select-wrap:after, .cl-checker-min .cl-caret{ content: "▾"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--in-text); pointer-events: none; line-height: 1; }
.cl-checker-min .cl-caret{ right: 16px; top: 50%; transform: translateY(-50%); }
.cl-checker-min .cl-select-wrap select:focus{ border-color: var(--cs-hero); box-shadow: 0 0 0 3px rgba(2,6,23,.07); }
.cl-checker-min .cl-input-main{ display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; max-width: 550px; margin: 0 auto; }
.cl-checker-min .cl-input-label{ display:none; }
.cl-checker-min .cl-input-number{ height: 40px; font-size: 16px; font-weight: 500; border-radius: 5px; padding: 12px 16px; background: var(--in-bg); color: var(--in-text); border: 1.5px solid var(--in-border); box-shadow: inset 0 1px 0 rgba(2,6,23,.03); }
.cl-checker-min .cl-input-number::placeholder{ color: var(--in-placeholder); }
.cl-checker-min .cl-input-number:focus{ border-color: var(--cs-hero); box-shadow: 0 0 0 3px rgba(2,6,23,.07), inset 0 1px 0 rgba(2,6,23,.03); outline: none; }
.cl-checker-min .cl-btn-check{ height: 40px; padding: 0 22px; border-radius: 5px; font-size: 16px; font-weight: 500; background: var(--cs-hero); color: var(--cs-hero-text); border: 1px solid rgba(15, 60, 122, .08); box-shadow: 0 2px 0 rgba(2,6,23,.06); cursor: pointer; }
.cl-checker-min .cl-btn-check:hover{ filter: brightness(1.05); }
.cl-checker-min .cl-btn-check:active{ transform: translateY(1px); }
@media (max-width: 768px){ .cl-checker-min .cl-select-wrap select{ height: 40px; font-size: 14px; } .cl-checker-min .cl-input-main{ grid-template-columns: 1fr; gap: 12px; } .cl-checker-min .cl-btn-check{ width: 100%; } }
@media (max-width: 480px){ .cl-checker-min .cl-only-title{ font-size: 18px; } }
.cl-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999}
.cl-modal[hidden]{display:none!important}
.cl-backdrop{position:absolute;inset:0;background: #00000082; }
.cl-dialog{position:relative;z-index:1;background: #fff; border:1px solid var(--cl-line); border-radius:20px;max-width:450px;width:92%;padding:30px;}
.cl-modal-open{overflow:hidden}
.cl-only-controls .cl-select-wrap{position:relative;z-index:1}
.cl-only-controls .cl-btn-check{position:relative;z-index:3;pointer-events:auto}
.cl-modal-title{ font-size:20px; font-weight:500; color: var(--cl-text); }
.cl-modal-list{ font-size:16px; font-weight:500; color: var(--cl-text); background:#FFF7ED; border:1px dashed #FCD34D; border-radius:12px; padding:20px 40px; margin:10px 0 20px 0; }
.cl-modal-close{ font-size:16px; font-weight:500; color:#fff; background:#ff0000; padding:10px 40px; }
.cl-modal-close:hover{ background:#000; }
.cl-table-banner{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0px; padding:10px 12px; border-radius: 10px 10px 0 0; border:1px solid var(--cl-line); background: var(--cs-hero); color: var(--cs-hero-text); box-shadow:0 6px 18px rgba(2,6,23,.16); }
.cl-table-banner .cl-banner-icon{ width:28px; height:28px; border-radius:100px; object-fit:cover; background:#fff; }
.cl-banner-text{ text-align:center; line-height:1.15; }
.cl-banner-title{ font-weight:500; font-size:18px; letter-spacing:.2px; }
.cl-banner-sub{ text-align:left; opacity:.9; font-size:12.5px; margin-top:3px; }
.cl-table-wrap{ width:100%; overflow-x:auto; }
.cl-table3{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--table-head-line); border-radius:0px; overflow:hidden; border-bottom-right-radius:10px; border-bottom-left-radius:10px; }
.cl-table3 thead th{ background: var(--cs-hero); color: var(--table-head-text); font-weight:500; text-align:center; padding:14px 16px; white-space:nowrap; border-right:1px solid var(--table-head-line); }
.cl-table3 thead th:first-child{ border-top-left-radius:0px; }
.cl-table3 thead th:last-child{ border-right:0; border-top-right-radius:0px; }
.cl-table3 tbody td{ padding:14px 16px; text-align:center; color: var(--cl-text); border-top:1px solid #f1f5f9; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:500; font-size:15px; }
.cl-table3 tbody tr:nth-child(odd){ background:#ffffff; }
.cl-table3 tbody tr:nth-child(even){ background: var(--table-stripe); }
.cl-table3 .cl-td-left{ text-align:left; font-weight:500; color: var(--cl-text); min-width:160px; }
.cl-table3 thead th.cl-col-date{ text-align:left; color: var(--table-head-text); min-width:160px; }
@media (max-width:640px){ .cl-banner-title{ font-size:16px; } .cl-table3 thead th, .cl-table3 tbody td{ padding:12px 12px; } .cl-table3 .cl-td-left{ min-width:140px; } }
@media (max-width:1024px){ .cl-card{ grid-template-columns: 96px 1fr; gap: 16px 18px; padding: 18px; border-radius: 18px; } .cl-card-left{ padding: 20px 10px; } .cl-card-left .cl-day{ font-size: 40px; } .cl-card-left .cl-mon{ font-size: 16px; } .cl-prizes:not(.cl-large){ grid-template-columns: repeat(2, 1fr); } .cl-card-single .cs-big-num{font-size: 20px;} .cl-card-single .cs-mini-num{font-size: 16px;} .cl-card-single .cs-mini-row{ grid-template-columns: repeat(2, 1fr); gap:12px; } .cl-only-controls{ grid-template-columns: 1fr 1fr; grid-template-areas: "date  date" "form  form"; justify-items:center; } .cl-select-wrap{ grid-area: date; } .cl-input-main{ grid-area: form; display:flex; align-items:center; justify-content:center; gap:14px; width:100%; max-width:900px; margin:0 auto; } .cl-input-number{ flex:1 1 520px; min-width:100px; } .cl-checker-min .cl-select-wrap{width:250px;} .cl-mini, .cl-big, .cl-prizes, .cl-prizes .cl-box{ min-width:0; } .cl-mini-num, .cl-prizes .cl-box:not(.cl-first) .cl-num{white-space: normal; overflow-wrap: anywhere;} .cl-type-hanoi-vip .cl-mini-num, .cl-type-hanoi-vip .cl-prizes .cl-box:not(.cl-first) .cl-num{white-space: normal; overflow-wrap: anywhere;} .cl-card, .cl-card-single{ overflow:hidden; } }
@media (max-width:768px){ .cl-card-single .cs-mini-row{ grid-template-columns: repeat(3, 1fr); gap:12px; } .cl-card-single .cs-mini-num{white-space: normal;} .cl-card{ grid-template-columns: 88px 1fr; gap: 14px 16px; padding: 16px; border-radius: 16px; } .cl-title{ font-size: 22px; gap: 12px; } .cl-title::before{ inline-size: 48px; block-size: 32px; flex-basis: 48px; border-radius: 6px; } .cl-table3 thead th, .cl-table3 tbody td{ padding: 12px 10px; font-size: 14.5px; } .cl-checker .cl-select-wrap, .cl-checker-min .cl-select-wrap{ grid-area: date; } .cl-checker-min .cl-select-wrap{width:250px;} .cl-checker .cl-input-main, .cl-checker-min .cl-input-main{ display:flex; flex-direction: row; flex-wrap:nowrap; align-items:center; justify-content:center; gap:10px; width:100%; max-width:500px; margin:0 auto; } .cl-checker .cl-input-label, .cl-checker-min .cl-input-label{ white-space:nowrap; margin:0; font-size:16px; } .cl-checker .cl-input-number, .cl-checker-min .cl-input-number{ flex:1 1 420px; min-width:100px; width:auto; height:40px; padding:10px 14px; font-size:14px; box-sizing:border-box; } .cl-checker .cl-btn-check, .cl-checker-min .cl-btn-check{ width:35% ; flex:0 0 auto; min-height:40px; white-space:nowrap; margin-left:0; font-size:14px;} .cl-lh{ gap: 10px; margin-bottom: 12px; } .cl-head-flag{ width: 20px!important; height: 20px!important; } .cl-head-title{ font-size: 18px; } .cl-head-date{ font-size: 14px; } .cl-big{ padding: 12px 14px; margin-bottom: 12px; } .cl-big-label{ font-size: 14px; } .cl-big-num{ font-size: 20px; padding: 10px 12px; } .cl-mini-row{ grid-template-columns: repeat(2, 1fr); gap: 12px; } .cl-mini{ padding: 10px 12px; } .cl-mini-label{ font-size: 12px; margin-bottom: 8px; } .cl-mini-num{ font-size: 14px; padding: 8px 10px; } }
@media (max-width:640px){ .cl-card{ grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 14px; } .cl-card-left{ grid-row:auto; grid-column:1/-1; flex-direction:row; justify-content:space-between; padding:14px 12px; border-radius:12px; } .cl-card-left .cl-day{ font-size: 28px; } .cl-card-left .cl-mon{ font-size: 14px; margin-top: 0; } .cl-title{ grid-column: 1/-1; font-size: 20px; } .cl-prizes{ grid-column: 1/-1; } .cl-widget.cl-lates .cl-list{ grid-template-columns: 1fr !important; gap: 16px; } .cl-select-wrap select{ height: 44px; font-size: 16px; padding: 0 14px; margin:5px 0; } .cl-caret{ right: 12px; } .cl-checker .cl-input-label, .cl-checker-min .cl-input-label{ margin-top: -10px; } .cl-checker-min .cl-select-wrap{width:250px; margin-bottom:10px;} .cl-card-single .cs-head{ gap:10px; padding:12px; } .cl-card-single .cs-flag{ width:20px!important; height:20px!important; } .cl-card-single .cs-title{ font-size:18px; } .cl-card-single .cs-date{ font-size:14px; } .cl-card-single .cs-big{ padding:12px 14px; margin:12px; border-radius:5px; } .cl-card-single .cs-big-label{ font-size:14px; margin-bottom:8px; } .cl-card-single .cs-big-num{ font-size:20px; padding:10px 12px; border-radius:5px; white-space:nowrap; font-variant-numeric:tabular-nums; } .cl-card-single .cs-mini-row{ grid-template-columns: repeat(3, 1fr); gap:12px; padding:0 12px 12px; } .cl-card-single .cs-mini{ padding:10px 12px; border-radius:5px; } .cl-card-single .cs-mini-label{ font-size:14px; margin-bottom:8px; } .cl-card-single .cs-mini-num{ font-size:14px; padding:8px 10px; white-space:nowrap; font-variant-numeric:tabular-nums; } .cl-card-single .cs-mini-num{ overflow-wrap:anywhere; white-space:normal; } .cl-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; } .cl-banner-title{ font-size: 16px; } .cl-table3 .cl-td-left{ min-width: 130px; } .cl-checker .cl-input-main, .cl-checker-min .cl-input-main{flex-direction: column;} .cl-input-main{ display:flex; flex-direction:column; align-items:stretch; gap:12px; max-width:640px; width:100%; margin:0 auto; } .cl-input-label{ margin:0; font-size:18px; text-align:left; white-space:normal; } .cl-input-number{ width:100%; min-width:0; padding:12px 14px; font-size:16px; border-radius:10px; } .cl-btn-check{ width:100%; min-height:48px; margin-left:0; border-radius:10px; } .cl-checker .cl-input-number, .cl-checker-min .cl-input-number { flex:1 1 20px; text-align:center; margin-bottom:10px; } }
@media (max-width:480px){ .cl-title{ font-size: 18px; } .cl-prizes .cl-box:not(.cl-first) .cl-num{ font-size: 20px; } .cl-box.cl-first .cl-num{ font-size: 24px; } .cl-input-number{ font-size: 16px; padding: 12px 12px; border-radius: 10px; } .cl-btn-check{ min-height: 52px; font-size: 16px; } .cl-table3 thead th, .cl-table3 tbody td{ padding: 10px 8px; } }
.cl-widget{ --cl-bg: #ffffff; --cl-card-bg: #ffffff; --cl-soft: #F3F5F7; --cl-line: #E5E8EC; --cl-text: #1E293B; --cl-muted: #64748B; --cs-hero: #000000; --cs-hero-text: #000000; --cs-accent: #16a34a; --num-bg: #E9EEF2; --num-text: #111827; --btn-bg: #000000; --btn-text: #ffffff; --btn-text-hover: #ffffff; --btn-hover: #f97e07; --btn-border: transparent; --in-bg: #ffffff; --in-text: #0f172a; --in-border: #CBD5E1; --in-placeholder: #94A3B8; --table-stripe: #F7F8FA; --table-head-text: #ffffff; --table-head-line: #2B2B2B; --divider: #E5E8EC; --shadow: 0 8px 22px rgba(2, 6, 23, 0.08); --radius: 22px; --modal-overlay: rgba(2,6,23,0.6); --modal-bg: #ffffff; }
.cl-widget{ color: var(--cl-text); background: transparent; }
.cl-widget .cl-muted{ color: var(--cl-muted); }
.cl-widget .cl-card, .cl-widget .cl-box{ background: var(--cl-card-bg); border:1px solid var(--cl-line); border-radius: var(--radius); box-shadow: var(--shadow); }
.cl-widget .cl-card-head, .cl-widget .cl-table3 thead th{ background: var(--cs-hero); color: var(--table-head-text); border-color: var(--table-head-line); }
.cl-widget .cl-table-banner{ background: var(--cs-hero); color: var(--table-head-text); border-top: 1px solid var(--table-head-line); border-right: 1px solid var(--table-head-line); border-left: 1px solid var(--table-head-line); border-bottom: 0px solid var(--table-head-line); }
.cl-widget .cl-btn-check{ background: var(--btn-bg); color: var(--btn-text); border:1px solid var(--btn-border); }
.cl-widget .cl-btn-check:hover{ background: var(--btn-hover); color: var(--btn-text-hover); }
.cl-widget .cl-input-number, .cl-widget .cl-only-controls .cl-select-wrap select{ background: var(--in-bg); color: var(--in-text); border:1px solid var(--in-border); }
.cl-widget .cl-input-number::placeholder{ color: var(--in-placeholder); }
.cl-widget .cl-big-num, .cl-widget .cs-big-num, .cl-widget .cl-mini-num{ background: var(--num-bg); color: var(--num-text); white-space: normal;}
.cl-widget hr, .cl-widget .cl-divider{ border-color: var(--divider); }
.cl-widget .cl-table3 tbody tr:nth-child(even){ background: var(--table-stripe); }
.cl-widget .cl-accent, .cl-widget .cl-date-label{ color: var(--cs-accent); }
.cl-widget .cl-backdrop{ background: var(--modal-overlay); }
.cl-widget .cl-dialog{ background: var(--modal-bg); }
.cl-widget .cl-caret{ color: var(--in-text); }
.cl-widget.cl-lates .cl-card{ border-top:7px solid var(--cs-hero); }
.cl-widget{ container-type: inline-size; container-name: cl; }
.cl-widget, .cl-widget *{ box-sizing: border-box; }
.cl-card-single, .cl-checker-min, .cl-table3, .cl-lates{ max-width: 100%; }
.cl-card-single .cs-mini, .cl-card-single .cs-big, .cl-mini, .cl-big, .cl-prizes .cl-box{ min-width: 0; }
@container cl (max-width: 520px){ .cl-card-single .cs-mini-row{ grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 12px 12px; } .cl-card-single .cs-big{ margin: 12px; } .cl-card-single .cs-big-num{ font-size: 20px; padding: 10px 12px; } .cl-mini-row{ grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@container cl (min-width: 521px) and (max-width: 860px){ .cl-card-single{ border-width:1.5px; border-radius:18px; } .cl-card-single .cs-big{ margin:16px; border-radius:12px; } .cl-card-single .cs-big-num{ font-size:20px; padding:12px 14px; } .cl-card-single .cs-mini-row{ grid-template-columns: repeat(3, 1fr); gap:14px; padding:0 16px 16px; } .cl-card-single .cs-mini{ border:1px solid var(--divider); border-radius:10px; } .cl-card-single .cs-mini-num{ white-space: normal; font-size:16px; padding:10px 12px; }  .cl-mini-row{ grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@container cl (max-width: 600px){ .cl-checker-min .cl-input-main{ grid-template-columns: 1fr; max-width:250px;} .cl-checker-min .cl-btn-check{ width:100%; } .cl-mini-row{ grid-template-columns: repeat(3, 1fr); gap: 12px; } .cl-checker .cl-input-number, .cl-checker-min .cl-input-number{flex: 1 1 20px; margin-bottom:5px; min-width: 250px;text-align: center;} .cl-checker .cl-input-main, .cl-checker-min .cl-input-main{flex-direction: column;} }
@container cl (max-width: 600px){ .cl-widget.cl-lates .cl-list{ grid-template-columns: 1fr !important; gap: 16px; } }
@media (min-width: 769px){ :where(.cl-checker, .cl-checker-min) .cl-input-main{ display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; gap: 10px !important; max-width: 550px !important; margin: 0 auto !important; } :where(.cl-checker, .cl-checker-min) .cl-input-number{ height: 40px !important; font-size: 16px !important; text-align: left !important; margin: 0 !important; flex: 0 1 auto !important; min-width: 120px !important; } :where(.cl-checker, .cl-checker-min) .cl-btn-check{ width: auto !important; min-width: 100px !important; min-height: 40px !important; margin-left: 0 !important;font-size: 13px !important; } :where(.cl-checker, .cl-checker-min) .cl-select-wrap{ width: 250px !important; max-width: 100% !important; margin: 6px auto 15px !important; } }
@container cl (max-width: 600px){ .cl-checker-min .cl-input-main{ max-width: 100%; grid-template-columns: 1fr auto; flex-direction: row; } .cl-checker-min .cl-input-number{ min-width: 0; } .cl-checker-min .cl-btn-check{ width: auto; margin-top: -5px; } }