/* ============================================================
   cookie.css : แถบแจ้ง + หน้าต่างตั้งค่าคุกกี้ (cookie.php / cookie.js)
   ------------------------------------------------------------
   หน้าตาชุดเดียวกับการ์ดโฆษณา i-Test (promo.css) : กรอบทองไล่สี · รูปบนพื้นทอง · ปุ่มทอง
   จอคอม  : แถบกว้างกลางจอด้านล่าง  รูป | หัวข้อ + รายละเอียด | ปุ่ม
   มือถือ : รูป | หัวข้อ + รายละเอียด แล้วแถวปุ่มชิดขวา วางเหนือเมนูล่าง · หน้าต่างตั้งค่าเป็นแผ่นเลื่อนขึ้นจากล่าง
   ตั้งค่าเองทั้งหมด ใช้ได้ทุกหน้า (report.css / home.css / report_page.css)
   ============================================================ */

.ck-bar, .ck-modal, .ck-toast, .ck-foot {
    font-family: 'Noto Sans Thai', 'Sarabun', sans-serif;
}
.ck-bar *, .ck-modal *, .ck-bar, .ck-dlg { box-sizing: border-box; }

/* แถบคุกกี้แบบเดิมของหน้ารุ่นเก่า : ใช้แถบใหม่แทน */
.box_cookie { display: none !important; }

/* ---------- แถบแจ้ง ---------- */
.ck-bar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 99;
    width: min(960px, calc(100% - 32px));
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 12px 16px 12px 12px;
    border: 2px solid transparent;
    border-radius: 22px;
    background:
        linear-gradient(90deg, #fbf2df 0, #fff 32%) padding-box,
        linear-gradient(115deg, #f1dcae, #D6B172 35%, #a8844a 62%, #ecd29c) border-box;
    box-shadow: 0 18px 40px rgba(110, 78, 26, .26), 0 0 0 6px rgba(214, 177, 114, .14);
    color: #1f1f1f;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
    transform: translate(-50%, calc(100% + 40px));
    opacity: 0;
    transition: transform .6s cubic-bezier(.2, 1.2, .35, 1), opacity .3s ease;
}
.ck-bar.on { transform: translate(-50%, 0); opacity: 1; }

.ck-av {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    flex: none;
    border-radius: 16px;
    background: linear-gradient(145deg, #f5e3bd, #D6B172);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 6px 16px rgba(168, 132, 74, .35);
}
.ck-av img { display: block; width: 50px; height: 50px; border-radius: 12px; object-fit: cover; }
.ck-av.sm { width: 44px; height: 44px; border-radius: 13px; }
.ck-av.sm img { width: 36px; height: 36px; border-radius: 10px; }

.ck-tx { min-width: 0; }
.ck-t {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}
.ck-t i { color: #c49a55; }
.ck-s { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: #5b5446; }
.ck-s a, .ck-hd-t a {
    color: #a8762f;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ck-act {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.ck-link {
    grid-column: 1 / -1;
    order: 3;
    justify-self: center;
    font-size: 13px;
    color: #8a6a3a;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ck-link:hover { color: #1f1f1f; }

/* ---------- ปุ่ม ---------- */
.ck-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    margin: 0;
    padding: 0 18px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: linear-gradient(135deg, #e3c48e, #D6B172 45%, #c49a55);
    color: #1f1f1f;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(214, 177, 114, .45), inset 0 1px 0 rgba(255, 255, 255, .45);
    transition: transform .15s, box-shadow .15s, background .15s;
}
.ck-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(214, 177, 114, .55); }
.ck-btn.ghost {
    background: #fff;
    border-color: #D6B172;
    color: #8a6a3a;
    box-shadow: none;
}
.ck-btn.ghost:hover { background: #fbf2df; }
.ck-btn:focus-visible, .ck-link:focus-visible, .ck-x:focus-visible, .ck-more summary:focus-visible {
    outline: 3px solid rgba(214, 177, 114, .6);
    outline-offset: 2px;
}

/* ---------- หน้าต่างตั้งค่า ---------- */
html.ck-lock { overflow: hidden; }
.ck-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: #1f1f1f;
    text-align: left;
}
.ck-modal[hidden] { display: none; }
.ck-shade {
    position: absolute;
    inset: 0;
    background: rgba(31, 24, 14, .45);
    opacity: 0;
    transition: opacity .25s;
}
.ck-modal.on .ck-shade { opacity: 1; }
.ck-dlg {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: min(86vh, 780px);
    border: 2px solid transparent;
    border-radius: 22px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(115deg, #f1dcae, #D6B172 35%, #a8844a 62%, #ecd29c) border-box;
    box-shadow: 0 30px 70px rgba(40, 28, 10, .35);
    outline: none;
    opacity: 0;
    transform: translateY(18px) scale(.98);
    transition: transform .28s cubic-bezier(.2, 1, .35, 1), opacity .22s;
}
.ck-modal.on .ck-dlg { opacity: 1; transform: none; }

.ck-hd {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #f1e8da;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(90deg, #fbf2df, #fff 65%);
}
.ck-hd-t { min-width: 0; }
.ck-hd h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; color: #1f1f1f; border: 0; padding: 0; }
.ck-hd p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: #6b6152; }
.ck-x {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3eee5;
    color: #6b604f;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ck-x:hover { background: #1f1f1f; color: #fff; }

.ck-body { flex: 1; overflow: auto; padding: 4px 16px; overscroll-behavior: contain; }
.ck-cat { padding: 12px 0; border-bottom: 1px solid #f4efe6; }
.ck-cat:last-child { border-bottom: 0; }
.ck-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ck-ct { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; }
.ck-ct b { font-weight: 600; }
.ck-ct i {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(214, 177, 114, .16);
    color: #a8844a;
    font-size: 13px;
}
.ck-always {
    flex: none;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(31, 157, 85, .1);
    color: #17753f;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.ck-d { margin: 6px 0 0 40px; font-size: 13px; line-height: 1.55; color: #5b5446; }

/* สวิตช์เปิด/ปิด */
.ck-sw { position: relative; flex: none; width: 46px; height: 26px; margin: 0; cursor: pointer; }
.ck-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ck-sw span { position: absolute; inset: 0; border-radius: 999px; background: #ddd5c8; transition: background .2s; }
.ck-sw span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s;
}
.ck-sw input:checked + span { background: linear-gradient(135deg, #e3c48e, #c49a55); }
.ck-sw input:checked + span::after { transform: translateX(20px); }
.ck-sw input:focus-visible + span { outline: 3px solid rgba(214, 177, 114, .6); outline-offset: 2px; }

/* รายการคุกกี้ของแต่ละหมวด */
.ck-more { margin: 6px 0 0 40px; }
.ck-more summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #a8762f;
    cursor: pointer;
    list-style: none;
}
.ck-more summary::-webkit-details-marker { display: none; }
.ck-more summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 9px;
    transition: transform .2s;
}
.ck-more[open] summary::after { transform: rotate(180deg); }
.ck-more ul { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.ck-more li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1px 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fbf8f2;
    font-size: 12.5px;
    line-height: 1.45;
    color: #3d3830;
}
.ck-more code {
    grid-row: span 2;
    align-self: start;
    padding: 1px 6px;
    border: 1px solid #eee4d3;
    border-radius: 6px;
    background: #fff;
    color: #8a6a3a;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 12px;
}
.ck-more small { font-size: 11.5px; color: #9a9184; }

.ck-ft {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid #f1e8da;
}

/* ---------- ข้อความยืนยัน ---------- */
.ck-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 2100;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #2b2419;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
    transform: translate(-50%, 20px);
    opacity: 0;
    transition: transform .3s, opacity .3s;
    pointer-events: none;
}
.ck-toast i { color: #eccb8e; }
.ck-toast.on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- ลิงก์ท้ายหน้า ---------- */
.ck-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 12px;
    margin: 28px auto 10px;
    padding: 0 16px;
    font-size: 13px;
    color: #b3aa9c;
}
.ck-foot a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8d8475;
    text-decoration: none;
}
.ck-foot a:hover { color: #a8762f; text-decoration: underline; }
.ck-foot i { font-size: 12px; color: #c9a86c; }

@media (prefers-reduced-motion: reduce) {
    .ck-bar, .ck-dlg, .ck-shade, .ck-toast { transition: opacity .2s ease; }
    .ck-btn:hover { transform: none; }
}

/* ---------- จอแคบ / มือถือ ---------- */
@media (max-width: 760px) {
    .ck-bar {
        grid-template-columns: 46px minmax(0, 1fr);
        grid-template-areas: "av tx" "act act";
        align-items: start;
        gap: 8px 12px;
        padding: 10px 12px;
        border-radius: 18px;
        box-shadow: 0 12px 30px rgba(110, 78, 26, .26), 0 0 0 4px rgba(214, 177, 114, .14);
    }
    .ck-bar > .ck-av { grid-area: av; width: 46px; height: 46px; border-radius: 13px; }
    .ck-bar > .ck-av img { width: 38px; height: 38px; border-radius: 10px; }
    .ck-tx { grid-area: tx; }
    .ck-t { font-size: 14.5px; }
    .ck-s { font-size: 11.5px; line-height: 1.45; }
    .ck-act {
        grid-area: act;
        display: flex;
        justify-content: flex-end;
        gap: 6px;
    }
    .ck-link { order: 0; margin-right: auto; font-size: 12px; align-self: center; }
    .ck-bar .ck-btn { height: 32px; padding: 0 12px; font-size: 12.5px; }
    .ck-bar .ck-btn:not(.ghost) { box-shadow: 0 6px 14px rgba(214, 177, 114, .5), inset 0 1px 0 rgba(255, 255, 255, .45); }
}
/* มีเมนูล่าง (menu.css ≤ 480px) : วางเหนือเมนู */
@media (max-width: 480px) {
    .ck-bar { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
    .ck-toast { bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
}
/* หน้าต่างตั้งค่าบนมือถือ : แผ่นเลื่อนขึ้นจากขอบล่าง */
@media (max-width: 600px) {
    .ck-modal { align-items: flex-end; padding: 0; }
    .ck-dlg {
        width: 100%;
        max-height: 88vh;
        border-bottom-width: 0;
        border-radius: 22px 22px 0 0;
        transform: translateY(40px);
    }
    .ck-hd { padding: 14px 14px 10px; }
    .ck-hd h2 { font-size: 16.5px; }
    .ck-body { padding: 2px 14px; }
    .ck-d, .ck-more { margin-left: 0; }
    .ck-ft {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .ck-ft .ck-btn { width: 100%; padding: 0 10px; font-size: 13.5px; }
    .ck-ft .ck-btn:not(.ghost) { grid-column: 1 / -1; order: -1; }
}