h3, .h3 {
    font-size: 24px; font-weight: 800;
}
h4, .h4 {
    font-size: 20px; font-weight: 800;
}
h5, .h5 {
    font-size: 18px; font-weight: 800;
}
h6, .h6 {
    font-size: 16px; font-weight: 800;
}

/* text decoration */
.under-line { border-bottom: var(--solid-ddd);}
.under-line-82 { border-bottom: 1px solid #828282}

.under-line-dashed { border-bottom: var(--dashed-ddd)}
.under-line-dot { border-bottom: var(--dot-ddd);}

.top-line { border-top: var(--solid-ddd)}
.top-line-dashed { border-top: var(--dashed-ddd)}

.under-line-dashed:not(:last-child) { border-bottom: var(--dashed-ddd)}
.top-shadow { box-shadow: 0px 1px 1px gray}
.under-shadow { box-shadow: 0px 1px 5px gray}
.shadow { box-shadow: 0px 3px 5px rgb(0, 0, 0, .3) }

.ul-under-line {}
.ul-under-line li:not(:last-child) { border-bottom: 1px solid #ddd }

.ul-child-style-disc li { list-style: disc; list-style-position: inherit}

.text-right { text-align: right !important; }
.text-center { text-align: center; }
.text-left { text-align: left !important; }
.text-under-line { border-bottom: 1px solid #ddd}
.text-through { text-decoration: line-through}

.size-px-8 { font-size: 8px !important}
.size-px-9 { font-size: 9px !important}
.size-px-10 { font-size: 10px !important;}
.size-px-11 { font-size: 11px !important;}
.size-px-12 { font-size: 12px !important;}
.size-px-13 { font-size: 13px !important;}
.size-px-14 { font-size: 14px !important;}
.size-px-15 { font-size: 15px !important;}
.size-px-16 { font-size: 16px !important;}
.size-px-17 { font-size: 17px !important;}
.size-px-18 { font-size: 18px !important;}
.size-px-19 { font-size: 19px !important;}
.size-px-20 { font-size: 20px !important;}
.size-px-22 { font-size: 22px !important;}
.size-px-24 { font-size: 24px !important;}
.size-px-28 { font-size: 28px !important;}
.size-px-32 { font-size: 32px !important;}
.size-px-36 { font-size: 36px !important;}
.size-px-40 { font-size: 48px !important;}
.size-px-48 { font-size: 48px !important;}

.size-em-05 { font-size: 0.5em;}
.size-em-06 { font-size: 0.6em;}
.size-em-07 { font-size: 0.7em;}
.size-em-08 { font-size: 0.8em;}
.size-em-09 { font-size: 0.9em;}
.size-em-10 { font-size: 1.0em;}
.size-em-11 { font-size: 1.1em;}
.size-em-12 { font-size: 1.2em;}
.size-em-13 { font-size: 1.3em;}
.size-em-14 { font-size: 1.4em;}
.size-em-15 { font-size: 1.5em;}
.size-em-16 { font-size: 1.6em;}
.size-em-17 { font-size: 1.7em;}
.size-em-18 { font-size: 1.8em;}
.size-em-19 { font-size: 1.9em;}
.size-em-20 { font-size: 2.0em;}

.line-height-1 { line-height: 1}
.line-height-2 { line-height: 2}
.line-height-3 { line-height: 3}

.line-height-100 { line-height: 100%}
.line-height-110 { line-height: 110%}
.line-height-120 { line-height: 120%}
.line-height-130 { line-height: 130%}
.line-height-140 { line-height: 140%}
.line-height-150 { line-height: 150%}
.line-height-160 { line-height: 160%}
.line-height-170 { line-height: 170%}
.line-height-180 { line-height: 180%}
.line-height-190 { line-height: 190%}
.line-height-200 { line-height: 200%}

.font-weight-bold { font-weight: bold !important;}
.font-weight-300 { font-weight: 300 !important;}
.font-weight-400 { font-weight: 400 !important;}
.font-weight-500 { font-weight: 500 !important;}
.font-weight-600 { font-weight: 600 !important;}
.font-weight-700 { font-weight: 700 !important;}

.letter-space-1 { letter-spacing: -1px}
.letter-space-2 { letter-spacing: -2px}

/* text color */
.color-primary { color: var(--color-primary) !important;}
.color-danger { color: var(--color-danger) !important;}
.color-base { color: var(--color-base) !important;}
.color-plus { color: #5fa8d3 !important;}
.color-minus { color: #f44336 !important;}
.color-success { color: #15ab94 !important;}
.color-error { color: #f44336 !important;}
.color-cancel { color: #FF5D46 !important;}
.color-white { color: white !important;}
.color-blue { color: #0f6ecd !important;}
.color-orange { color: darkorange !important;}
.color-green { color: #15ab94 !important; }
.color-gray { color: #787676 !important;}
.color-red { color: red !important;}
.color-yellow { color: gold !important;}

.color-red-light { color: #FF5D46 !important;}

.color-purple-light { color: #6f7dff }

.color-black { color: black !important;}
.color-eee { color: #eee !important;}
.color-bbb { color: #bbb !important;}
.color-333 { color: #333 !important;}

.color-star { color: gold !important;}

.vertical-middle { vertical-align: middle !important;}
.vertical-top { vertical-align: top !important;}
.vertical-bottom { vertical-align: bottom !important;}
.vertical-sub { vertical-align: sub !important;}
.vertical-text-bottom { vertical-align: text-bottom !important;}

/* padding & margin */

.pa-5 { padding: 5px !important;}
.pa-5-10 { padding: 5px 10px !important;}
.pa-5-15 { padding: 5px 15px !important;}
.pa-5-20 { padding: 5px 20px !important;}
.pa-10 { padding: 10px !important;}
.pa-10-15 { padding: 10px 15px !important;}
.pa-10-20 { padding: 10px 20px !important;}

.pa-15-10 { padding: 15px 10px !important;}
.pa-15-20 { padding: 15px 20px !important;}
.pa-20 { padding: 20px !important;}
.pa-20-10 { padding: 20px 10px !important;}
.pa-20-40 { padding: 20px 40px !important;}
.pa-30 { padding: 30px;}
.pa-40 { padding: 40px !important;}
.pa-40-20 { padding: 40px 20px !important;}
.pa-10-10-15-10 { padding: 10px 10px 15px 10px !important;}
.pa-50 { padding: 50px}
.pa-50-20 { padding: 50px 20px !important;}
.pa-50-10 { padding: 50px 10px !important;}

.pl-5 { padding-left: 5px}
.pl-10 { padding-left: 10px}
.pl-20 { padding-left: 20px}
.pl-30 { padding-left: 30px}

.pt-5 { padding-top: 5px}
.pt-10 { padding-top: 10px}
.pt-20 { padding-top: 20px}
.pt-30 { padding-top: 30px}
.pt-40 { padding-top: 40px}
.pt-50 { padding-top: 50px}

.pb-5 { padding-bottom: 5px}
.pb-10 { padding-bottom: 10px}
.pb-20 { padding-bottom: 20px}
.pb-30 { padding-bottom: 30px}
.pb-40 { padding-bottom: 40px}
.pb-50 { padding-bottom: 50px}

.ptb-5 { padding: 5px 0 !important;}
.ptb-10 { padding: 10px 0 !important;}
.ptb-20 { padding: 20px 0 !important;}
.ptb-30 { padding: 30px 0 !important;}
.ptb-40 { padding: 40px 0 !important;}
.ptb-50 { padding-top: 50px !important; padding-bottom: 50px !important;}

.prl-5 { padding: 0 5px !important;}
.prl-10 { padding: 0 10px !important;}
.prl-20 { padding-right: 20px !important; padding-left: 20px !important;}
.prl-30 { padding: 0 30px !important;}

.mt-5 { margin-top: 5px !important;}
.mt-10 { margin-top: 10px !important;}
.mt-20 { margin-top: 20px !important;}
.mt-30 { margin-top: 30px !important;}
.mt-40 { margin-top: 40px !important;}
.mt-50 { margin-top: 50px !important;}

.mt-auto { margin-top: auto !important;}

.mb-5 { margin-bottom: 5px !important;}
.mb-10 { margin-bottom: 10px !important;}
.mb-20 { margin-bottom: 20px !important;}
.mb-30 { margin-bottom: 30px !important;}
.mb-40 { margin-bottom: 40px !important;}
.mb-50 { margin-bottom: 50px !important;}

.mtb-5 { margin: 5px 0 !important;}
.mtb-10 { margin: 10px 0 !important;}
.mtb-20 { margin: 20px 0 !important;}
.mtb-30 { margin: 30px 0 !important;}
.mtb-40 { margin: 40px 0 !important;}
.mtb-50 { margin: 50px 0 !important;}

.mr-5 { margin-right: 5px}
.mr-10 { margin-right: 10px}
.mr-15 { margin-right: 15px}
.mr-20 { margin-right: 20px}

.ml-5 { margin-left: 5px}
.ml-10 { margin-left: 10px}
.ml-15 { margin-left: 15px}
.ml-20 { margin-left: 20px}

.ma-auto { margin: 0 auto}

.indent-10 { text-indent: 10px}

/* layout */
.container { width: 100%; margin: 0 auto; background-color: white; padding: 0 !important;}
.contents { width: var(--width-base) !important; margin: 0 auto}
.bottom-main { margin-top: auto; position: relative; padding: 10px; background-color: black; opacity: 0.7}

.justify-center { display: flex; justify-content: center}
.justify-space-around { display: flex; justify-content: space-around}
.justify-space-between { display: flex !important; justify-content: space-between }
.justify-space-between-in-box > div {
    display: flex !important; justify-content: space-between; align-items: center;
}
.gap-10 { gap: 10px}
.gap-20 { gap: 20px}
.items-center{ align-items: center}

.flex-column { display: flex; flex-direction: column;}
.flex-column-wrap { display: flex; flex-direction: column; flex-wrap: wrap;}

.flex-row { display: flex; flex-direction: row; flex-wrap: nowrap;}
.flex-row-wrap { display: flex; flex-direction: row; flex-wrap: wrap}

.flex-1 { flex: 1}
.flex-2 { flex: 2}
.flex-3 { flex: 3}
.flex-4 { flex: 4}
.flex-5 { flex: 5}

.float-right { float: right;}

.display-none{display:none;}
.display-block{display:block;}

.overflow-y-auto { overflow-y: auto}
.overflow-x-auto { overflow-x: auto}
.overflow-hidden { overflow: hidden}

.full-height { height: 100%;}
.full-width { width: 100%;}
.height-auto { height: auto !important;}
.height-max-480 { max-height: 480px;}

.inline-block { display: inline-block;}

.base-height {
    height: 680px;
}

/* background */

.bg-unset { background-color: unset !important;}
.bg-primary { background-color: var(--bg-primary) !important; color: var(--color-white) !important;}
.bg-secondary { background-color: var(--bg-secondary) !important;  }
.bg-category { background-color: var(--bg-category) !important; color: var(--color-white) !important;}
.bg-none { background-color: transparent}
.bg-loading { background-color: #333; opacity: 0.5}
.bg-default { background-color: #eee}
.bg-identify { background-color: #333; color: #eee}
.bg-identify-table th
, .bg-identify-table td {
    background-color: #333; color: #eee
}
.bg-gray { background-color: gray; color: white}
.bg-gray-light { background-color: #eee;}
.bg-gray-dark { background-color: darkgray}
.bg-dark { background-color: #828282}
.bg-white { background-color: white; color: #333}
.bg-green { background-color: #0f9d58; color: white;}
.bg-red { background-color: #bf360c !important; color: white;}
.bg-orange { background-color: darkorange; color: white;}
.bg-f5 { background-color: #f5f5f5}
.bg-eee { background-color: #eee !important}
.bg-select { background-color: black}
.bg-blue { background-color: #0D47A1; color: white}
.bg-light-gray { background-color: darkgray;}
.bg-light-green { background-color: #81C784;}
.bg-light-blue { background-color: #eee;}
.bg-light-red { background-color: #EF9A9A;}
.bg-black { background-color: black; color: #eee}
.bg-base { background-color: #333; color: #eee;}
.bg-fe { background-color: #eee; color: #eee;}
.bg-yellow { background-color: yellow;}


/* input */
.select-list-type { border: 1px solid #ddd; width: 100%; padding: 13px; color: black; height: auto;}

input { font-size: 14px;}
input:disabled,
input:read-only { background-color: #eee; color: #bbb;}

.input-disabled { background-color: #eee}
.input-secret { -webkit-text-security: disc }

.input-underline { width: 100%; border-bottom: 1px solid #ddd; padding: 10px;}

.input-underline:focus,
.input-underline.input  { border-bottom: 1px solid #009BFA}


.input-box { width: 100%; padding: 10px; border: 1px solid #ddd;}
.input-box-5 { width: 100%; padding: 5px; border: 1px solid #ddd;}
.box { border: 1px solid #ddd}
.box-rl { border-right: 1px solid #ddd; border-left: 1px solid #ddd}
.radius-5 { border-radius: 5px; overflow: hidden}
.radius-10 { border-radius: 10px; overflow: hidden}
.radius-20 { border-radius: 20px; overflow: hidden}
.radius-100 { border-radius: 100%}
.radius-circle { border-radius: 50%}
.radius-top-20 { border-radius: 20px 20px 0 0; overflow: hidden}
.radius-bottom-20 { border-radius: 0 0 20px 20px; overflow: hidden}

.login-checkbox { width: 20px !important; vertical-align: middle; margin-right: 0px;}

.square-40 { width: 40px; height: 40px}
.square-64 { width: 64px; height: 64px}
.square-100 { width: 100px; height: 100px}
.square-120 { width: 120px; height: 120px}
.square-480 { width: 480px; height: 480px}

/* button */
.btn { display: inline-block; width: 100%; text-align: center; padding: 10px; font-size: 14px; font-weight: 500; }
.btn-round {
    border-radius: 100%;
}
.btn-inline { display: inline-block; width: auto; text-align: center; padding: 5px 10px; font-size: 12px; font-weight: 400; color: white;}
.btn-inline:disabled { background-color: #bbb}

.btn-primary { background-color: var(--btn-primary); color: white; }
.btn-primary-outline { border: 1px solid var(--btn-primary); color: var(--btn-primary) !important;}
.btn-secondary { background-color: var(--btn-secondary); color: white;}
.btn-dark-gray { background-color: darkgray; color: white; }

.btn-danger { background-color: #D50000; color: white; font-size: 16px; font-weight: 300; }
.btn-default { background-color: #D9D9D9; color: #1C3A58;}

.btn-success { background-color: #15ab94; color: white;}
.btn-cancel { background-color: #FF5D46; color: white;}
.btn-blue { background-color: #0f6ecd; color: white;}
.btn-orange { background-color: #faa05a; color: white}
.btn-green { background-color: #15ab94; color: white;}

.btn-group-red { background-color: #eee; color: black}
.btn-group-red.on { background-color: white; border: 1px solid #F14E37; color: #F14E37}


.btn:disabled { background: none !important; background-color: #eee !important; color: #2A2A2A !important; }

.btn-identify {

    width: 100%; height: 100%;
    border: none;
    /*
    background-color: #0D47A1;
     */
    background-color: black;
    color: white;
    font-size: 16px;
}

/* box */

.width-10 { width: 10% !important;}
.width-15 { width: 15% !important;}
.width-20 { width: 20% !important;}
.width-25 { width: 25% !important;}
.width-30 { width: 30% !important;}
.width-35 { width: 35% !important;}
.width-40 { width: 40% !important;}
.width-45 { width: 45% !important;}
.width-50 { width: 50% !important;}
.width-55 { width: 55% !important;}
.width-60 { width: 60% !important;}
.width-65 { width: 65% !important;}
.width-70 { width: 70% !important;}
.width-75 { width: 75% !important;}
.width-80 { width: 80% !important;}
.width-85 { width: 85% !important;}
.width-90 { width: 90% !important;}
.width-95 { width: 95% !important;}
.width-100 { width: 100% }
.width-480 { width: 480px}

/* icon */
.icon-large { font-size: 48px !important;}
.icon-x-large { font-size: 60px  !important; }
.icon-xx-large { font-size: 72px  !important; }
.icon-xxx-large { font-size: 84px  !important; }
.icon-xxxx-large { font-size: 96px  !important; }

/* label */

.label { color: #eee; border-radius: 5px; padding: 3px 7px 3px; line-height: 12px !important; font-size: 10px;}
.label-new { background-color: #0D47A1;}
.label-hot { background-color: #e64a19;}
.label-recomm { background-color: #0f9d58;}
.label-season { background-color: #00b0ff;}


.label-primary { background-color: var(--bg-primary); }
.label-default { background-color: #bbb;}
.label-success { background-color: var(--bg-success);}
.label-cancel { background-color: var(--bg-secondary);}
.label-danger { background-color: var(--bg-danger);}

/* animation */
.rotate-180 {
    transform: rotate(180deg);
}

/* position */
.position-relative { position: relative }
.position-fixed { position: fixed;}
.position-fixed-full { position: fixed; width: 100%; height: 100%; top: 0; left: 0;}
.position-absolute { position: absolute !important;}
.position-absolute-full { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.position-absolute.icon-menu-down { right: 10px; top: 12px}

/* table */
.table { width: 100%; font-size: 12px; table-layout: fixed}

.table > tbody > tr > th
,.table > tbody > tr > td
,.table > thead > tr > th
,.table > thead > tr > td
,.table > tfoot > tr > th
,.table > tfoot > tr > td {
    text-align: center;
    padding: 10px;
    border: 1px solid #ddd
}

.table th { background-color: #EBF0F9 !important; }
.table.th-left > tbody > tr > th{ text-align: left ;}
.table.td-left > tbody > tr > td { text-align: left ;}
.table.td-right > tbody > tr > td { text-align: right ;}

td.td-left { text-align: left !important;}

.table tr{
    background-color: #fff;
}

.table-even thead tr { background-color: #0D47A1}
.table-even tbody tr:nth-child(even){
    background-color: #eee;
}

.table-odd thead tr { background-color: #fff}
.table-odd tbody tr:nth-child(odd){
    background-color: #0D47A1;
}

.th-white th { background-color: white}

.hide { display: none}

.table .on { background-color: #eee}

.table-pin th
, .table-pin td {
    font-size: 18px; font-weight: bold;
}


.square-64 { width: 64px; height: 64px; overflow: hidden}
.square-80 { width: 80px; height: 80px; overflow: hidden}
.square-100 { width: 100px; height: 100px; overflow: hidden}
.square-120 { width: 120px; height: 120px; overflow: hidden}
.square-160 { width: 160px; height: 160px; overflow: hidden}

.cursor-pointer { cursor: pointer}

.hidden { display: none}

.min-height-240 { min-height: 240px}
.min-height-480 { min-height: 480px}



.main-amount {
    font-size: var(--size-px-16);
    font-weight: var(--weight-700);
    text-align: center;
}

.wrap-card {
    background-color: var(--bg-white);
    border-radius: 20px;
    box-shadow: -1px -1px 1px gray inset;
}

.word-break {
    text-overflow : ellipsis;
    word-wrap : break-word;
    /* display : -webkit-box; */
    overflow : hidden;
    word-break: break-word;
}