/* ============================================================================
   DDC-CPBMS — ชั้นรวมหน้าตาชิ้นส่วน UI ของทุกระบบ   ๑๐ ก.ย. ๒๕๖๙
   (เดิมชื่อ ui-radius.css คุมแต่มุมโค้ง ตอนนี้คุมขนาดปุ่มด้วย จึงเปลี่ยนชื่อ)
   ----------------------------------------------------------------------------
   ปัญหาที่แก้
     ๑) มุมโค้ง — นับจากไฟล์จริงได้ค่า border-radius ที่ใช้อยู่ ๓๐ กว่าค่า
        เฉพาะใน <style> ของหน้าก็มี 8px 412 จุด, 4px 283, 10px 275, 12px 251,
        20px 182, 6px 141, 16px 106 ... ต่อชนิดชิ้นส่วนก็ปนกันเอง
        ปุ่มมีทั้ง 5/6/8/10/12/16/20/24/99/999px  การ์ดมีทั้ง 8/10/12/13/16/20/25px
        แผงเนื้อหามีทั้ง 10–32px  SweetAlert2 5px  select2 4px
     ๒) ขนาดปุ่ม — สำรวจแล้วมี ๑๑๔ รูปแบบเฉพาะระบบราก (ยังไม่รวมระบบอื่น)
        padding ตั้งแต่ 4px ถึง 16px 24px, font-size 11px ถึง 20px,
        ความสูงที่ตรึงไว้ตั้งแต่ 26px ถึง 72px

   สิ่งที่ไฟล์นี้ทำ
     ก) มุมโค้ง สองโทเคน (แยกตามขนาดของชิ้นส่วน ไม่ได้แยกตามระบบ)
        --ddc-radius     16px = การ์ด, แผงเนื้อหา, กล่องซ้อน, กล่อง SweetAlert
        --ddc-radius-ctl  8px = ช่องกรอก, select, select2, ปุ่ม, เมนูดรอปดาวน์,
                                ปุ่ม/ช่องกรอกใน SweetAlert
        (ตัวควบคุมสูงราว 38px ถ้าโค้ง 16px จะกลายเป็นแคปซูล จึงแยกจากการ์ด)
     ข) ขนาดปุ่ม (padding / font-size / line-height) = โทเคนชุด --ddc-btn-*
        มีสามขั้นเท่านั้น: ปกติ / .btn-sm / .btn-lg
     **แตะเฉพาะมุมโค้งกับขนาด ไม่แตะสี น้ำหนักตัวอักษร เงา หรือเส้นขอบ**
     => โทนสีและเอกลักษณ์ของแต่ละระบบยังอยู่ครบ

   ค่าเดียวทุกระบบ (ตามที่สั่ง "ทุกระบบ เท่ากัน")
     ตาราง $__ui_tokens_by_system ใน layouts/ui_controls_head.php ยังแยกรายระบบไว้
     ให้ปรับได้ทีหลัง แต่ตอนนี้ตั้งค่าเท่ากันหมด  ถ้าจะเปลี่ยนมุมโค้งทั้งเว็บ
     แก้ --ddc-radius บรรทัดเดียวในไฟล์นั้น

   ทำไมต้องใช้ !important และเซเลกเตอร์ยาว ๆ (html body .x.x)
     ๑) กฎเดิมกระจายใน <style> ของหน้าเกือบพันไฟล์ + inline style attribute
        ชั้นทับที่ไม่มี !important จะแพ้ (ไฟล์นี้อยู่ใน <head> แต่หลายหน้า
        มี <style> อยู่ใน <body> ซึ่งมาทีหลังในลำดับเอกสาร)
     ๒) กฎเดิมที่ใส่ !important ไว้แล้วมี ๑๘ จุดทั้งเว็บ (ส่วนใหญ่คือ
        .swal2-popup และปุ่มของ SweetAlert ที่แต่ละหน้าตั้งเอง) เมื่อ !important
        ชนกัน ตัดสินด้วย specificity จึงยกน้ำหนักด้วย html body + คลาสซ้ำ
        (0,2,2) ให้ชนะแบบ .ua2fa-pop .swal2-confirm (0,2,0)

   ขอบเขต — สิ่งที่ "ไม่" แตะ โดยเจตนา
     - ของที่กลมเป็นวงจริง (50%): ไอคอนวงกลม, รูปโปรไฟล์, ปุ่มลอยวงกลม
     - ป้าย/ชิป/แคปซูล, แถบ progress, สวิตช์, ดาวให้คะแนน
     - แถบเครื่องมือ Summernote (.note-*) และปลั๊กอินที่มีธีมของตัวเอง
     - ตัวห่อ (.form-group ของ Bootstrap, .input-group เอง, .btn-group)
     - เลขหน้า (.page-link, .paginate_button) — คนละภาษาการออกแบบ
     - การพิมพ์: ทั้งไฟล์อยู่ใน @media screen เพื่อไม่ทับกฎ @media print
       ของหน้าต่าง ๆ ที่ตั้งใจให้การ์ดแบนเวลาพิมพ์ (เช่น .table-card ของ ddc-pic)

   จุดเสียบ
     layouts/ui_controls_head.php  <- responsive_head.php (๓๑๗ หน้า)
                                   <- ddc-pic/index.php (มี <head> ของตัวเอง)
   ============================================================================ */

:root {
  /* การ์ด / แผงเนื้อหา / กล่องซ้อน */
  --ddc-radius: 16px;

  /* ตัวควบคุม: ช่องกรอก select select2 ปุ่ม — โค้งน้อยกว่าการ์ด
     [๑๐ ก.ย. ๒๕๖๙ รอบสาม] ผู้ใช้สั่งให้กลุ่มนี้ "เหมือนเดิม" เพราะที่ 16px
     ช่องที่สูง 38px จะดูเป็นแคปซูล (16px เกินครึ่งความสูงเกือบเท่าตัว) */
  --ddc-radius-ctl: 8px;

  /* ขนาดปุ่มสามขั้น — ความสูงเกิดจาก padding + line-height ไม่ตรึง height
     เพื่อไม่ให้ปุ่มที่มีเนื้อหาสองบรรทัดถูกบีบ */
  --ddc-btn-py: 8px;
  --ddc-btn-px: 16px;
  --ddc-btn-fs: 14px;
  --ddc-btn-gap: 8px;

  /* ความสูงร่วมของ input / select / select2 / ปุ่ม — "สูงเท่ากัน" ทั้งเว็บ
     [๑๐ ก.ย. ๒๕๖๙ รอบสาม] เดิมความสูงมาจาก padding+font ของแต่ละหน้า
     วัดจากหน้าจริงได้ 28px (select2 ของ vendor) ถึง 48px ในหน้าเดียวกัน */
  --ddc-ctl-h: 38px;

  --ddc-btn-sm-h: 30px;
  --ddc-btn-sm-py: 4px;
  --ddc-btn-sm-px: 12px;
  --ddc-btn-sm-fs: 12.5px;

  --ddc-btn-lg-h: 48px;
  --ddc-btn-lg-py: 12px;
  --ddc-btn-lg-px: 24px;
  --ddc-btn-lg-fs: 16px;
}

@media screen {

  /* ── ๑. ช่องกรอก / ดรอปดาวน์ / พื้นที่ข้อความ ─────────────────────────── */

  /* ระบุชนิดที่ "เอา" ทีละชนิด ไม่ใช้ :not() ไล่ตัดชนิดที่ไม่เอา
     เหตุผล: :not() ต่อกันเก้าชั้นดัน specificity ขึ้นเป็น (0,9,3) แล้วไปชนะกฎ
     ของ .input-group ในข้อ ๔ ที่ต้องตัดมุมด้านในให้เรียบ  ผลคือช่องกรอกที่มี
     ปุ่มต่อท้ายกลับโค้งทุกมุมแล้วซ้อนกับปุ่ม (เจอจากหน้าทดสอบจริง)
     แบบนี้ทุกเซเลกเตอร์เป็น (0,1,3) เท่ากันหมด และไม่แตะ checkbox/radio/
     range/color/submit/button/reset/image/hidden เลยตั้งแต่ต้น
     input ที่ไม่ระบุ type = ช่องข้อความตามค่าปริยาย จึงต้องมี :not([type]) */
  html body input:not([type]),
  html body input[type="text"],
  html body input[type="search"],
  html body input[type="number"],
  html body input[type="email"],
  html body input[type="password"],
  html body input[type="tel"],
  html body input[type="url"],
  html body input[type="date"],
  html body input[type="datetime-local"],
  html body input[type="month"],
  html body input[type="week"],
  html body input[type="time"],
  html body input[type="file"],
  html body select,
  html body textarea,
  html body .form-control,
  html body .form-control-custom,
  html body .form-select,
  html body .custom-select,
  html body .form-ctrl,
  html body .form-input,
  html body .input,
  html body .input770,
  html body .search-input,
  html body .filter-search-input,
  html body .search-select,
  html body .filter-select,
  html body .sort-select,
  html body .sheet-select,
  html body .rp-textarea,
  html body .pp-name-input,
  html body .percent-input,
  html body .bk-input,
  html body .bk-select,
  html body .inline-field,
  html body .my-field,
  html body .pwm-field,
  html body .pfm-field,
  html body .field {
    border-radius: var(--ddc-radius-ctl) !important;
  }

  /* ความสูงของช่องกรอกและดรอปดาวน์ = --ddc-ctl-h (เท่ากับปุ่มและ select2)
     ----------------------------------------------------------------------
     เดิมความสูงมาจาก padding + font ของแต่ละหน้า จึงไม่เท่ากันเลย
     (วัดจากหน้าจริงได้ตั้งแต่ 28px ถึง 48px ในหน้าเดียวกัน)
     ใช้ height + ล้าง padding แนวตั้ง เพราะเบราว์เซอร์จัดข้อความใน <input>
     และ <select> ให้อยู่กลาง content box เองอยู่แล้ว จึงไม่ต้องพึ่ง flex
     เลือกด้วยเซเลกเตอร์ระดับ "แท็ก" เท่านั้น (input/select) เพราะคลาสเฉพาะกิจ
     ทุกตัว (.search-input .filter-date .bk-select ฯลฯ) ก็เป็นแท็กเหล่านี้อยู่แล้ว
     ถ้าไล่ใส่ตามชื่อคลาสจะเสี่ยงไปโดน "ตัวห่อ" ที่ชื่อคล้ายช่องกรอก
     ยกเว้น input[type=file] (ปุ่มเลือกไฟล์ข้างในต้องการที่มากกว่า)
     และ textarea (หลายบรรทัด) ให้ใช้เป็นความสูงต่ำสุดแทน */
  html body input:not([type]),
  html body input[type="text"],
  html body input[type="search"],
  html body input[type="number"],
  html body input[type="email"],
  html body input[type="password"],
  html body input[type="tel"],
  html body input[type="url"],
  html body input[type="date"],
  html body input[type="datetime-local"],
  html body input[type="month"],
  html body input[type="week"],
  html body input[type="time"],
  html body select {
    height: var(--ddc-ctl-h) !important;
    min-height: var(--ddc-ctl-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html body textarea {
    min-height: var(--ddc-ctl-h) !important;
  }

  /* ── ๒. select2 (ทั้งเว็บใช้ 4.x) ───────────────────────────────────────
     คลาสซ้ำสองครั้งเพื่อให้ชนะกฎเดิมที่เขียนแบบ
     .select2-container--default .select2-selection--single (0,2,0) */
  html body .select2-selection.select2-selection,
  html body .select2-dropdown.select2-dropdown,
  html body .select2-search__field.select2-search__field,
  html body .select2-selection__choice.select2-selection__choice {
    border-radius: var(--ddc-radius-ctl) !important;
  }

  /* คงพฤติกรรมเดิมของ select2 ที่ให้ช่องกับรายการ "เชื่อมติดกัน" ตอนกางเมนู
     (ไม่ทำข้อนี้ จะเห็นกล่องโค้งสองใบซ้อนกันแล้วดูหลุดจากกัน) */
  html body .select2-container--open.select2-container--below .select2-selection.select2-selection {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  html body .select2-container--open.select2-container--above .select2-selection.select2-selection {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  html body .select2-dropdown--below.select2-dropdown--below {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  html body .select2-dropdown--above.select2-dropdown--above {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* ความสูงของ select2 ให้เท่าช่องกรอกข้าง ๆ — vendor ตรึงไว้ 28px
     ต้องยุบทั้งสามชิ้น (ตัวช่อง / ข้อความข้างใน / ลูกศร) ไม่งั้นข้อความ
     กับลูกศรจะลอยไม่ตรงกลาง  ค่าเดิมของแต่ละหน้า (36/38/40px) ถูกทับด้วย */
  /* [๑๐ ก.ย. ๒๕๖๙] ต้องล้าง padding แนวตั้งของ "ตัวช่อง" ด้วย ไม่ใช่ตั้งแค่ height
     เพราะธีมของหลายหน้าใส่ padding ให้เอง (ddc-pts: padding 8px 15px) และ select2
     เป็น border-box => ช่องข้างในเหลือ 38-2-16 = 20px แต่บรรทัดข้อความสูง 36px
     ข้อความจึงถูกดันลงไปเกินกลาง 8px (อาการ "ข้อความติดล่าง")
     พอ padding แนวตั้งเป็น 0 ช่องข้างในจะสูง 36px = line-height พอดี ข้อความอยู่กลาง */
  html body .select2-container .select2-selection--single.select2-selection--single {
    height: var(--ddc-ctl-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html body .select2-container .select2-selection--single .select2-selection__rendered {
    height: auto !important;
    line-height: calc(var(--ddc-ctl-h) - 2px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html body .select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(var(--ddc-ctl-h) - 2px) !important;
  }

  html body .select2-container .select2-selection--multiple.select2-selection--multiple {
    min-height: var(--ddc-ctl-h) !important;
  }

  /* ── ๓. ปุ่ม: มุมโค้ง ───────────────────────────────────────────────────
     .btn ของ Bootstrap ครอบปุ่มส่วนใหญ่อยู่แล้ว  ที่เหลือคือคลาสปุ่มเฉพาะกิจ
     ที่แต่ละระบบตั้งชื่อเอง (สำรวจจากไฟล์จริงทั้งเว็บ ๑๗๔ ชื่อ คัดออกเฉพาะ
     ตัวที่ตั้งใจกลมเป็นวง/เป็นสวิตช์/เป็นปุ่มสามมิติของหน้าเกม) */
  html body .btn.btn,
  html body input[type="submit"],
  html body input[type="button"],
  html body input[type="reset"],
  html body .button,
  html body .action-button,
  html body .redirect-button,
  html body .submit-btn,
  html body .login-btn,
  html body .logout-btn,
  html body .btn-back,
  html body .btn-back-link,
  html body .btn-reset,
  html body .btn-reset-filters,
  html body .btn-filter,
  html body .bk-filter-btn,
  html body .btn-clear,
  html body .btn-search,
  html body .btn-add,
  html body .btn-save,
  html body .bk-btn-save,
  html body .btn-edit,
  html body .btn-del,
  html body .bk-btn-del,
  html body .bk-btn-no,
  html body .btn-ddc-del,
  html body .btn-ddc-cancel,
  html body .btn-rm,
  html body .btn-act,
  html body .btn-action,
  html body .btn-go,
  html body .btn-start,
  html body .btn-stop,
  html body .btn-loop,
  html body .btn-sync,
  html body .btn-fetch,
  html body .btn-import,
  html body .btn-export,
  html body .btn-export-pdf,
  html body .btn-exp,
  html body .export-btn,
  html body .btn-print,
  html body .print-btn,
  html body .btn-template,
  html body .btn-process,
  html body .btn-detail,
  html body .btn-detail2,
  html body .btn-detail3,
  html body .btn-ci,
  html body .btn-view,
  html body .btn-view-file,
  html body .view-btn,
  html body .btn-full-view,
  html body .btn-minimal-download,
  html body .download-btn,
  html body .dl-btn,
  html body .dl-card-btn,
  html body .del-btn,
  html body .remove-btn,
  html body .fu-remove-btn,
  html body .btn-select-files,
  html body .btn-upload,
  html body .load-more-btn,
  html body .btn-reject,
  html body .btn-system,
  html body .btn-hamburger,
  html body .button-menu-mobile,
  html body .btn-close,
  html body .lonyo-default-btn,
  html body .main-menu-two__btn,
  html body .btn-icon,
  html body .icon-btn,
  html body .bk-btn-icon,
  html body .btn-topbar,
  html body .btn-export-img,
  html body .btn-logout-navbar-direct,
  html body .btn-home-navbar-direct,
  html body .add-row-btn,
  html body .btn-check-mname,
  html body .cancel-badge-btn,
  html body .btn-99,
  html body .btn-p1,
  html body .btn-p2,
  html body .btn-dbg,
  html body .btn-pp,
  html body .btn-pp-outline,
  html body .btn-vd-add,
  html body .btn-vd-rd,
  html body .btn-navy,
  html body .btn-gov,
  html body .btn-out,
  html body .btn-outline-secondary-custom,
  html body [class*="btn-float"],
  html body .btn-flo,
  html body .tt-btn,
  html body .tab-btn,
  html body .m-btn,
  html body .ldb-btn,
  html body .modern-btn,
  html body .modern-login-btn,
  html body .modern-profile-btn,
  html body .rp-emoji-btn,
  html body .rp-submit-btn,
  html body .sort-btn,
  html body .chart-btn,
  html body .dt-button,
  html body .pg-btn,
  html body .pager-btn,
  html body .page-btn,
  html body .dc-page-btn,
  html body .dc-btn-dl,
  html body .dc-btn-view,
  html body .adm-btn-back,
  html body .adm-btn-logout,
  html body .docv-line-copybtn,
  html body .pdfi-btn,
  html body .pdfi-btn-rm,
  html body .pdfi-missing-egpbtn,
  html body .preset-btn,
  html body .range-btn,
  html body .auc-attach-btn,
  html body .post-line-btn,
  html body .yt-btn,
  html body .osl-btn,
  html body .ofs-btn,
  html body .pwm-btn,
  html body .pfm-btn,
  html body .hero-btn,
  html body .cta-band-btn,
  html body .df-qbtn,
  html body .link-btn,
  html body .hd-back,
  html body .hd-logout,
  html body .btn-login,
  html body .btn-primary,
  html body .btn-secondary,
  html body .btn-success,
  html body .btn-danger,
  html body .btn-cancel-modal,
  html body .modal-x,
  html body .modal-close,
  html body .modal-close-btn,
  html body .skr1-modal-x,
  html body .btn-modal-approve,
  html body .btn-modal-reject,
  html body .btn-modal-cancel,
  html body .btn-modal-update,
  html body .btn-modal-save,
  html body .btn-print-modal,
  html body .btn-modal-close,
  html body .bk-modal-close {
    border-radius: var(--ddc-radius-ctl) !important;
  }

  /* กลุ่มปุ่มติดกัน (.btn-group) ต้องโค้งแค่หัวกับท้าย ไม่งั้นปุ่มกลางจะโค้ง
     ซ้อนเส้นขอบของเพื่อนบ้าน กลายเป็นรอยหยักตรงรอยต่อ */
  html body .btn-group > .btn.btn:not(:first-child):not(:last-child),
  html body .btn-group-vertical > .btn.btn:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
  }

  html body .btn-group > .btn.btn:first-child:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  html body .btn-group > .btn.btn:last-child:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  html body .btn-group-vertical > .btn.btn:first-child:not(:last-child) {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  html body .btn-group-vertical > .btn.btn:last-child:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  /* ── ๔. ช่องกรอกที่ต่อกับปุ่ม/ป้าย (.input-group ของ Bootstrap 4/5) ─────
     ตัวห่อไม่ต้องโค้ง แต่ลูกตัวแรก/ตัวท้ายต้องโค้งด้านนอกและตัดด้านในให้เรียบ */
  html body .input-group > .form-control:not(:last-child),
  html body .input-group > .custom-select:not(:last-child),
  html body .input-group > .form-select:not(:last-child),
  html body .input-group > .input-group-prepend > .btn,
  html body .input-group > .input-group-prepend > .input-group-text,
  html body .input-group-prepend > .btn:not(:last-child),
  html body .input-group-prepend > .input-group-text:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  html body .input-group > .form-control:not(:first-child),
  html body .input-group > .custom-select:not(:first-child),
  html body .input-group > .form-select:not(:first-child),
  html body .input-group > .input-group-append > .btn,
  html body .input-group > .input-group-append > .input-group-text,
  html body .input-group-append > .btn:not(:first-child),
  html body .input-group-append > .input-group-text:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  /* ป้าย/ปุ่มหัวท้ายของ input-group ให้โค้งด้านนอกเท่าโทเคน */
  html body .input-group > .input-group-prepend:first-child > .btn,
  html body .input-group > .input-group-prepend:first-child > .input-group-text,
  html body .input-group-prepend:first-child > .btn:first-child,
  html body .input-group-prepend:first-child > .input-group-text:first-child {
    border-top-left-radius: var(--ddc-radius-ctl) !important;
    border-bottom-left-radius: var(--ddc-radius-ctl) !important;
  }

  html body .input-group > .input-group-append:last-child > .btn,
  html body .input-group > .input-group-append:last-child > .input-group-text,
  html body .input-group-append:last-child > .btn:last-child,
  html body .input-group-append:last-child > .input-group-text:last-child {
    border-top-right-radius: var(--ddc-radius-ctl) !important;
    border-bottom-right-radius: var(--ddc-radius-ctl) !important;
  }

  /* ── ๕. การ์ด ───────────────────────────────────────────────────────────
     .card ของ Bootstrap + ชื่อการ์ดเฉพาะกิจของแต่ละระบบ (สำรวจได้ ๙๐ ชื่อ
     คัดออกเฉพาะไอคอน/ป้าย/โครงกระดูก skeleton/progress) */
  html body .card.card,
  html body .card2,
  html body .card3,
  html body .card7,
  html body .card7-desc,
  html body .card-client,
  html body .card-contract,
  html body .card-po,
  html body .card-agreement,
  html body .custom-card,
  html body .modern-card,
  html body .content-card,
  html body .header-card,
  html body .filter-card,
  html body .search-card,
  html body .table-card,
  html body .list-card,
  html body .stat-card,
  html body .stats-card,
  html body .ddc-stat-card,
  html body .sum-card,
  html body .success-card,
  html body .bc-card,
  html body .visitor-card,
  html body .qw-status-card,
  html body .budget-card,
  html body .bud-card,
  html body .metric-card,
  html body .kpi-card,
  html body .pp-card,
  html body .tcard,
  html body .tcard-right,
  html body .tcard-ft,
  html body .tcard-ic,
  html body .mcard,
  html body .scard,
  html body .file-card,
  html body .file-card-item,
  html body .minimal-doc-card,
  html body .folder-card,
  html body .move-book-cards,
  html body .holiday-card,
  html body .asset-type-card,
  html body .auc-dt-card,
  html body .export-card,
  html body .import-card,
  html body .upload-card,
  html body .dl-card,
  html body .detection-card,
  html body .highlight-card,
  html body .result-card,
  html body .award-card,
  html body .dept-card,
  html body .service-card,
  html body .hc-card,
  html body .osl-card,
  html body .vts-card,
  html body .pdfi-card,
  html body .btn-type-card,
  html body .modal-info-card {
    border-radius: var(--ddc-radius) !important;
  }

  /* ── ๕/๒. แผงเนื้อหาที่ "อ่านว่าเป็นการ์ด" แต่ไม่ได้ชื่อ card ──────────────
     คัดจากไฟล์จริงทั้งเว็บ: กฎที่ตั้ง border-radius 10–32px และมีพื้น/เงา/
     เส้นขอบ + มี padding (คือเป็นกล่องเนื้อหาจริง ไม่ใช่ป้ายหรือไอคอน)
     ได้ ๑๗๓ คลาส — นี่คือกลุ่มที่ทำให้ "การ์ดในระบบเดียวกันโค้งไม่เท่ากัน"
     เพราะแต่ละหน้าตั้งค่าเองอิสระ ตั้งแต่ 10px ถึง 32px
     (ตัดออกแล้ว: ป้าย ตัวนับ แถบ progress สวิตช์ ไอคอน ปุ่มปิด รูปภาพ) */
  html body .alert.alert,
  html body .alert-custom,
  html body .alert-info,
  html body .adm-menu-pop,
  html body .adm-nav-item,
  html body .adm-nav-submenu,
  html body .asset-table,
  html body .asset-type-grid,
  html body .bc-summary-bar,
  html body .clock-wrap,
  html body .container,
  html body .dc-sidebar,
  html body .df-bar,
  html body .ext-databasic,
  html body .filter-bar,
  html body .form-group,
  html body .hd-user,
  html body .header,
  html body .hero-search,
  html body .loading,
  html body .map,
  html body .nav-item,
  html body .page,
  html body .page-header,
  html body .pagination,
  html body .pp-context-bar,
  html body .save-bar,
  html body .today-alert-bar,
  html body .top,
  html body .auc-section,
  html body .authapp,
  html body .autohint,
  html body .bk-stat,
  html body .bk-upload-zone,
  html body .block,
  html body .book-style,
  html body .box,
  html body .branch-section,
  html body .bt-cancel,
  html body .bt-comment,
  html body .bud-alert,
  html body .bud-year-breakdown,
  html body .budget-tab-link,
  html body .budget-table-container,
  html body .calculation-step,
  html body .cancel-notice,
  html body .closed-banner,
  html body .container-login,
  html body .cta-band-inner,
  html body .current-step-name,
  html body .data-table,
  html body .datatable-modern,
  html body .dataTables_filter,
  html body .dc-hero,
  html body .deadline-alert,
  html body .delivery-section,
  html body .delivery-section2,
  html body .dept-choice,
  html body .description-box,
  html body .detail-note,
  html body .detail-section,
  html body .docv-line-bubble,
  html body .docv-line-chatmock,
  html body .download-item,
  html body .drop-zone,
  html body .ds-kpi,
  html body .eft,
  html body .egp-header,
  html body .empty-state,
  html body .employee-info,
  html body .f-file,
  html body .f-status-opt,
  html body .f-ta,
  html body .fg,
  html body .fgrp,
  html body .file-upload-container,
  html body .file-upload-label,
  html body .file-zone,
  html body .filter-container,
  html body .filter-control,
  html body .footer-box,
  html body .footer-visitors,
  html body .footer-widget-two__support,
  html body .form-section,
  html body .formula,
  html body .fu-dropzone,
  html body .glass,
  html body .gov-op-link,
  html body .hdr-menu-pop,
  html body .header-year,
  html body .history-section,
  html body .howto,
  html body .hv-float,
  html body .hv-window,
  html body .info-table,
  html body .integration-notice,
  html body .item-row,
  html body .lifespan,
  html body .likert,
  html body .litem,
  html body .log-box,
  html body .log-count,
  html body .logs-table,
  html body .login-container,
  html body .manual,
  html body .mc,
  html body .mini-stat,
  html body .modern-record-count,
  html body .money-type-tabs,
  html body .ms-advice,
  html body .my-status,
  html body .nav-tabs,
  html body .new-req-link,
  html body .notification-content,
  html body .osl-no-data,
  html body .pdf-download-link,
  html body .pdfi-cnt,
  html body .pdfi-mo,
  html body .pfm-dialog,
  html body .pfm-ro,
  html body .podium-budget,
  html body .pp-tabgroup,
  html body .pwm-dialog,
  html body .qblock,
  html body .qr,
  html body .qw-status-noproc,
  html body .qw-status-placeholder,
  html body .rating-panel,
  html body .record-count,
  html body .report-filters,
  html body .report-tbl-wrap,
  html body .rp-stats-block,
  html body .sch-countdown,
  html body .search,
  html body .search-box,
  html body .search-control,
  html body .search-hero,
  html body .search-toast,
  html body .sec-timeout-pop,
  html body .section,
  html body .section-center,
  html body .section-title,
  html body .setup-notice,
  html body .skr1-toast,
  html body .st,
  html body .stat,
  html body .stat-box,
  html body .stat-budget-active,
  html body .stat-item,
  html body .stats,
  html body .status-item,
  html body .status-list,
  html body .stp-bd,
  html body .stp-form,
  html body .stp-warn-note,
  html body .success-message,
  html body .sum-hero,
  html body .summary-box,
  html body .summary-item,
  html body .sync-history,
  html body .tab-cnt,
  html body .table-container,
  html body .table-modern,
  html body .table-report,
  html body .tb-back,
  html body .tdp-panel,
  html body .tf-file-lb,
  html body .tfs-add,
  html body .tfs-file,
  html body .tfs-name,
  html body .tfs-note,
  html body .tl-note,
  html body .tmsg,
  html body .toast-msg,
  html body .unit-item,
  html body .upload-container,
  html body .user-info,
  html body .user-profile,
  html body .vd-page-header,
  html body .vendor-item,
  html body .vendor-rating-container,
  html body .warn,
  html body .year-highlight,
  html body .zoom-info {
    border-radius: var(--ddc-radius) !important;
  }

  /* หัวการ์ด/ท้ายการ์ด — โค้งเฉพาะด้านที่ติดขอบ ไม่งั้นพื้นสีของหัวการ์ดจะล้น
     ออกนอกมุมของการ์ด (Bootstrap เดิมใช้ calc(.25rem - 1px) ซึ่งไม่ตรงกับโทเคน) */
  html body .card > .card-header:first-child,
  html body .card-header.card-header,
  html body .card-header-modern,
  html body .card-header-custom {
    border-top-left-radius: var(--ddc-radius) !important;
    border-top-right-radius: var(--ddc-radius) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  html body .card > .card-footer:last-child,
  html body .card-footer.card-footer {
    border-bottom-left-radius: var(--ddc-radius) !important;
    border-bottom-right-radius: var(--ddc-radius) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  html body .card-img-top {
    border-top-left-radius: var(--ddc-radius) !important;
    border-top-right-radius: var(--ddc-radius) !important;
  }

  html body .card-img-bottom {
    border-bottom-left-radius: var(--ddc-radius) !important;
    border-bottom-right-radius: var(--ddc-radius) !important;
  }

  /* ── ๖. กล่องซ้อน (modal) ───────────────────────────────────────────────
     ระวัง: ddc-pic ใช้ .modal เป็น "ตัวกล่อง" (มีพื้นขาว) ไม่ใช่ฉากหลังแบบ
     Bootstrap  ส่วน .modal ของ Bootstrap โปร่งใสเต็มจอ ใส่ radius ไปก็ไม่เห็นผล
     จึงใส่ได้ทั้งคู่โดยไม่ต้องแยกระบบ */
  html body .modal-content.modal-content,
  html body .modal.modal,
  html body .modal-dialog,
  html body .modalDialog,
  html body .modal-box,
  html body .modal-detail,
  html body .modal-export,
  html body .modal-tabs,
  html body .bud-modal,
  html body .bk-modal,
  html body .user-popup,
  html body .skr1-modal-box,
  html body .skr1-modal-tabs,
  html body .skr1-modal-tab {
    border-radius: var(--ddc-radius) !important;
  }

  /* เมนูดรอปดาวน์เกาะอยู่กับปุ่ม/ช่องเลือก จึงใช้ค่าเดียวกับตัวควบคุม
     ไม่ใช่ค่าของการ์ด (ถ้าโค้ง 16px จะดูลอยหลุดจากปุ่มที่โค้ง 8px) */
  html body .dropdown-menu,
  html body .custom-dropdown {
    border-radius: var(--ddc-radius-ctl) !important;
  }

  html body .modal-content > .modal-header:first-child,
  html body .modal-header.modal-header,
  html body .skr1-modal-head {
    border-top-left-radius: var(--ddc-radius) !important;
    border-top-right-radius: var(--ddc-radius) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  html body .modal-content > .modal-footer:last-child,
  html body .modal-footer.modal-footer {
    border-bottom-left-radius: var(--ddc-radius) !important;
    border-bottom-right-radius: var(--ddc-radius) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  /* ── ๗. SweetAlert2 (v11 จาก CDN — ใช้ ๒๐๐ กว่าหน้า) ───────────────────
     กฎเดิมของแต่ละหน้ากำหนดมุมโค้งของ popup เองด้วย !important รวม ๆ กัน
     ๘ จุดขึ้นไป (12px / 16px / 20px) และปุ่มยืนยัน-ยกเลิกอีกหลายจุด (6px / 8px)
     คลาสซ้ำสองครั้ง (0,2,2) จึงจำเป็นเพื่อชนะแบบ .ua2fa-pop .swal2-confirm (0,2,0) */
  html body .swal2-popup.swal2-popup,
  html body .swal2-modal.swal2-modal,
  html body .swal2-toast.swal2-toast {
    border-radius: var(--ddc-radius) !important;
  }

  html body .swal2-styled.swal2-styled,
  html body .swal2-confirm.swal2-confirm,
  html body .swal2-deny.swal2-deny,
  html body .swal2-cancel.swal2-cancel,
  html body .swal2-input.swal2-input,
  html body .swal2-file.swal2-file,
  html body .swal2-select.swal2-select,
  html body .swal2-textarea.swal2-textarea {
    border-radius: var(--ddc-radius-ctl) !important;
  }

  /* SweetAlert รุ่น ๑ (sweetalert-dev.js 1.1.3) ยังถูกโหลดอยู่ ๑๐๑ หน้า
     DOM คนละชุดกับ v11 ทั้งหมด จึงต้องเขียนแยก */
  html body .sweet-alert.sweet-alert {
    border-radius: var(--ddc-radius) !important;
  }

  html body .sweet-alert button.confirm,
  html body .sweet-alert button.cancel,
  html body .sweet-alert input {
    border-radius: var(--ddc-radius-ctl) !important;
  }

  /* ── ๘. ปะที่ต้องตามแก้หลังเปลี่ยนโทเคน ────────────────────────────────
     ddc-pic วาดแถบสีบาง ๆ ทับที่ก้นการ์ดสถิติด้วย ::after ที่จำค่า
     var(--radius-lg) = 13px ไว้เอง  ถ้าไม่ตามแก้ มุมล่างของแถบจะโค้ง 13px
     ขณะที่ตัวการ์ดโค้งตามโทเคน แล้วเห็นเป็นเงาเหลื่อมออกมา */
  html body .stat-card::after {
    border-radius: 0 0 var(--ddc-radius) var(--ddc-radius) !important;
  }

  /* ══ ๙. ขนาดปุ่ม ══════════════════════════════════════════════════════════
     ปุ่มทั้งเว็บมีสามขั้นเท่านั้น: ปกติ / .btn-sm / .btn-lg

     ทำไมไม่ตรึง height
       ความสูงเกิดจาก padding + line-height => ปุ่มทุกใบที่มีข้อความบรรทัดเดียว
       สูงเท่ากันเองโดยไม่ต้องบังคับ  ปุ่มสองบรรทัดก็ยังขยายได้ไม่ถูกบีบ
       แต่ต้องมี `height: auto` เพื่อล้างความสูงที่ตรึงไว้ในกฎเดิม
       (พบตั้งแต่ 26px ถึง 72px) ไม่งั้นค่าเดิมจะชนะ padding ใหม่

     ทำไมไม่แตะ display
       responsive.css เคยพังเพราะเหมารวม display:inline-flex ให้ button/
       [role=button] แล้วการ์ดที่ใส่ role="button" ยุบทั้งใบ  ไฟล์นี้จึงไม่
       เปลี่ยน display เลย ปุ่มที่เป็น flex อยู่แล้วก็ยังจัดกลางของตัวเองได้

     ไม่รวมปุ่มปิด/ปุ่มลบไอคอนเดี่ยว (.modal-x .modal-close .skr1-modal-x
     .btn-rm .pdfi-btn-rm .fu-remove-btn .remove-btn .btn-hamburger)
     เพราะเป็นสี่เหลี่ยมจัตุรัส ถ้าอัด padding แนวนอน 16px จะยืดเป็นแท่ง       */
  html body .btn.btn,
  html body input[type="submit"],
  html body input[type="button"],
  html body input[type="reset"],
  html body .button,
  html body .action-button,
  html body .redirect-button,
  html body .submit-btn,
  html body .login-btn,
  html body .logout-btn,
  html body .btn-back,
  html body .btn-back-link,
  html body .btn-reset,
  html body .btn-reset-filters,
  html body .btn-filter,
  html body .bk-filter-btn,
  html body .btn-clear,
  html body .btn-search,
  html body .btn-add,
  html body .btn-save,
  html body .bk-btn-save,
  html body .btn-edit,
  html body .btn-del,
  html body .bk-btn-del,
  html body .bk-btn-no,
  html body .btn-ddc-del,
  html body .btn-ddc-cancel,
  html body .btn-act,
  html body .btn-action,
  html body .btn-go,
  html body .btn-start,
  html body .btn-stop,
  html body .btn-loop,
  html body .btn-sync,
  html body .btn-fetch,
  html body .btn-import,
  html body .btn-export,
  html body .btn-export-pdf,
  html body .btn-exp,
  html body .export-btn,
  html body .btn-print,
  html body .print-btn,
  html body .btn-template,
  html body .btn-process,
  html body .btn-detail,
  html body .btn-detail2,
  html body .btn-detail3,
  html body .btn-ci,
  html body .btn-view,
  html body .btn-view-file,
  html body .view-btn,
  html body .btn-full-view,
  html body .btn-minimal-download,
  html body .download-btn,
  html body .dl-btn,
  html body .dl-card-btn,
  html body .del-btn,
  html body .btn-select-files,
  html body .btn-upload,
  html body .load-more-btn,
  html body .btn-reject,
  html body .btn-system,
  html body .btn-topbar,
  html body .btn-export-img,
  html body .btn-logout-navbar-direct,
  html body .btn-home-navbar-direct,
  html body .add-row-btn,
  html body .btn-check-mname,
  html body .lonyo-default-btn,
  html body .main-menu-two__btn,
  html body .btn-99,
  html body .btn-p1,
  html body .btn-p2,
  html body .btn-pp,
  html body .btn-pp-outline,
  html body .btn-vd-add,
  html body .btn-vd-rd,
  html body .btn-navy,
  html body .btn-gov,
  html body .btn-out,
  html body .btn-outline-secondary-custom,
  html body [class*="btn-float"],
  html body .btn-flo,
  html body .tt-btn,
  html body .tab-btn,
  html body .m-btn,
  html body .ldb-btn,
  html body .modern-btn,
  html body .modern-login-btn,
  html body .modern-profile-btn,
  html body .rp-submit-btn,
  html body .sort-btn,
  html body .chart-btn,
  html body .dt-button,
  html body .pg-btn,
  html body .pager-btn,
  html body .page-btn,
  html body .dc-page-btn,
  html body .dc-btn-dl,
  html body .dc-btn-view,
  html body .adm-btn-back,
  html body .adm-btn-logout,
  html body .pdfi-btn,
  html body .pdfi-missing-egpbtn,
  html body .preset-btn,
  html body .range-btn,
  html body .auc-attach-btn,
  html body .post-line-btn,
  html body .yt-btn,
  html body .osl-btn,
  html body .ofs-btn,
  html body .pwm-btn,
  html body .pfm-btn,
  html body .hero-btn,
  html body .cta-band-btn,
  html body .df-qbtn,
  html body .link-btn,
  html body .hd-back,
  html body .hd-logout,
  html body .btn-login,
  html body .btn-primary,
  html body .btn-secondary,
  html body .btn-success,
  html body .btn-danger,
  html body .btn-cancel-modal,
  html body .btn-modal-approve,
  html body .btn-modal-reject,
  html body .btn-modal-cancel,
  html body .btn-modal-update,
  html body .btn-modal-save,
  html body .btn-print-modal,
  html body .btn-modal-close,
  html body .swal2-styled.swal2-styled {
    height: auto !important;
    min-height: var(--ddc-ctl-h) !important;
    padding: var(--ddc-btn-py) var(--ddc-btn-px) !important;
    font-size: var(--ddc-btn-fs) !important;
    line-height: 1.4 !important;
    gap: var(--ddc-btn-gap);
  }

  /* ปุ่มที่มีไอคอนตัวเดียวไม่มีข้อความ -> บีบให้เป็นจัตุรัส ไม่ยืดเป็นแท่ง
     (:has() รองรับในเบราว์เซอร์ปัจจุบันทุกตัว ถ้าตัวเก่าไม่รู้จักก็เพียงข้ามกฎนี้
     ปุ่มจะกว้างกว่าเดิมเล็กน้อยเท่านั้น ไม่พัง) */
  html body .btn.btn:has(> i:only-child),
  html body .btn.btn:has(> svg:only-child) {
    padding-left: var(--ddc-btn-py) !important;
    padding-right: var(--ddc-btn-py) !important;
  }

  /* ขั้นเล็ก — ต้องอยู่ "หลัง" กฎขั้นปกติ เพราะ specificity เท่ากัน (0,2,2)
     ผู้ชนะจึงตัดสินด้วยลำดับในไฟล์ */
  html body .btn-sm.btn-sm,
  html body .btn-xs.btn-xs,
  html body .btn-sm-app,
  html body .pdfi-btn-sm {
    min-height: var(--ddc-btn-sm-h) !important;
    padding: var(--ddc-btn-sm-py) var(--ddc-btn-sm-px) !important;
    font-size: var(--ddc-btn-sm-fs) !important;
  }

  /* ขั้นใหญ่ */
  html body .btn-lg.btn-lg,
  html body .btn-submit {
    min-height: var(--ddc-btn-lg-h) !important;
    padding: var(--ddc-btn-lg-py) var(--ddc-btn-lg-px) !important;
    font-size: var(--ddc-btn-lg-fs) !important;
  }
}
