@charset "UTF-8";

/**
 * MKT HIP Security - Global Typography
 * File: /assets/css/style.css
 * ฟอนต์หลักทั้งเว็บไซต์: Noto Sans Thai
 */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600&display=swap");

:root {
    --mkt-font-family: "Noto Sans Thai", Tahoma, Arial, sans-serif;
    --mkt-font-weight-regular: 400;
    --mkt-font-weight-medium: 500;
    --mkt-font-weight-semibold: 600;
    --mkt-line-height: 1.70;
    --mkt-text-color: #333333;
}

html {
    font-family: var(--mkt-font-family);
    font-size: 16px;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    color: var(--mkt-text-color);
    font-family: var(--mkt-font-family) !important;
    font-size: 15px;
    font-weight: var(--mkt-font-weight-regular);
    line-height: var(--mkt-line-height);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
body *,
button,
input,
select,
textarea,
option,
optgroup,
table,
thead,
tbody,
tfoot,
tr,
th,
td,
label,
fieldset,
legend,
a,
p,
span,
small,
strong,
b,
em,
div,
section,
article,
aside,
nav,
header,
footer,
main,
form,
ul,
ol,
li,
dl,
dt,
dd,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--mkt-font-family) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: inherit;
    line-height: 1.45;
}

h1 {
    font-size: 30px;
    font-weight: var(--mkt-font-weight-semibold);
}

h2 {
    font-size: 22px;
    font-weight: var(--mkt-font-weight-semibold);
}

h3 {
    font-size: 20px;
    font-weight: var(--mkt-font-weight-semibold);
}

h4 {
    font-size: 18px;
    font-weight: var(--mkt-font-weight-semibold);
}

h5 {
    font-size: 16px;
    font-weight: var(--mkt-font-weight-medium);
}

h6 {
    font-size: 15px;
    font-weight: var(--mkt-font-weight-medium);
}

p,
li,
td,
label,
a,
span {
    font-size: 15px;
    line-height: var(--mkt-line-height);
}

th {
    font-size: 16px;
    line-height: var(--mkt-line-height);
}

strong,
b {
    font-weight: var(--mkt-font-weight-semibold);
}

button,
input,
select,
textarea {
    font-family: var(--mkt-font-family) !important;
    font-size: 15px;
    font-weight: var(--mkt-font-weight-regular);
    letter-spacing: 0;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    font-weight: var(--mkt-font-weight-medium);
}

input::placeholder,
textarea::placeholder {
    color: #94a3b8;
    font-family: var(--mkt-font-family) !important;
    font-size: 14px;
    opacity: 1;
}

select option,
select optgroup {
    font-family: var(--mkt-font-family) !important;
}

select optgroup {
    font-weight: var(--mkt-font-weight-semibold);
}

table,
th,
td {
    font-family: var(--mkt-font-family) !important;
}

th {
    font-weight: var(--mkt-font-weight-semibold);
}

td {
    font-weight: var(--mkt-font-weight-regular);
}

.btn,
.button,
.badge,
.nav-link,
.dropdown-item,
.sidebar-link,
.menu-link,
.pagination,
.page-link,
.alert,
.modal,
.modal-title,
.card,
.card-title,
.card-text,
.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.navbar,
.navbar-brand,
.card-header,
.card-body,
.card-footer,
.modal-header,
.modal-body,
.modal-footer,
.toast,
.tooltip,
.popover,
.list-group,
.list-group-item,
.breadcrumb,
.breadcrumb-item {
    font-family: var(--mkt-font-family) !important;
}

.btn,
.button,
.nav-link,
.sidebar-link,
.menu-link,
.page-link {
    font-size: 15px;
    font-weight: var(--mkt-font-weight-medium);
}

.card-title,
.modal-title {
    font-size: 20px;
    font-weight: var(--mkt-font-weight-semibold);
}

.card-text,
.modal-body,
.card-body {
    font-size: 15px;
}

.badge {
    font-size: 14px;
    font-weight: var(--mkt-font-weight-medium);
}

small,
.form-text,
.text-muted,
.help-text,
.description,
.note,
.comment {
    font-size: 14px;
    line-height: 1.65;
}

.sales-sidebar,
.sales-sidebar *,
.admin-sidebar,
.admin-sidebar *,
.sidebar,
.sidebar *,
.topbar,
.topbar *,
.header,
.header *,
.dashboard,
.dashboard *,
.cp-main,
.cp-main *,
.skt-main,
.skt-main *,
main,
main * {
    font-family: var(--mkt-font-family) !important;
}

.dataTables_wrapper,
.dataTables_wrapper *,
.select2-container,
.select2-container *,
.flatpickr-calendar,
.flatpickr-calendar *,
.swal2-container,
.swal2-container *,
.tox,
.tox *,
.ql-container,
.ql-toolbar,
.ql-editor {
    font-family: var(--mkt-font-family) !important;
}

/* Font Awesome protection */
.fa,
.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands,
.fa-light,
.fa-thin,
.fa-duotone,
[class^="fa-"],
[class*=" fa-"] {
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
    font-style: normal;
}

.fas,
.fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.far,
.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

.fab,
.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Other icon libraries */
.material-icons,
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp {
    font-family: "Material Symbols Outlined" !important;
    font-weight: normal !important;
}

.bi,
[class^="bi-"],
[class*=" bi-"] {
    font-family: "bootstrap-icons" !important;
}

.lni,
[class^="lni-"],
[class*=" lni-"] {
    font-family: "LineIcons" !important;
}

/* Monospace exceptions */
code,
pre,
kbd,
samp {
    font-family: Consolas, "Courier New", monospace !important;
}

/* Legacy font override */
.font-prompt,
.font-sarabun,
.prompt,
.sarabun,
[style*="font-family: Prompt"],
[style*="font-family:'Prompt'"],
[style*='font-family: "Prompt"'],
[style*="font-family: Sarabun"],
[style*="font-family:'Sarabun'"],
[style*='font-family: "Sarabun"'] {
    font-family: var(--mkt-font-family) !important;
}

/* Readability helpers */
.table,
.data-table,
.cp-table {
    font-size: 15px;
}

.table th,
.data-table th,
.cp-table th {
    font-size: 16px;
    font-weight: var(--mkt-font-weight-semibold);
}

.table td,
.data-table td,
.cp-table td {
    font-size: 15px;
}

.kpi-value,
.summary-value,
.stat-value,
.metric-value {
    font-size: 34px;
    line-height: 1.2;
    font-weight: var(--mkt-font-weight-semibold);
}

.page-title,
.dashboard-title,
.section-title {
    font-weight: var(--mkt-font-weight-semibold);
}

@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 17px;
    }

    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }

    table th,
    .table th,
    .data-table th,
    .cp-table th {
        font-size: 15px;
    }

    table td,
    .table td,
    .data-table td,
    .cp-table td {
        font-size: 15px;
    }

    .card-title,
    .modal-title {
        font-size: 18px;
    }

    .kpi-value,
    .summary-value,
    .stat-value,
    .metric-value {
        font-size: 30px;
    }
}

@media print {
    html,
    body,
    body * {
        font-family: var(--mkt-font-family) !important;
    }
}