/* ==========================================================================
   csp-utilities.css
   --------------------------------------------------------------------------
   utility class ที่สร้างขึ้นเพื่อแทน style="..." attribute ทั้งหมดในหน้าเว็บ

   ทำไมต้องมีไฟล์นี้
   : Content-Security-Policy ของเว็บถอด 'unsafe-inline' ออกจาก style-src แล้ว
     style="..." attribute ที่ฝังใน markup จึงถูกเบราว์เซอร์บล็อกทั้งหมด
     (nonce ครอบเฉพาะ <style> element ครอบ attribute ไม่ได้)

   กติกาในการแก้ไขไฟล์นี้
   - ใช้ !important กับ utility ที่เป็นเรื่องหน้าตาอย่างเดียว เพื่อให้ผลลัพธ์
     เท่ากับ inline style เดิมที่ชนะ selector อื่นอยู่แล้ว
   - ห้ามใส่ !important กับกลุ่ม display / visibility เพราะ jQuery .show() / .hide()
     ทำงานด้วยการเขียน inline style ถ้าใส่ !important ปุ่มเปิดปิดจะพังทั้งเว็บ
   - ต้อง include ไฟล์นี้ "หลัง" css อื่นทุกไฟล์ เพื่อให้ชนะกรณี specificity เท่ากัน
   ========================================================================== */

/* --------------------------------------------------------------------------
   display / visibility

   ห้ามใส่ !important กลุ่มนี้ เพราะ jQuery .show() / .hide() / .toggle()
   ทำงานด้วยการเขียน inline style ถ้าใส่ !important ปุ่มเปิดปิดจะพังทั้งเว็บ

   แต่เดิม style="display:none" เป็น inline จึงชนะ selector ทุกตัวในไฟล์ css
   พอย้ายมาเป็น class ธรรมดา (specificity 0,1,0) จะเสี่ยงแพ้ rule เดิมที่กำหนด
   display ทับ จึงเขียนเป็น [class].u-hide ให้ specificity เป็น 0,2,0
   ยังคงแพ้ inline style ที่ jQuery เขียนลงไป การ .show() จึงทำงานตามปกติ
   -------------------------------------------------------------------------- */
[class].u-hide { display: none; }
[class].u-d-block { display: block; }
[class].u-d-inherit { display: inherit; }
[class].u-vis-collapse { visibility: collapse; }

/* --------------------------------------------------------------------------
   text-align
   -------------------------------------------------------------------------- */
.u-ta-left { text-align: left !important; }
.u-ta-center { text-align: center !important; }
.u-ta-right { text-align: right !important; }

/* --------------------------------------------------------------------------
   width / height
   -------------------------------------------------------------------------- */
.u-w-100 { width: 100% !important; }
.u-w-60 { width: 60% !important; }
.u-w-50 { width: 50% !important; }
.u-w-40 { width: 40% !important; }
.u-w-30 { width: 30% !important; }
.u-w-25 { width: 25% !important; }
.u-w-20 { width: 20% !important; }
.u-w-15 { width: 15% !important; }
.u-w-40px { width: 40px !important; }
.u-h-50 { height: 50px !important; }
.u-h-55 { height: 55px !important; }

/* --------------------------------------------------------------------------
   margin
   -------------------------------------------------------------------------- */
.u-m-auto { margin: auto !important; }
.u-mt-10 { margin-top: 10px !important; }
.u-mt-15 { margin-top: 15px !important; }
.u-mt-30 { margin-top: 30px !important; }
.u-mt-50 { margin-top: 50px !important; }
.u-mt-60 { margin-top: 60px !important; }
.u-mb-5p { margin-bottom: 5% !important; }
.u-mb-16 { margin-bottom: 16px !important; }
.u-mb-60 { margin-bottom: 60px !important; }
.u-mb-90 { margin-bottom: 90px !important; }
.u-mb-n10 { margin-bottom: -10px !important; }

/* --------------------------------------------------------------------------
   padding
   -------------------------------------------------------------------------- */
.u-p-0 { padding: 0 !important; }
.u-pl-0 { padding-left: 0 !important; }
.u-pt-20 { padding-top: 20px !important; }
.u-p-15-0 { padding: 15px 0 !important; }
.u-p-btn-sm { padding: 0.65rem 1rem !important; }
.u-p-hero { padding: 4rem 1.3rem 0 2rem !important; }

/* --------------------------------------------------------------------------
   font
   -------------------------------------------------------------------------- */
.u-fw-400 { font-weight: 400 !important; }
.u-fw-500 { font-weight: 500 !important; }
.u-fs-15 { font-size: 15px !important; }
.u-fs-18 { font-size: 18px !important; }

/* --------------------------------------------------------------------------
   color
   -------------------------------------------------------------------------- */
.u-color-black { color: #000 !important; }
.u-color-white { color: #fff !important; }
.u-color-red { color: red !important; }
.u-color-orange { color: #ff9000 !important; }
.u-color-white-fs18 { color: #fff !important; font-size: 18px !important; }
.u-color-dark-fs30 { color: #171717 !important; font-size: 30px !important; }

/* --------------------------------------------------------------------------
   border
   -------------------------------------------------------------------------- */
.u-border-0 { border: 0 !important; }
.u-bt-0 { border-top: 0 !important; }
.u-radius-md { border-radius: var(--border-radius-medium) !important; }
.u-bb-gray { border-bottom: 4px solid #54595f !important; }
.u-bb-navy { border-bottom: 4px solid #0c456e !important; }
.u-bb-blue-dark {
    border-bottom: 4px solid #056fb8 !important;
    background-color: #000 !important;
    color: #ffff !important;
}

/* --------------------------------------------------------------------------
   layout เบ็ดเตล็ด
   -------------------------------------------------------------------------- */
.u-float-right { float: right !important; }
.u-cursor-pointer { cursor: pointer !important; }
.u-lh-1 { line-height: 1 !important; }
.u-float-right-mt20-fs20 {
    float: right !important;
    margin-top: 20px !important;
    font-size: 20px !important;
}

/* --------------------------------------------------------------------------
   background image
   path เขียนแบบ relative จากตำแหน่งไฟล์ css นี้ (/css/ -> ../images/)
   ห้ามใช้ /Listed/ALPHAX/... เพราะ virtual path บน DEV กับ Production ไม่เหมือนกัน
   -------------------------------------------------------------------------- */
.u-bg-banner-ir { background-image: url(../images/banner_ir.jpg) !important; }
.u-bg-overview-1 { background-image: url(../images/img_overview_1.png) !important; }
.u-bg-overview-2 { background-image: url(../images/img_overview_2.png) !important; }
.u-bg-contact { background-image: url(../images/bg_contact.jpg) !important; }
.u-bg-chairman { background-image: url(../images/bg-chaman.png) !important; }
.u-bg-f9 { background-color: #f9f9f9 !important; }

/* --------------------------------------------------------------------------
   icon ขนาดคงที่
   -------------------------------------------------------------------------- */
.u-icon-30 { width: 30px !important; height: 30px !important; }
.u-icon-40 { width: 40px !important; height: 40px !important; }
.u-icon-30-mr {
    width: 30px !important;
    height: 30px !important;
    margin-right: 1.5rem !important;
}
.u-icon-30-fit {
    width: 30px !important;
    height: fit-content !important;
    margin-right: 1.5rem !important;
}
.u-flag-icon {
    width: 38px !important;
    height: 18px !important;
    margin-top: 5px !important;
    margin-right: 5px !important;
}

/* --------------------------------------------------------------------------
   กล่องกราฟ / วิดเจ็ตราคาหุ้น
   -------------------------------------------------------------------------- */
.u-chart-box {
    width: 100% !important;
    height: 400px !important;
    padding: 30px !important;
    position: relative !important;
    user-select: none !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
.u-chart-468-rel {
    position: relative !important;
    width: 468px !important;
    height: 340px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-width: 0 !important;
}
.u-chart-468-abs {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 468px !important;
    height: 340px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-width: 0 !important;
    user-select: none !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
.u-w100-h230 { width: 100% !important; height: 230px !important; }

/* --------------------------------------------------------------------------
   ตาราง / เซลล์
   -------------------------------------------------------------------------- */
.u-th-20 {
    width: 20% !important;
    font-weight: 500 !important;
    text-align: left !important;
}
.u-th-60 { width: 60% !important; font-weight: 500 !important; }
.u-w-40p-center { width: 40% !important; text-align: center !important; }
.u-w-25p-center { width: 25% !important; text-align: center !important; }
.u-w-20p-center { width: 20% !important; text-align: center !important; }
.u-w-15p-center { width: 15% !important; text-align: center !important; }
.u-cell-right-50 {
    text-align: right !important;
    font-size: 16px !important;
    line-height: 50px !important;
}
.u-cell-right-57 {
    text-align: right !important;
    font-size: 16px !important;
    line-height: 57px !important;
}
.u-label-120 {
    width: 120px !important;
    float: left !important;
    font-size: 18px !important;
}
.u-w-100px-mt10 { width: 100px !important; margin-top: 10px !important; }

/* --------------------------------------------------------------------------
   การ์ด / ปุ่มดาวน์โหลดเอกสาร
   -------------------------------------------------------------------------- */
.u-btn-doc {
    color: #000 !important;
    border-radius: 10px !important;
    margin-bottom: 0.2em !important;
}
.u-btn-doc-auto {
    color: #000 !important;
    border-radius: 10px !important;
    height: auto !important;
    font-size: 20px !important;
    font-family: 'FC Minimal' !important;
}
.u-btn-doc-150 {
    color: #000 !important;
    border-radius: 10px !important;
    height: auto !important;
    width: 150px !important;
    font-size: 20px !important;
    font-family: 'FC Minimal' !important;
}
.u-card-head-dark {
    background-color: #2d2d2d !important;
    margin: 0 !important;
    border-radius: 5px 5px 0 0 !important;
    color: #fff !important;
    height: 50px !important;
}
.u-card-foot-gray {
    background-color: #8d8d8d !important;
    margin: 0 !important;
    border-radius: 0 0 5px 5px !important;
    color: #fff !important;
    font-size: 12px !important;
    height: 60px !important;
}
.u-box-gray-round {
    background-color: #f0f0f0 !important;
    border-radius: 5px !important;
    padding-bottom: 25px !important;
    margin-bottom: 50px !important;
}
.u-box-round-half {
    width: 100% !important;
    border-radius: 5px !important;
    padding: 0.5% !important;
}

/* --------------------------------------------------------------------------
   custom property --color ที่เดิมถูกกำหนดผ่าน inline style
   ใช้กับ component ที่อ่านค่า var(--color) ไปทำสีของตัวเอง
   -------------------------------------------------------------------------- */
.u-cvar-39caff { --color: #39CAFF; }
.u-cvar-161a19 { --color: #161A19; }
.u-cvar-515161 { --color: #515161; }
.u-cvar-888 { --color: #888; }
.u-cvar-a3a4a6 { --color: #A3A4A6; }
.u-cvar-ddd { --color: #DDD; }