/* =========================================================
   KBS Public — ธีมส่วนหน้าบ้าน (public) ของ BA Workspace
   modern / minimal — ใช้โทเคนสีชุดเดียวกับ kbs-theme.css
   ---------------------------------------------------------
   ใช้กับหน้า public เท่านั้น (SitePublic.Master)
   ต้องมีคู่กัน : Bootstrap 5.3, Bootstrap Icons, ฟอนต์ Prompt + Public Sans
   แก้ไฟล์นี้เมื่อไหร่ ต้องบวก APP_VERSION ใน Web.config เสมอ
   ========================================================= */

:root {
    --brand-50: #E8F1FB;
    --brand-100: #CFE2F7;
    --brand-200: #A2C6EE;
    --brand-300: #6BA3E0;
    --brand-400: #3B82D1;
    --brand-500: #1D6BC0;
    --brand-600: #16569E;
    --brand-700: #11447E;
    --brand-800: #0C325D;
    --brand-900: #071F3B;

    --ink: #101826;
    --ink-2: #35414F;
    --muted: #68788D;
    --line: #DCE3EB;
    --line-soft: #EBF0F6;
    --bg: #F6F8FB;
    --surface: #FFFFFF;

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-pill: 999px;
    --sh-1: 0 1px 2px rgba(7, 31, 59, .05), 0 1px 3px rgba(7, 31, 59, .04);
    --sh-2: 0 6px 18px rgba(7, 31, 59, .07), 0 1px 3px rgba(7, 31, 59, .04);
    --sh-3: 0 16px 40px rgba(7, 31, 59, .12);
    --ease: cubic-bezier(.4, 0, .2, 1);

    --font-th: 'Prompt', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-num: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* พื้นหลังวันหยุดสุดสัปดาห์ในปฏิทิน — ตั้งใจให้จางมาก เป็นเพียงการบอกใบ้
       ไม่ให้แย่งความสนใจไปจากวันทำการและรายการกิจกรรม
       (ปรับความเข้มที่นี่จุดเดียว มีผลทั้งหน้าเว็บและรูปที่บันทึก) */
    --weekend-sat-bg: rgba(106, 69, 196, .035);
    --weekend-sun-bg: rgba(193, 39, 47, .03);

    --bs-primary: #1D6BC0;
    --bs-primary-rgb: 29, 107, 192;
    --bs-link-color: #16569E;
    --bs-link-hover-color: #11447E;
    --bs-body-font-family: var(--font-th);
    --bs-body-color: var(--ink);
    --bs-border-color: var(--line);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
    /* ลิ้นชักเมนูที่ปิดอยู่เป็น position:fixed จึงพักตัวนอกจอทางขวาและยึดกับ viewport
       (อยู่นอกอิทธิพล overflow ของ body) ต้องตัดที่ระดับ html เท่านั้นจึงหายจริง
       ใช้ clip ไม่ใช่ hidden เพราะ hidden จะสร้าง scroll container ใหม่แล้วทำให้
       topbar แบบ position:sticky ค้างไม่ติดขอบบน */
    overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

body.kbs-public {
    font-family: var(--font-th);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    /* กันหน้าเลื่อนแนวนอนบนมือถือ : ลิ้นชักเมนูที่ปิดอยู่ถูกดันไปพักนอกจอทางขวา
       clip ไม่สร้าง scroll container ใหม่ จึงไม่ทำให้ topbar แบบ sticky เสีย
       (hidden เป็นตัวสำรองสำหรับเบราว์เซอร์รุ่นเก่าที่ยังไม่รองรับ clip) */
    overflow-x: hidden;
}

@supports (overflow: clip) {
    body.kbs-public { overflow-x: clip; }
}

/* ---------- Topbar ---------- */
.pub-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
}

/* ระยะห่างของโลโก้และปุ่มจากขอบเว็บ (container-xl ให้มาแค่ .75rem ซึ่งชิดเกินไป) */
.pub-topbar .navbar {
    padding-block: .65rem;
    padding-inline: 1.75rem;
    gap: 1.25rem;
}

/* ตั้งแต่ lg ขึ้นไป : ดันกลุ่มเมนูไปชิดขวา ให้ติดกับปุ่มเข้าสู่ระบบ */
@media (min-width: 992px) {
    .pub-drawer { flex: 1 1 auto; justify-content: flex-end; }
    .pub-drawer-body { padding: 0; justify-content: flex-end; }
    .pub-nav { gap: .15rem; }
}

.pub-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
}

/* ตราคณะ (imgs/logo.png) — โล่แนวตั้ง จึงล็อกความสูงแล้วปล่อยความกว้างตามสัดส่วน */
.pub-brand-mark {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 42px;
    object-fit: contain;
}

.pub-brand-title {
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--brand-800);
    line-height: 1.15;
}

.pub-brand-sub {
    font-size: .72rem;
    color: var(--muted);
    line-height: 1.1;
}

.pub-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--ink-2);
    font-size: .92rem;
    font-weight: 500;
    padding: .45rem .85rem;
    border-radius: var(--r-pill);
    transition: color .15s var(--ease), background .15s var(--ease);
}

.pub-nav .nav-link .bi {
    font-size: .95rem;
    color: var(--brand-300);
    transition: color .15s var(--ease);
}

.pub-nav .nav-link:hover .bi,
.pub-nav .nav-link:focus-visible .bi,
.pub-nav .nav-link.active .bi { color: var(--brand-500); }

.pub-nav .nav-link:hover,
.pub-nav .nav-link:focus-visible { color: var(--brand-600); background: var(--brand-50); }

.pub-nav .nav-link.active { color: var(--brand-700); background: var(--brand-50); }

.btn-pub-login {
    background: var(--brand-600);
    color: #fff;
    border: none;
    border-radius: var(--r-pill);
    font-weight: 500;
    font-size: .92rem;
    padding: .5rem 1.15rem;
    transition: background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}

.btn-pub-login:hover,
.btn-pub-login:focus-visible {
    background: var(--brand-700);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--sh-2);
}

/* ---------- ปุ่มเปิดเมนู (จอเล็ก) ---------- */
.pub-burger {
    display: inline-grid;
    place-items: center;
    width: 46px;               /* ≥44px ตามขนาดเป้าสัมผัสที่แนะนำ */
    height: 46px;
    margin-left: auto;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--brand-700);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--r-sm);
    transition: background .15s var(--ease), color .15s var(--ease);
}

.pub-burger:active { background: var(--brand-100); }

/* ---------- ลิ้นชักเมนู (offcanvas-lg : จอเล็กเป็นลิ้นชัก / lg ขึ้นไปเป็นเมนูแนวนอน) ---------- */
.pub-drawer { --bs-offcanvas-width: min(84vw, 330px); }

.pub-drawer-head {
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--line-soft);
}

.pub-drawer-title { display: flex; align-items: center; gap: .65rem; }

.pub-drawer-body { padding: 1rem 1.15rem 1.4rem; }

.pub-drawer-foot { margin-top: 1.25rem; }

.pub-drawer-foot .btn-pub-login {
    justify-content: center;
    padding-block: .8rem;      /* เป้าสัมผัสใหญ่ กดง่ายด้วยนิ้วโป้ง */
    font-size: 1rem;
}

/* ---------- แถบแจ้งเตือนระบบ (จองที่ไว้สำหรับสัญญาเช่า/MA — เฟส 2) ---------- */
.pub-notice {
    background: var(--brand-800);
    color: #DCE9F8;
    font-size: .85rem;
    padding: .5rem 1rem;
    text-align: center;
}

.pub-notice a { color: #fff; font-weight: 500; }

/* ---------- Hero ---------- */
.pub-hero {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0 4.5rem;
    background:
        radial-gradient(720px 340px at 12% -10%, var(--brand-100) 0%, transparent 60%),
        radial-gradient(640px 320px at 95% 8%, #E4EFFB 0%, transparent 55%),
        linear-gradient(180deg, #FDFEFF 0%, var(--bg) 100%);
}

.pub-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--brand-600);
    background: var(--surface);
    border: 1px solid var(--brand-100);
    border-radius: var(--r-pill);
    padding: .35rem .9rem;
    box-shadow: var(--sh-1);
}

.pub-hero h1 {
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    font-weight: 700;
    color: var(--brand-900);
    letter-spacing: -.01em;
    line-height: 1.22;
    margin: 1.1rem 0 .9rem;
}

.pub-hero h1 .hl { color: var(--brand-500); }

.pub-hero-lead {
    font-size: 1.02rem;
    font-weight: 300;
    color: var(--ink-2);
    max-width: 640px;
    margin-inline: auto;
    line-height: 1.75;
}

.pub-hero-actions { margin-top: 1.9rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.btn-hero-primary {
    background: var(--brand-600);
    color: #fff;
    border: none;
    border-radius: var(--r-pill);
    font-weight: 500;
    padding: .7rem 1.6rem;
    transition: background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}

.btn-hero-primary:hover,
.btn-hero-primary:focus-visible { background: var(--brand-700); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-2); }

.btn-hero-ghost {
    background: var(--surface);
    color: var(--brand-700);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-weight: 500;
    padding: .7rem 1.6rem;
    transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}

.btn-hero-ghost:hover,
.btn-hero-ghost:focus-visible { border-color: var(--brand-300); background: var(--brand-50); color: var(--brand-800); transform: translateY(-2px); }

/* ---------- Section ---------- */
.pub-section { padding: 3.75rem 0; }
.pub-section--alt { background: var(--surface); border-block: 1px solid var(--line-soft); }

/* ส่วนบริการไม่มีหัวข้อคั่น จึงลดระยะบนลงให้ต่อเนื่องกับ hero อย่างพอดี */
.pub-section--apps { padding-top: 2.75rem; }

.pub-section-head { max-width: 620px; margin: 0 auto 2.4rem; text-align: center; }

.pub-section-head .kicker {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-500);
}

.pub-section-head h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    font-weight: 600;
    color: var(--brand-900);
    margin: .45rem 0 .55rem;
}

.pub-section-head p { color: var(--muted); font-weight: 300; font-size: .95rem; margin: 0; line-height: 1.7; }

/* ---------- Cards ---------- */
.pub-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 1.6rem 1.5rem;
    height: 100%;
    box-shadow: var(--sh-1);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}

.pub-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--brand-100); }

.pub-card-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--brand-50);
    color: var(--brand-600);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.pub-card h3 { font-size: 1.02rem; font-weight: 600; color: var(--brand-900); margin-bottom: .4rem; }

.pub-card p { font-size: .88rem; font-weight: 300; color: var(--muted); line-height: 1.7; margin-bottom: .9rem; }

.pub-card-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }

.pub-card-links a {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--ink-2);
    text-decoration: none;
    padding: .35rem .55rem;
    margin-inline: -.55rem;
    border-radius: var(--r-sm);
    transition: color .15s var(--ease), background .15s var(--ease);
}

.pub-card-links a:hover,
.pub-card-links a:focus-visible { color: var(--brand-600); background: var(--brand-50); }

.pub-card-links a .bi { font-size: .8rem; color: var(--brand-300); flex: 0 0 auto; }

/* ---------- App card (ระบบงาน) ---------- */
/* การ์ดบริการเรียงเป็นตาราง ปรับจำนวนคอลัมน์ตามความกว้างที่มี
   (ไม่มีหัวข้อ section คั่น — การ์ดคือเนื้อหาหลักของส่วนนี้) */
.pub-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 1.25rem;
}

.pub-app {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    padding: 1.65rem 1.5rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    text-decoration: none;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}

.pub-app:hover,
.pub-app:focus-visible { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--brand-200); }

.pub-app-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    margin-bottom: .35rem;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    font-size: 1.4rem;
    box-shadow: var(--sh-1);
}

.pub-app-title { font-size: 1.02rem; font-weight: 600; color: var(--brand-900); line-height: 1.35; }

.pub-app-desc { font-size: .86rem; font-weight: 300; color: var(--muted); line-height: 1.65; }

/* แถวล่างสุดของการ์ด : ดันชิดขอบล่างเสมอ การ์ดทุกใบจึงจบเสมอกันแม้ข้อความยาวไม่เท่ากัน */
.pub-app-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    margin-top: auto;
    padding-top: .9rem;
}

/* ไอคอนท้ายการ์ด : ลูกศรขวา = ไปหน้าในระบบ · ลูกศรทแยง = เปิดแอปพลิเคชันอื่นในแท็บใหม่ */
.pub-app-cta > .bi-arrow-right,
.pub-app-cta > .bi-box-arrow-up-right {
    color: var(--brand-400);
    transition: transform .18s var(--ease);
}

.pub-app:hover .bi-arrow-right { transform: translateX(4px); }
.pub-app:hover .bi-box-arrow-up-right { transform: translate(3px, -3px); }

.pub-app-badge {
    flex: 0 0 auto;
    font-size: .74rem;
    font-weight: 500;
    color: var(--brand-600);
    background: var(--brand-50);
    border-radius: var(--r-pill);
    padding: .3rem .8rem;
    white-space: nowrap;
}

.pub-app-badge.is-lock { color: var(--ink-2); background: var(--line-soft); }

/* ---------- แถบ "กำลังพัฒนา" (ข้อความอย่างเดียว ไม่ใช่ลิงก์) ---------- */
.pub-roadmap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .85rem;
    margin-top: 2.25rem;
    padding: .9rem 1.25rem;
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    text-align: center;
}

.pub-roadmap-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--brand-600);
    background: var(--brand-50);
    border-radius: var(--r-pill);
    padding: .25rem .8rem;
    white-space: nowrap;
}

.pub-roadmap-items { font-size: .86rem; font-weight: 300; color: var(--muted); }

/* ---------- Footer ---------- */
.pub-footer {
    background: var(--brand-900);
    color: #B9C9DC;
    padding: 3rem 0 1.5rem;
    font-size: .88rem;
    font-weight: 300;
}

.pub-footer h4 { color: #fff; font-size: .95rem; font-weight: 600; margin-bottom: .9rem; }

.pub-footer a { color: #CBD9EA; text-decoration: none; transition: color .15s var(--ease); }
.pub-footer a:hover { color: #fff; }

.pub-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }

.pub-footer-brand { display: flex; align-items: center; gap: .65rem; margin-bottom: .9rem; }

.pub-footer-brand .pub-brand-mark { height: 46px; }

.pub-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
    font-size: .78rem;
    color: #8FA5BF;
}

/* ---------- เริ่มใช้งานยังไง (Landing) ----------
   หน้า Landing เป็นที่เดียวที่คนซึ่งยังเข้าระบบไม่ได้อ่านเจอ เพราะคู่มือฉบับเต็ม
   อยู่หลังประตูล็อกอิน ส่วนนี้จึงตอบเฉพาะเรื่อง "จะเข้าระบบยังไง" ไม่ยกคู่มือมาซ้ำ
   ------------------------------------------------------- */
.pub-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.pub-help {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.6rem 1.5rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
}

/* ไอคอนหัวการ์ด : ใช้รูปทรงเดียวกับการ์ดระบบงาน (.pub-app-icon) ให้สองส่วนนี้อ่านเป็นชุดเดียวกัน
   ไม่ใช้เลข 1-2-3 เพราะการ์ดสามใบนี้เป็น "สามสถานการณ์" ไม่ใช่ขั้นตอนที่ต้องทำเรียงกัน */
.pub-help-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    margin-bottom: .35rem;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    font-size: 1.4rem;
    box-shadow: var(--sh-1);
}

.pub-help-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-900);
    line-height: 1.4;
}

.pub-help-text {
    margin: 0;
    font-size: .86rem;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.7;
}

.pub-help-text b { font-weight: 500; color: var(--ink-2); }

/* ข้อควรระวังที่ทำให้คนติดบ่อย — ใช้สีอำพัน ไม่ใช่สีแดง เพราะยังไม่ใช่ความผิดพลาด */
.pub-help-note {
    display: flex;
    gap: .5rem;
    padding: .6rem .75rem;
    font-size: .8rem;
    font-weight: 300;
    line-height: 1.65;
    color: #7A5F16;
    background: #FDF8EA;
    border: 1px solid #F2E4BD;
    border-radius: var(--r-sm);
}

.pub-help-note .bi { flex: 0 0 auto; margin-top: .15rem; }

/* ลิงก์ท้ายการ์ด : ดันชิดขอบล่าง การ์ดทุกใบจึงจบเสมอกันแม้ข้อความยาวไม่เท่ากัน */
.pub-help-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    align-self: flex-start;
    margin-top: auto;
    padding-top: .9rem;
    font-size: .86rem;
    font-weight: 500;
    color: var(--brand-600);
    text-decoration: none;
}

.pub-help-link:hover,
.pub-help-link:focus-visible { color: var(--brand-700); text-decoration: underline; }

.pub-help-link .bi { transition: transform .18s var(--ease); }
.pub-help-link:hover .bi { transform: translateX(3px); }

/* บรรทัดปิดท้าย : ชี้ไปคู่มือฉบับเต็มที่อยู่หลังล็อกอิน */
.pub-help-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .6rem;
    margin-top: 1.75rem;
    font-size: .86rem;
    font-weight: 300;
    color: var(--muted);
    text-align: center;
}

.pub-help-more .bi { color: var(--brand-400); }

/* =========================================================
   Responsive — มือถือและแท็บเล็ต (ต่ำกว่า lg เมนูเป็นลิ้นชัก)
   ========================================================= */

@media (max-width: 991.98px) {

    /* ---- เมนูในลิ้นชัก : รายการใหญ่ กดด้วยนิ้วได้สบาย ---- */
    .pub-nav { width: 100%; gap: .15rem; }

    .pub-nav .nav-item { width: 100%; }

    .pub-nav .nav-link {
        gap: .75rem;
        width: 100%;
        min-height: 50px;              /* เป้าสัมผัสสูงพอสำหรับนิ้ว */
        padding: .75rem .9rem;
        font-size: 1rem;
        border-radius: var(--r-sm);
    }

    .pub-nav .nav-link .bi { font-size: 1.15rem; width: 1.5rem; text-align: center; }

    .pub-nav .nav-link.active {
        background: var(--brand-50);
        color: var(--brand-700);
        font-weight: 600;
        box-shadow: inset 3px 0 0 var(--brand-500);
    }

    /* ---- Topbar ----
       ห้ามใช้ backdrop-filter ที่ระดับนี้ : filter/backdrop-filter ทำให้ element
       กลายเป็น containing block ของลูกที่เป็น position:fixed ลิ้นชักเมนูจะยึดกับ
       แถบบน (สูงแค่ ~64px) แทนที่จะยึดกับหน้าจอ เมนูจึงล้นออกนอกกรอบ
       จอเล็กจึงใช้พื้นทึบแทน — เอฟเฟกต์กระจกฝ้ายังคงอยู่บนจอ lg ขึ้นไปที่ลิ้นชักไม่ทำงาน */
    .pub-topbar {
        background: var(--surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .pub-topbar .navbar { padding-block: .55rem; padding-inline: 1.15rem; gap: .5rem; }
    .pub-brand-mark { width: auto; height: 36px; }
    .pub-brand-title { font-size: .95rem; }
    .pub-brand-sub { font-size: .68rem; }

    /* ---- Hero ---- */
    .pub-hero { padding: 3rem 0 2.5rem; }
    .pub-hero-lead { font-size: .95rem; }
    .pub-hero-actions { margin-top: 1.5rem; gap: .6rem; }
    .pub-hero-actions .btn { flex: 1 1 auto; min-width: 190px; padding-block: .8rem; }

    /* ---- Section ---- */
    .pub-section { padding: 2.75rem 0; }
    .pub-section-head { margin-bottom: 1.75rem; }

    /* ---- การ์ดบริการ ----
       ไม่ล็อกจำนวนคอลัมน์ ปล่อยให้ auto-fit จัดเอง (แท็บเล็ตได้ 2 คอลัมน์ มือถือได้ 1) */
    .pub-app-grid { gap: 1rem; }
    .pub-app { padding: 1.35rem 1.25rem 1.15rem; }
    .pub-app-icon { width: 46px; height: 46px; font-size: 1.25rem; }

    /* ---- Footer ---- */
    .pub-footer { padding: 2.25rem 0 1.25rem; }
    .pub-footer-bottom { margin-top: 1.75rem; }
}

/* ---- มือถือจอแคบ ---- */
@media (max-width: 575.98px) {
    .pub-topbar .navbar { padding-inline: .9rem; }
    .pub-app-grid { grid-template-columns: 1fr; }
    /* ชื่อหน่วยงานยาวเกินแถบบนจอแคบ — ต้องใช้ !important เพื่อทับคลาส .d-block ของ Bootstrap
       ที่ประกาศ display:block !important ไว้บน element เดียวกัน */
    .pub-topbar .pub-brand-sub { display: none !important; }
    .pub-hero { padding: 2.5rem 0 2.25rem; }
    .pub-hero-eyebrow { font-size: .74rem; }
    .pub-hero-actions .btn { width: 100%; }
    .pub-roadmap { flex-direction: column; gap: .55rem; }
    .pub-help-more { margin-top: 1.35rem; }
}

/* =========================================================
   ปฏิทินกิจกรรม (Calendar.aspx)
   ========================================================= */

.cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.cal-pagetitle {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--brand-900);
    margin: .2rem 0 0;
}

.cal-share { display: flex; flex-wrap: wrap; gap: .5rem; }

.cal-share-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-th);
    font-size: .85rem;
    font-weight: 500;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: .45rem 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}

.cal-share-btn:hover,
.cal-share-btn:focus-visible { border-color: var(--brand-300); background: var(--brand-50); color: var(--brand-700); transform: translateY(-1px); }

.cal-share-line { color: #06C755; border-color: #B5EACB; }
.cal-share-line:hover { background: #E9FBF0; border-color: #06C755; color: #05A648; }

.cal-share-fb { color: #1877F2; border-color: #BBD7FB; }
.cal-share-fb:hover { background: #EAF2FE; border-color: #1877F2; color: #1465CE; }

.cal-share-save { color: #fff; background: var(--brand-600); border-color: var(--brand-600); }
.cal-share-save:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

/* ---------- การ์ดปฏิทิน (พื้นที่ที่ถูกบันทึกเป็นรูป) ---------- */
.cal-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    padding: 1.75rem;
    overflow: hidden;
}

.cal-head {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.4rem;
}

.cal-head-brand { display: flex; align-items: center; gap: .8rem; }

.cal-head-title { font-size: 1.35rem; font-weight: 700; color: var(--brand-900); line-height: 1.3; }
.cal-head-title .hl { color: var(--brand-500); }
.cal-head-sub { font-size: .85rem; font-weight: 300; color: var(--muted); }

.cal-nav { display: flex; gap: .4rem; }

.cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 .8rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--brand-700);
    background: var(--brand-50);
    border-radius: var(--r-pill);
    text-decoration: none;
    transition: background .15s var(--ease), color .15s var(--ease);
}

.cal-nav-btn:hover,
.cal-nav-btn:focus-visible { background: var(--brand-100); color: var(--brand-800); }

/* ---------- ตาราง ---------- */
.cal-dowrow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }

.cal-dowrow { border-bottom: 2px solid var(--line-soft); margin-bottom: .4rem; }

.cal-dow {
    text-align: center;
    font-weight: 600;
    font-size: .88rem;
    padding: .5rem .25rem;
    letter-spacing: .02em;
}

/* สีหัววันแบบภาพประชาสัมพันธ์เดิม จ→อา */
.cal-dow-1 { color: #E8A013; }
.cal-dow-2 { color: #E85CA8; }
.cal-dow-3 { color: #2FA84F; }
.cal-dow-4 { color: #F06423; }
.cal-dow-5 { color: #14A9CC; }
.cal-dow-6 { color: #7B52D3; }
.cal-dow-7 { color: #DC3545; }

.cal-cell {
    min-height: 120px;
    padding: .6rem .55rem;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.cal-grid .cal-cell:nth-child(7n) { border-right: none; }

/* วันหยุดสุดสัปดาห์ : พื้นหลังจาง ๆ ล้อสีหัวคอลัมน์ (เสาร์ม่วง / อาทิตย์แดง)
   วางไว้ก่อนกฎของวันนอกเดือนและวันปัจจุบัน เพื่อให้สองกฎนั้นทับได้ */
.cal-cell.is-sat { background: var(--weekend-sat-bg); }
.cal-cell.is-sun { background: var(--weekend-sun-bg); }

.cal-cell.is-sat .cal-daynum { background: #6A45C4; }
.cal-cell.is-sun .cal-daynum { background: #C1272F; }

.cal-cell.is-out { background: var(--surface-2, #F7F9FC); }

.cal-day { display: flex; align-items: center; gap: .45rem; }

.cal-daynum {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand-900);
    color: #fff;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: .95rem;
    flex: 0 0 auto;
}

.cal-dayname { display: none; font-weight: 600; font-size: .9rem; }

/* ---------- ไฮไลต์วันปัจจุบัน ---------- */
.cal-cell.is-today {
    background: var(--brand-50);
    box-shadow: inset 0 0 0 2px var(--brand-400);
    border-radius: var(--r-sm);
}

.cal-cell.is-today .cal-daynum {
    background: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(29, 107, 192, .18);
}

.cal-today-tag {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 600;
    color: #fff;
    background: var(--brand-500);
    border-radius: var(--r-pill);
    padding: .1rem .55rem;
    letter-spacing: .02em;
}

.cal-today-none { font-size: .8rem; font-weight: 300; color: var(--brand-600); font-style: italic; }

/* ---------- รายการกิจกรรม ---------- */
.cal-ev { font-size: .8rem; line-height: 1.5; }

.cal-ev-title { color: var(--ink); font-weight: 400; }
.cal-ev-unit { color: var(--brand-600); font-weight: 600; }

.cal-ev-loc { color: var(--muted); font-size: .76rem; margin-top: .1rem; }
.cal-ev-loc .bi { color: #DC3545; }

.cal-ev-badge {
    display: inline-block;
    margin-top: .25rem;
    font-size: .72rem;
    font-weight: 600;
    color: #fff;
    background: var(--brand-600);
    border-radius: var(--r-pill);
    padding: .18rem .65rem;
}

.cal-ev.is-urgent .cal-ev-title { color: #C82333; font-weight: 600; }
.cal-ev.is-urgent .bi-exclamation-triangle-fill { color: #C82333; }

.cal-empty {
    text-align: center;
    color: var(--muted);
    padding: 3.5rem 1rem;
    font-weight: 300;
}

.cal-empty .bi { font-size: 2.2rem; color: var(--brand-200); display: block; margin-bottom: .6rem; }

/* ---------- มือถือ + แท็บเล็ต : ตาราง 7 คอลัมน์ → รายการรายวัน ----------
   ที่ความกว้างต่ำกว่า 992px ช่องละ ~110px แคบเกินกว่าจะอ่านชื่อกิจกรรมภาษาไทยได้
   จึงเปลี่ยนเป็นรายการเรียงตามวัน (ซ่อนวันที่ไม่มีกิจกรรม)                        */
@media (max-width: 991.98px) {
    .cal-card { padding: 1.15rem; }
    .cal-dowrow { display: none; }
    .cal-grid { grid-template-columns: 1fr; }

    .cal-cell {
        min-height: 0;
        border-right: none;
        border: 1px solid var(--line-soft);
        border-radius: var(--r-md);
        margin-bottom: .6rem;
        padding: .85rem .9rem;
    }

    .cal-cell.is-out, .cal-cell.is-empty { display: none; }
    /* วันนี้ต้องเห็นเสมอในโหมดรายการ แม้จะไม่มีกิจกรรม */
    .cal-cell.is-today { display: flex; border-color: var(--brand-300); }

    .cal-day { padding-bottom: .5rem; border-bottom: 1px dashed var(--line-soft); }
    .cal-dayname { display: inline; }
    .cal-ev { font-size: .9rem; }
    .cal-ev-loc { font-size: .82rem; }

    /* แถบหัวเรื่องและปุ่มแชร์ */
    .cal-toolbar { gap: .85rem; }
    .cal-share { width: 100%; }
    .cal-share-btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
    .cal-head { gap: .85rem; }
    .cal-head-title { font-size: 1.15rem; }
    .cal-nav-btn { min-width: 44px; height: 44px; }
}

@media (max-width: 575.98px) {
    .cal-share-btn { flex-basis: calc(50% - .25rem); }   /* ปุ่มแชร์ 2 คอลัมน์ */
    .cal-head-brand .pub-brand-mark { width: auto; height: 34px; }
}

/* =========================================================
   ทำเนียบเบอร์โทรภายใน (Contact.aspx)
   ========================================================= */

.dir-head { margin-bottom: 1.25rem; }

.dir-kicker {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-500);
}

.dir-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--brand-900);
    margin: .2rem 0 .35rem;
}

.dir-lead { font-size: .95rem; font-weight: 300; color: var(--muted); margin: 0; }

.dir-summary {
    display: inline-block;
    margin-left: .5rem;
    font-size: .82rem;
    color: var(--brand-600);
    background: var(--brand-50);
    border-radius: var(--r-pill);
    padding: .15rem .7rem;
}

/* ---------- ช่องค้นหา ---------- */
.dir-searchbar {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 480px;
    margin-bottom: 1.5rem;
}

.dir-searchbar > .bi-search {
    position: absolute;
    left: 1rem;
    color: var(--muted);
    pointer-events: none;
}

.dir-search-input {
    width: 100%;
    min-height: 46px;
    padding: .6rem 2.6rem;
    font-family: var(--font-th);
    font-size: .95rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    outline: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.dir-search-input:focus { border-color: var(--brand-300); box-shadow: 0 0 0 3px var(--brand-50); }
.dir-search-input::-webkit-search-cancel-button { display: none; }

.dir-search-clear {
    position: absolute;
    right: .5rem;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--muted);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.dir-search-clear:hover { color: var(--ink); background: var(--line-soft); }

.dir-empty-search { color: var(--muted); font-weight: 300; padding: 1.5rem 0; }

/* ---------- กลุ่มใหญ่ (ติดต่อคณะ / หน่วยงานภายใน / สาขาวิชา) ---------- */
.dir-group + .dir-group { margin-top: 2.5rem; }

.dir-group-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1rem;
    padding-bottom: .7rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-900);
    border-bottom: 2px solid var(--brand-100);
}

.dir-group-head .bi { color: var(--brand-500); font-size: 1.15rem; }

.dir-group-count {
    margin-left: auto;
    font-size: .78rem;
    font-weight: 500;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: .18rem .75rem;
}

/* ---------- การ์ดหน่วยงาน ---------- */
.dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.dir-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    overflow: hidden;
}

.dir-card-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    padding: .95rem 1.15rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-800);
    background: var(--brand-50);
    border-bottom: 1px solid var(--brand-100);
}

.dir-card-head .bi { color: var(--brand-500); }

.dir-count {
    margin-left: auto;
    font-size: .76rem;
    font-weight: 600;
    color: var(--brand-600);
    background: var(--surface);
    border-radius: var(--r-pill);
    padding: .12rem .6rem;
}

.dir-list { list-style: none; margin: 0; padding: 0; }

.dir-item {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1.15rem;
    border-bottom: 1px solid var(--line-soft);
}

.dir-item:last-child { border-bottom: none; }
.dir-item:hover { background: var(--surface-2, #F7F9FC); }

.dir-item-main { min-width: 0; flex: 1 1 55%; }

.dir-item-name { font-size: .92rem; color: var(--ink); }
.dir-item-note { font-size: .8rem; font-weight: 300; color: var(--muted); margin-top: .1rem; }

.dir-mail {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .25rem;
    font-size: .8rem;
    color: var(--brand-600);
    text-decoration: none;
    word-break: break-all;
}

.dir-mail:hover { text-decoration: underline; }

.dir-item-phones { display: flex; flex-wrap: wrap; gap: .4rem; flex: 0 0 auto; }

.dir-tel {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 38px;
    padding: .35rem .85rem;
    font-size: .92rem;
    font-weight: 500;
    color: var(--brand-700);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--r-pill);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}

.dir-tel:hover,
.dir-tel:focus-visible { background: var(--brand-100); border-color: var(--brand-300); color: var(--brand-800); transform: translateY(-1px); }

.dir-tel .bi { font-size: .82rem; color: var(--brand-500); }

.dir-nophone { font-size: .8rem; font-weight: 300; color: var(--muted); font-style: italic; }

.dir-empty {
    text-align: center;
    color: var(--muted);
    font-weight: 300;
    padding: 3.5rem 1rem;
}

.dir-empty .bi { display: block; font-size: 2.2rem; color: var(--brand-200); margin-bottom: .6rem; }

@media (max-width: 991.98px) {
    .dir-grid { grid-template-columns: 1fr; gap: 1rem; }
    .dir-group + .dir-group { margin-top: 2rem; }
    .dir-group-head { font-size: 1.1rem; }
    .dir-group-count { font-size: .72rem; }
    .dir-searchbar { max-width: none; }
    .dir-item { padding: .85rem 1rem; }
    .dir-tel { min-height: 42px; }        /* กดโทรด้วยนิ้วได้สะดวก */
}

/* ---------- โหมดถ่ายรูป (html2canvas) ----------
   ปุ่ม "บันทึกรูปภาพ" จะโคลนการ์ดปฏิทินไปวางนอกจอแล้วใส่คลาสนี้
   เพื่อให้รูปที่ได้เป็นตารางเดือนเต็มเสมอ ไม่ว่าผู้ใช้จะเปิดจากมือถือหรือคอมพิวเตอร์ */
.cal-shot-holder {
    position: fixed;
    top: 0;
    left: -20000px;
    width: 1180px;
    pointer-events: none;
    z-index: -1;
}

.cal-card.is-shot { width: 1180px; padding: 1.75rem; box-shadow: none; }
.cal-card.is-shot .cal-dowrow { display: grid !important; }
.cal-card.is-shot .cal-grid { grid-template-columns: repeat(7, 1fr) !important; }

.cal-card.is-shot .cal-cell {
    display: flex !important;
    min-height: 120px;
    margin-bottom: 0;
    padding: .6rem .55rem;
    border: none;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
}

.cal-card.is-shot .cal-grid .cal-cell:nth-child(7n) { border-right: none; }
.cal-card.is-shot .cal-cell.is-out { display: flex !important; background: var(--surface-2, #F7F9FC); }
.cal-card.is-shot .cal-day { padding-bottom: 0; border-bottom: none; }
.cal-card.is-shot .cal-dayname { display: none !important; }
.cal-card.is-shot .cal-ev { font-size: .8rem; }
.cal-card.is-shot .cal-ev-loc { font-size: .76rem; }

/* ไม่ไฮไลต์ "วันนี้" ในรูปที่บันทึก : รูปถูกแชร์แล้วเก็บไว้ดูวันหลัง
   ถ้าติดไฮไลต์ไปด้วยจะกลายเป็นข้อมูลผิดทันทีที่ข้ามวัน */
.cal-card.is-shot .cal-cell.is-today { background: transparent; box-shadow: none; border-radius: 0; }
.cal-card.is-shot .cal-cell.is-today .cal-daynum { background: var(--brand-900); box-shadow: none; }
/* ถ้าวันปัจจุบันตรงกับเสาร์/อาทิตย์ ในรูปต้องคงสีวันหยุดไว้ ไม่ใช่กลายเป็นวันธรรมดา */
.cal-card.is-shot .cal-cell.is-today.is-sat { background: var(--weekend-sat-bg); }
.cal-card.is-shot .cal-cell.is-today.is-sun { background: var(--weekend-sun-bg); }
.cal-card.is-shot .cal-cell.is-today.is-sat .cal-daynum { background: #6A45C4; }
.cal-card.is-shot .cal-cell.is-today.is-sun .cal-daynum { background: #C1272F; }
.cal-card.is-shot .cal-today-tag,
.cal-card.is-shot .cal-today-none { display: none !important; }