html,
body,
.main-body {
    font-family: 'font_body' !important;
    font-size: 16px;
    background-color: #FBFBFB !important;
}

.app-header__logo .logo-src.logo-serazu {
    height: 50px;
    width: 200px;
}

.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
    background-color: #F1553E !important;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    background-color: #F1553E !important;
}

@font-face {
    font-family: 'font_body';
    src: url('font/Kanit-Regular.woff2') format('woff2'),
    url('font/Kanit-Regular.woff') format('woff');
}

@font-face {
    font-family: 'font_heading';
    src: url('font/Kanit-Medium.woff2') format('woff2'),
    url('font/Kanit-Medium.woff') format('woff');
}

/*size4 mobile*/
@media only screen and (max-width: 501px) {
    .highlight-mobile {
        padding: 0 !important;
    }
}

.img-comment img {
    max-width: 250px;
}

.url-two-line {
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    width: inherit;
}

.width-url {
    width: 570px;
}

.text-two-line {
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    width: inherit;
}

.app-main-content {
    margin: 30px;
    flex: 1;
}

.tool-template-fix {
    position: fixed;
    top: 60px;
    z-index: 9;
    width: 100%;
}

/*login*/
.row-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.img {
    background-image: url(images/serazu.png);
    height: 200px;
}

.img {
    background-repeat: no-repeat;
    background-position: center center;
}

.form-login-box {
    font-family: font_heading;
    padding: 50px 70px;
}

.form-login {
    margin-top: 100px;
    width: 600px;
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0 10px 34px -15px rgb(0 0 0 / 24%);
    box-shadow: 0 10px 34px -15px rgb(0 0 0 / 24%);
}

.form-group .r-login {
    border-radius: 25px;
}

.justify-content-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

/*login*/

div.required label.control-label:after {
    content: " *";
    color: red;
}

.has-error .checkbox,
.has-error .checkbox-inline,
.has-error .control-label,
.has-error .help-block,
.has-error .radio,
.has-error .radio-inline,
.has-error.checkbox label,
.has-error.checkbox-inline label,
.has-error.radio label,
.has-error.radio-inline label,
.has-error .form-control {
    color: #a94442;
}

.has-error .form-control {
    border: 1px solid #a94442;
}

.has-error .form-control:focus {
    box-shadow: 0 0 0 0.2rem rgb(169 68 66 / 25%);
}

.ui-front {
    z-index: 2000 !important;
}

.select2-container .select2-search--inline {
    float: none !important;
}

.select2-selection__choice {
    font-size: 16px !important;
}

.select2-search__field {
    font-size: 14px !important;
}

/*color main*/
.bg-color00519A {
    background-color: #00519A;
}

.bg-colorF3F9FF {
    background-color: #F3F9FF;
}

.dropdown-menu.show {
    transform: translate3d(-75px, 33px, 0px);
!important;
}

.hide {
    display: none !important;
}

.switch {
    position: relative;
    display: revert !important;
    width: 50px;
    height: 30px;
    margin: 0px;
}

.head-side-li {
    color: #F1553E !important;
}

.tab-menu:hover {
    background-color: #FFEDEB !important;
    color: #F1553E !important;
}

.line-vertical-nav ul:before {
    background-color: #FFEDEB !important;
}

.datetimepicker-days, .datetimepicker-months, .datetimepicker-years, .datetimepicker-hours, .datetimepicker-minutes {
    font-size: 14px;
}

.datepicker-days, .datepicker-months, .datepicker-years {
    font-size: 14px;
}

.input-group-text {
    font-size: 14px !important;
}

/*position*/
.position-relative {
    position: relative;
}


/*font size*/
.font12 {
    font-size: 12px;
}

.font14 {
    font-size: 14px !important;
}

.font16 {
    font-size: 16px;
}

.font18 {
    font-size: 18px;
}

.font20 {
    font-size: 20px;
}

.font24 {
    font-size: 24px;
}

.font26 {
    font-size: 26px;
}

.font30 {
    font-size: 30px;
}

.font-bold {
    font-weight: bold;
}

.font-head {
    font-family: font_heading;
}

.font-40 {
    font-size: 40px;
}

/*text style*/

/*text status*/
.word {
    /*overflow-wrap: break-word;*/
    word-break: break-all;
}

.text-status {
    width: 100%;
    border-radius: 5px;
    padding: 6px 23px 6px 23px;
}

/*text status*/
.heading00519A {
    font-family: font_heading;
    color: #00519A;
}

.text00519A {
    font-family: font_body;
    color: #00519A;
}

.heading7E7E7E {
    font-family: font_heading;
    color: #7E7E7E;
}

.text7E7E7E {
    font-family: font_body;
    color: #7E7E7E;
}

.heading333333 {
    font-family: font_heading;
    color: #333333;
}

.text333333 {
    font-family: font_body;
    color: #333333;
}

.headingD8D8D8 {
    font-family: font_heading;
    color: #D8D8D8;
}

.textD8D8D8 {
    font-family: font_body;
    color: #D8D8D8;
}

.text-none {
    text-decoration: none !important;
}

.text-underline {
    text-decoration: underline;
}

/*text color*/
.text-16aaff {
    color: #16aaff;
}

.text-red {
    color: #FF5353 !important;
}

.text-D92550 {
    color: #d92550;
}

.text-F9963B {
    color: #F9963B;
}

.text-green {
    color: #37A355;
}

.text-F1553E {
    color: #F1553E;
}

.font-vine {
    color: #7B3A3B;
}

.font-light-gray {
    color: #BEBABA;
}

.font-dark-gray {
    color: #878787;
}

.head-F1553E {
    color: #F1553E;
    font-size: 18px;
    font-weight: bold;
}

.font-F1553E {
    color: #F1553E;
}

.font-333333 {
    color: #333333;
}

/*text color*/

/*summary promotion*/
.div-free {
    background-color: #FFFCF3;
    border-radius: 5px;
    color: #F9963B;
    padding: 7px 10px;
}

.div-redeem {
    background-color: #F3F9FF;
    border-radius: 5px;
    color: #00519A;
    padding: 7px 10px;
}

/*summary promotion*/
/*cursor*/
.point {
    cursor: pointer;
}

/*margin*/
.margin-30 {
    margin: 30px;
}

.mb-0 {
    margin-bottom: 0px;
}

.mt-0 {
    margin-top: 0px;
}

.mr-0 {
    margin-right: 0px;
}

.m5 {
    margin: 5px;
}

.ml5 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.ml-0 {
    margin-left: 0px;
}

.m0 {
    margin: 0px;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mr5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mtb-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.mtb-15 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.mtb-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.mtb-5 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.mlr-5 {
    margin: 0px 5px;
}

.ml10 {
    margin-left: 10px;
}

.margin-left-right-10 {
    margin: 0 10px;
}

.margin-right-20 {
    margin-right: 20px;
}

.margin-top-15P {
    margin-top: 15%;
}

.margin-top-14 {
    margin-top: 14px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-40 {
    margin-top: 40px;
}

.margin-top-60 {
    margin-top: 60px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

/*padding*/
.padding-10-20 {
    padding: 10px 20px;
}

.pd-0 {
    padding: 0 !important;
}

.ptb-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.plr-10 {
    padding: 0 10px;
}

.plr-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.plr-50 {
    padding-left: 50px;
    padding-right: 50px;
}

.padding-15 {
    padding: 15px;
}

.pd-15 {
    padding: 15px;
}

.pd-10 {
    padding: 10px;
}

.pd-5 {
    padding: 5px;
}

.pl5 {
    padding-left: 5px;
}

.padding-top-130 {
    padding-top: 130px;
}

.padding-left-8 {
    padding-left: 8px;
}

.padding-left-20 {
    padding-left: 20px;
}

.padding-right-8 {
    padding-right: 8px;
}

.padding-top-15 {
    padding-top: 15px;
}

.padding-20 {
    padding: 20px;
}

.padding-40 {
    padding: 40px;
}

.padding-bottom-15 {
    padding-bottom: 15px;
}

/*float*/
.input-group > .field-promotionproduct-excel_product {
    margin-bottom: 0px !important;
}

/*display*/
.display-column-space-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.display-base-line {
    display: flex;
    align-items: baseline;
}

.display-block {
    display: block !important;
}

.display-flex {
    display: flex;
}

.display-column-flex-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.display-space-between {
    display: flex;
    justify-content: space-between;
}

.display-flex-end {
    display: flex;
    justify-content: flex-end;
}

.display-center-flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.display-flex-column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.display-flex-content-center {
    display: flex;
    justify-content: center;
}

.display-flex-align-center {
    display: flex;
    align-items: center;
}

.display-justify-align-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*login*/

.select2-selection__rendered > img {
    width: 20px;
}

li.select2-results__option > img {
    width: 20px;
}

.form {
    font-family: font_heading;
}

.app-theme-white.app-container {
    background: #ffffff !important;
}

.vertical-nav-menu li a.mm-active {
    color: #F1553E !important;
    background: #FFEDEB !important;
    font-weight: bold;
}

.vertical-nav-menu li {
    font-size: 14px;
}

.condition-coupon-4 {
    color: #333333;
    position: absolute;
    top: 15%;
    left: 40%;
    text-align: center;
    font-size: 16px;
}

.width-coupon {
    width: 100%;
}

.btn-coupon-3 {
    color: #ffffff !important;
    background: #F1553E !important;
    border-radius: 32px !important;
    font-size: 20px;
    padding: 2px 15px;
}

.btn-coupon-3:hover {
    border: solid 1px #F1553E;
    color: #F1553E !important;
    background: #ffffff !important;
}

.input-group-addon {
    width: auto;
}

.input-group-addon {
    padding: 9px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #161616;
    text-align: center;
    background-color: #F3F9FF;
    border: 1px solid #F3F9FF;
    border-radius: 0px 5px 5px 0px;
}

.r {
    cursor: pointer;
    color: #ffffff;
    height: 45px;
    width: 100%;
}

.color {
    background-color: #00519A;
    border: none;
}

.color:hover {
    background-color: #ffffff;
    color: #00519A;
    border: solid #00519A 1px;
}

.color-input {
    background-color: #F3F9FF !important;
    border: #F3F9FF !important;
    height: auto !important;
}

.btn-notice {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    border: solid #00519A 1px;
    margin-right: 5px;
    margin-left: 5px;
    padding: 0px !important;
    width: 33.5px !important;
    height: 33.5px !important;
    border-radius: 5px !important;
}

.btn-notice:hover {
    background-color: #F6F6F6;
}

.dropdown-menu.show {
    font-family: font_body;
    font-size: 14px;
}

.dropdown-menu.show > li > a:hover {
    text-decoration: none;
    background-color: #F3F9FF;
}

.dropdown-menu > li > a {
    display: block;
    padding: 10px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    white-space: nowrap;
    color: #333333;
}

.line-top-logout {
    border-top: solid 1px #E5E5E5;
}

.head-bar {
    font-size: 14px;
}

.head-bar > a {
    color: #333333;
    font-family: font_heading;
    font-size: 14px;
}

.head-bar > a:hover {
    color: #333333;
    font-family: font_heading;
    font-size: 14px;
}

.text-bar {
    color: #00519A;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.rotate-90 {
    rotate: 90deg;
}

/*button*/
.bg-icon {
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 0;
    background: #dedede;
}

.btn-align-center {
    display: flex !important;
    align-items: center;
    width: fit-content;
}

.btn-reply {
    color: #545454 !important;
    font-size: 14px !important;
    border: #545454 solid 0.5px !important;
}

.btn-reply:hover {
    color: #ffffff !important;
    border: #545454 solid 0.5px !important;
    background: #545454 !important;
}

.btn-review {
    border-radius: 30px !important;
    background: rgba(24, 85, 202, 0.08) !important;
    color: #1855CA !important;
    padding: 5px 15px !important;
    font-size: 16px !important;
}

.btn-review:hover {
    background: #ffffff !important;
    color: #1855CA !important;
    border: #1855CA 1px solid;
}

.btn-create-draft {
    color: white !important;
    border-radius: 6px;
    background: linear-gradient(134deg, #F1553E 0%, #FBB02A 100%) !important;
}

.btn-create-draft:hover {
    background: linear-gradient(315deg, #F1553E 0%, #FBB02A 100%) !important;
}

.btn-publisher {
    border-radius: 30px !important;
    color: #1855CA !important;
    font-size: 16px !important;
    background-color: rgba(24, 85, 202, 0.06) !important;
}

.btn-login {
    background-color: #F1553E;
    border: none;
}

.btn-login:hover {
    background-color: #ffffff;
    color: #F1553E;
    border: solid #F1553E 1px;
}

.btn-get-coupon {
    background: linear-gradient(294.89deg, #F2B856 -1.19%, #FCF5B0 146.58%) !important;
    width: 150px;
    border-radius: 25px !important;
    color: #E01B16 !important;
    font-weight: bold;
    font-size: 20px !important;
    box-shadow: 0 2px 11px 0 #7A7A7A4D;
}

.btn-description {
    background: rgba(17, 17, 17, 0.6) !important;
    border-radius: 25px !important;
    color: white !important;
    padding: 10px 25px !important;
}

.btn-description:hover {
    color: white;
    background: rgba(0, 0, 0, 0.6) !important;
}

.btn-add-other {
    border: #F1553E solid 0.5px !important;
    color: #F1553E !important;
    font-size: 12px !important;
}

.btn-add-other:hover {
    background: #FFF3F1 !important;
}

.btn-cart {
    width: 100%;
    text-align: center !important;
    background-color: white !important;
    border: 1px solid #F1553E !important;
    border-radius: 32px !important;
    font-size: 13px !important;
    color: #F1553E !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 4px !important;
    box-shadow: inset 0px 0px 0px #ffedec;
}

.btn-move {
    color: #444054;
    border-color: #444054;
}

.btn-add-template {
    color: #F1553E !important;
    background: #FFF3F1 !important;
}

.btn-add-template:hover {
    border: 1px solid #F1553E !important;
    color: #F1553E !important;
    background: white !important;
}

.btn-see-all {
    background: #7B3A3B !important;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) !important;
    border-radius: 32px !important;
    color: white !important;
    width: 178px !important;
    font-size: 18px !important;
}

.btn-see-all:hover {
    background: #E01B16 !important;
    color: white !important;
}

.btn-preview {
    border: 1px solid #7B3A3B !important;
    color: #7B3A3B !important;
}

.btn-preview:hover {
    border: 1px solid #7B3A3B !important;
    background-color: #7B3A3B !important;
    color: #ffffff !important;
}

.btn-copy-basket {
    border: 1px solid #00519A !important;
    background-color: #F3F9FF !important;
    border-radius: 5px !important;
    color: #00519a !important;
}

.btn-outline-00519A {
    background-color: #ffffff !important;
    border: 1px solid #00519A !important;
    color: #00519A !important;
    font-size: 14px !important;
    text-align: center !important;
}

.btn-outline-00519A:hover {
    background-color: #00519A !important;
    color: #ffffff !important;
}

.btn-outline-00519A-action {
    background-color: #00519A !important;
    color: #ffffff !important;
}

.btn-confirm {
    cursor: pointer;
    background-color: #00519A !important;
    color: white !important;
}

.btn-confirm:hover {
    cursor: pointer;
    background-color: #ffffff !important;
    color: #00519A !important;
    border: solid 1px #00519A;
}

.btn-create {
    background: #F1553E !important;
    color: #FFFFFF !important;
    border: solid 1px #F1553E !important;
    padding: 5px !important;
}

.btn-create:hover {
    background: #FFFFFF !important;
    color: #F1553E !important;
}

.btn-action {
    background: #FFF3F1 !important;
    color: #F1553E !important;
    border: solid 1px #F1553E !important;
}

.btn-action:hover {
    background: #FFFFFF !important;
    color: #F1553E !important;
}

.btn-trash {
    color: white !important;
    background-color: #D92550 !important;
    width: 25px;
    height: 25px;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.btn-trash:hover {
    color: #D92550 !important;
    background-color: white !important;
    border: solid 1px #D92550 !important;
}

.btn-copy {
    color: white !important;
    background-color: #D92550 !important;
}

.btn-copy:hover {
    color: #D92550 !important;
    background-color: white !important;
    border: solid 1px #D92550 !important;
}

/*cursor*/
.point {
    cursor: pointer;
}

.btn-grey {
    border: 1px solid #CDCDCD !important;
    color: white !important;
    border-radius: 5px;
    background-color: #CDCDCD !important;
    height: auto;
}

.btn-border00519A {
    box-shadow: 0px 0px 5px 0px #0000001a;
    margin-left: 5px;
    min-height: 33.5px;
    min-width: 33.5px;
    padding: 6px !important;
    background-color: #ffffff !important;
}

.btn-border00519A:hover {
    background-color: #F6F6F6;
}

/*basket detail*/

/*switch*/
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 30px;
    margin: 0px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    width: 50px;
    height: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 5px;
}

input:checked + .slider:before {

    height: 20px;
    width: 20px;
    left: 0px;
    bottom: 5px;
}

input:checked + .slider {
    background-color: #F1553E;
}

input:disabled + .slider {
    background-color: #FFF3F1;
    cursor: no-drop;
}

input:focus + .slider {
    box-shadow: 0 0 1px #F1553E;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.bootstrap-switch-00519A {
    background-color: #00519A !important;
    color: #ffffff !important;
}

input:checked + .slider.round.disabled {
    background-color: #DAF3E1;
    cursor: no-drop !important;
}

.slider.round.disabled {
    background-color: #EEEEEE;
    cursor: no-drop !important;
}

/*switch*/

/*checkbook css*/
.container-checkbox {
    color: #00519A;
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.container-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    /* background-color: #eee; */
    border: solid 1px #7E7E7E;
    border-radius: 5px;
}

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark {
    background-color: #00519A;
}

/* Create the checkmark/indicator (hidden when not checked) */
.container-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.selected-cart {
    margin: 7px 0;
}

/*checkbox css*/
.name-set {
    text-decoration: none;
    color: #333333;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.name-product > a {
    text-decoration: none;
    color: #333333;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.name-product > a:hover {
    text-decoration: none;
    color: #333333;
}

.box-user-shop {
    border: solid 1px #DEDEDE;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 10%);
}

/*gridview css*/
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
    border: 0px;
}

.table-bordered {
    border: 0px solid #e9ecef !important;
}

.table-bordered th, .table-bordered td {
    border: 0px solid #e9ecef;
}

.table th, .table td {
    padding: 0.55rem;
    vertical-align: top;
    border-top: 1px solid #e9ecef !important;
}

.pagination-desktop {
    font-family: 'font_heading';
    font-size: 14px;
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

/*gridview css*/

.table-img {
    width: 100%;
    height: 117px;
    overflow: hidden;
}

.border-B {
    border-bottom: 1px solid #F5F4F4;
}

.pagination {
    font-size: 14px;
    display: flex !important;
    justify-content: center !important;
}

.pagination li a {
    color: #00519A !important;
}

.pagination li.active a {
    background-color: #00519a !important;
    border-color: #00519a !important;
    color: white !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgb(255 255 255 / 3%) !important;
}

/*height*/
.H-75PX {
    height: 75px;
}

.H-38PX {
    height: 38px;
}

/*width*/
.W-35PX {
    width: 35px;
}

.W-40PX {
    width: 40px;
}

.W-55PX {
    width: 55px;
}

.W-fix {
    width: fit-content;
}

.W-10P {
    width: 10%;
}

.W-15P {
    width: 15%;
}

.W-20P {
    width: 20%;
}

.W-25P {
    width: 25%;
}

.W-30P {
    width: 30%;
}

.W-33-33P {
    width: 33.33%;
}

.W-40P {
    width: 40%;
}

.W-50P {
    width: 50%;
}

.W-60P {
    width: 60%;
}

.W-70P {
    width: 70%;
}

.W-80P {
    width: 80%;
}

.W-85P {
    width: 85%;
}

.W-90P {
    width: 90%;
}

.W-100P {
    width: 100%;
}

/*promotion*/
.heading-order-sum {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00519a;
    font-size: 16px;
}

.condition-promotion {
    background-color: #F3F9FF;
    border-radius: 5px;
    padding: 15px;
    margin: 5px 0px;
    color: #00519a;
}

.progress {
    height: 20px !important;
}

.stepper-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
}

.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 15px;
    left: -50%;
    z-index: 2;
}

.stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 15px;
    left: 50%;
    z-index: 2;
}

.stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #D8D8D8;
    margin-bottom: 6px;
    color: #FFFFFF;
}

.stepper-item.active .step-counter {
    background-color: #F3F9FF;
    border: solid 1px #00519a;
    color: #00519a;
}

.stepper-item.completed .step-counter {
    background-color: #00519a;
    border: solid 1px #00519a;
    color: #ffffff;
}

.stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 1px solid #D8D8D8;
    width: 100%;
    top: 15px;
    left: 50%;
    z-index: 3;
}

.stepper-item:first-child::before {
    content: none;
}

.stepper-item:last-child::after {
    content: none;
}

article {
    position: relative;
    float: left;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 10%);
    border-radius: 5px;
    margin: 5px;
    height: 50px;
}

article div {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 25px;
}

article input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    opacity: 0;
    cursor: pointer;
}

article input:disabled {
    cursor: no-drop;
    background-color: #F5F4F4;
}

input[type=checkbox]:checked ~ div {
    background-color: #F3F9FF;
    border: 1px solid #00519a;
    border-radius: 5px;
}

input[type=radio]:checked ~ .type_number {
    background-color: #F3F9FF;
    border: 1px solid #00519a;
    border-radius: 5px;
    height: 33.5px;
}

input[type=radio]:checked ~ .type_product {
    background-color: #F3F9FF;
    border: 1px solid #00519a;
    border-radius: 5px;
}

/*promotion*/

/*payment*/
.linear-color {
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 81, 154, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.btn-cancel {
    background-color: #FF5353 !important;
    color: white !important;
    border-radius: 5px;
}

.btn-cancel:hover {
    color: #FF5353 !important;
    border: solid 1px #FF5353 !important;
    background-color: white !important;
}

/*payment*/

/*radio*/
/* The container */
.radio-list {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    float: left;
}

.radio-list-copy {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radio-list input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-list-copy input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio-list:hover input ~ .checkmark {
    background-color: #ccc;
}

.radio-list-copy:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio-list input:checked ~ .checkmark {
    background-color: #ffffff;
    border: solid 2px #00519a;
}

.radio-list-copy input:checked ~ .checkmark {
    background-color: #ffffff;
    border: solid 2px #00519a;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-list input:checked ~ .checkmark:after {
    display: block;
}

.radio-list-copy input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-list .checkmark:after {
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00519A;
}

.radio-list-copy .checkmark:after {
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00519A;
}

/*radio*/

.card-header {
    background-color: white !important;
}

/*border*/
.border-promotion {
    background: #FFFFFF;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.border-promotion > .pl5 > label {
    cursor: pointer;
}

/*border*/

/*size1 desktop1200*/
@media only screen and (min-width: 1200px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .size-set {
        width: 25%;
    }

    .name-set {
        -webkit-line-clamp: 2;
    }

    .position-search {
        bottom: 32%;
        left: 2.5%;
    }

    .short-detail-promotion {
        height: 42px;
    }

    .W-AUTO {
        width: 20%;
    }

    /*history view*/
    .btn-favorite:hover, .btn-favorite-active:hover {
        color: #ffa39c;
    }

    .btn-group {
        display: flex;
        align-items: center;
    }

    /*hover to open*/
    .div-view-product {
        max-height: 400px;
    }

    .dropdown-content {
        min-width: 400px;
        left: -125px;
    }

    .pre-img {
        width: 25%;
    }

    .pre-name {
        width: 60%;
    }

    .pre-count {
        width: 15%;
    }

    /*hover to open*/
    /*payment*/
    .head-detail-payment {
        float: left;
        width: 70%;
    }

    .sub-detail-payment {
        float: left;
        width: 30%;
    }

    .header-banking {
        float: left;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .logo_banking > img {
        width: 60px;
    }

    .sub-detail-payment > img {
        width: 60px;
    }

    .detail_banking {
        width: 83%;
        float: left;
    }

    .logo_banking {
        width: 17%;
        float: left;
    }

    .display-btn {
        display: flex;
        justify-content: flex-end;
    }

    .payment-area-1 {
        height: 310px;
        margin: 25px;
    }

    .payment-area-2 {
        height: 150px;
        margin: 15px 25px;
    }

    .payment-area-3 {
        margin: 15px 25px;
    }

    /*payment*/
    .form-submitNameCart {
        right: 59px;
        top: 88px;
    }

    .item-1-summary {
        width: 35%;
    }

    .item-2-summary {
        width: 63%;
        font-size: 14px;
    }

    .item-3-summary {
        width: 50%;
        font-size: 14px;
    }

    .item-4-summary {
        width: 50%;
        font-size: 14px;
    }

    .view-product-only > .stock-number {
        display: none;
    }

    .view-product-only > form > .input-group {
        width: 50%;
        float: left;
    }

    .view-product-only > form > .input-group > .btn-basket {
        margin-top: 0px;
        margin-left: 10px;
    }

    .sort-data {
        display: flex;
        justify-content: space-between;
    }

    .text-display-head {
        width: 12%;
    }

    .text-display-head-sub {
        width: 11%;
    }

    .text-display-colon {
        width: 1%;
    }

    .text-display-detail {
        width: 76%;
    }

    .border-LR {
        border-left: 1px solid #F5F4F4;
        border-right: 1px solid #F5F4F4;
        border-bottom: 1px solid #F5F4F4;
    }

    .data-desktop {
        display: block;
    }

    .data-mobile {
        display: none;
    }

    .all-total {
        float: right;
    }

    .total-mount {
        width: 342px;
    }

    .canvas-area {
        width: 50%;
        float: left;
    }

    .item-product-basket {
        display: flex;
        justify-content: space-around;
    }

    .choice-dealer {
        width: 220px;
        height: 220px;
    }

    .choice-dealer-disable {
        width: 220px;
        height: 220px;
    }

    .area-basket-active {
        display: none;
    }

    .position-search-basket {
        z-index: 12;
        bottom: 25%;
        width: 21.78px;
        left: 4.5%;
    }

    .center-content {
        width: 65%;
        float: left;
    }

    .right-content {
        margin-left: 1%;
        width: 34%;
        float: left;
    }

    /*basket detail*/
    .name-product > a {
        font-size: 18px;
    }

    .text-red {
        font-size: 14px;
    }

    .full-basket {
        /*max-height: 500px;*/
        /*width: 100%;*/
    }

    .input-edit-basket {
        display: inline-flex;
        justify-content: space-around;
        width: 100%;
    }

    .div-logo {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .small-logo {
        vertical-align: bottom;
        margin-right: 7px;
    }

    .short-basket, .short-basket-issue {
        width: 100%;
        padding: 15px;
    }

    .chk-short-basket {
        width: 60%;
    }

    .btn-short-basket {
        width: 40%;
    }

    .code-text-basket {
        width: 100%;
    }

    /*basket detail*/
    .form {
        padding: 50px 150px;
    }

    .login-form {
        width: 50%;
    }

    .img-login {
        width: 50%;
    }

    .direct-mobile {
        display: none;
    }

    .btn-basket {
        font-size: 14px !important;
    }

    .btn-calculate {
        font-size: 14px;
    }

    .menu-mobile {
        display: none;
    }

    .item-1 {
        display: flex;
        justify-content: flex-start;
    }

    .item-2 {

    }
}

/*size2 desktop1000*/
@media only screen and (max-width: 1200px) and (min-width: 1001px) {
    .size-set {
        width: 30%;
    }

    .name-set {
        -webkit-line-clamp: 2;
    }

    .short-detail-promotion {
        height: 42px;
    }

    .W-AUTO {
        width: 20%;
    }

    .btn-favorite:hover, .btn-favorite-active:hover {
        color: #ffa39c;
    }

    .btn-group {
        display: flex;
        align-items: center;
    }

    /*hover to open*/
    .div-view-product {
        max-height: 400px;
    }

    .dropdown-content {
        min-width: 400px;
        left: -110px;
    }

    .pre-img {
        width: 25%;
    }

    .pre-name {
        width: 60%;
    }

    .pre-count {
        width: 15%;
    }

    /*hover to open*/
    /*payment*/
    .head-detail-payment {
        float: left;
        width: 60%;
    }

    .sub-detail-payment {
        float: left;
        width: 40%;
    }

    .header-banking {
        float: left;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .logo_banking > img {
        width: 60px;
    }

    .sub-detail-payment > img {
        width: 60px;
    }

    .detail_banking {
        width: 80%;
        float: left;
    }

    .logo_banking {
        width: 20%;
        float: left;
    }

    .display-btn {
        display: flex;
        justify-content: flex-end;
    }

    .payment-area-1 {
        height: 310px;
        margin: 25px;
    }

    .payment-area-2 {
        height: 285px;
        margin: 15px 25px;
    }

    .payment-area-3 {
        margin: 15px 25px;
    }

    /*payment*/
    .form-submitNameCart {
        right: 59px;
        top: 88px;
    }

    .item-1-summary {
        width: 40%;
    }

    .item-2-summary {
        width: 60%;
        font-size: 14px;
    }

    .item-3-summary {
        width: 50%;
        font-size: 14px;
    }

    .item-4-summary {
        width: 50%;
        font-size: 14px;
    }

    .view-product-only > .stock-number {
        display: none;
    }

    .view-product-only > form > .input-group {
        width: 50%;
        float: left;
    }

    .view-product-only > form > .input-group > .btn-basket {
        margin-top: 0px;
        margin-left: 10px;
    }

    .sort-data {
        display: flex;
        justify-content: space-between;
    }

    .text-display-head {
        width: 12%;
    }

    .text-display-head-sub {
        width: 12%;
    }

    .text-display-colon {
        width: 1%;
    }

    .text-display-detail {
        width: 75%;
    }

    .border-LR {
        border-left: 1px solid #F5F4F4;
        border-right: 1px solid #F5F4F4;
        border-bottom: 1px solid #F5F4F4;
    }

    .data-desktop {
        display: block;
    }

    .data-mobile {
        display: none;
    }

    .all-total {
        float: right;
    }

    .total-mount {
        width: 342px;
    }

    .canvas-area {
        width: 50%;
        float: left;
    }

    .item-product-basket {
        display: flex;
        justify-content: space-around;
    }

    .choice-dealer {
        width: 220px;
        height: 220px;
    }

    .choice-dealer-disable {
        width: 220px;
        height: 220px;
    }

    .area-basket-active {
        display: none;
    }

    .position-search-basket {
        z-index: 12;
        bottom: 25%;
        width: 21.78px;
        left: 4.5%;
    }

    .center-content {
        width: 65%;
        float: left;
    }

    .right-content {
        margin-left: 1%;
        width: 33%;
        float: left;
    }

    /*basket detail*/
    .full-basket {
        /*max-height: 500px;*/
        /*width: 100%;*/
    }

    .name-product > a {
        font-size: 18px;
    }

    .text-red {
        font-size: 12px;
    }

    .input-edit-basket {
        width: 100%;
        display: inline-flex;
        justify-content: space-around;
    }

    .div-logo {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .small-logo {
        margin-right: 7px;
        padding-right: 2.5px;
    }

    .short-basket, .short-basket-issue {
        padding: 10px;
    }

    .chk-short-basket {
        width: 65%;
    }

    .btn-short-basket {
        width: 35%;
    }

    .code-text-basket {
        width: 100%;
    }

    /*basket detail*/
    .btn-basket {
        font-size: 12px !important;
    }

    .form {
        padding: 50px 100px;
    }

    .login-form {
        width: 50%;
    }

    .img-login {
        width: 50%;
    }

    .direct-mobile {
        display: none;
    }

    .btn-calculate {
        font-size: 12px;
    }

    .menu-mobile {
        display: none;
    }
}

/*setting*/

.head-setting {
    display: flex;
}

.card-transport {
    background: #FFFFFF;
    box-shadow: 0px 1px 22px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    padding: 16px;
    cursor: move;
}

.border-box-drop {
    border: 1px solid #CDCDCD;
    border-radius: 6px;
    background: #FFFFFF;
    padding: 10px;
    height: 100%;
}

.card-transport table {
    border-collapse: unset;
}

.display-flex-center {
    display: flex;
    align-items: center;
    margin: 7px 0 7px 0;
}

.btn-edit-info {
    background: #F1553E;
    color: #FFFFFF;
    border-radius: 8px;
    border: none;
    padding: 10px 30px;
    height: 38px;
    font-size: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.btn-edit-info:hover {
    background: #cc442f;
    color: #FFF;
}


.btn-delete {
    background: #FFFFFF;
    border: 1px solid #7B3A3B;
    border-radius: 8px;
    color: #7B3A3B;
    padding: 10px 30px;
    height: 38px;
    font-size: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


.box-transport {
    background: rgba(24, 85, 202, 0.08);
    border-radius: 4px;
    padding: 4px 10px;
    color: #1855CA;
}

.img-edit {
    border: 1px dashed #CDCDCD;
    padding: 10px;
    border-radius: 50%;
}

.add-transport {
    background: none;
    border: none;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
    color: white;
    padding: 1px 5px;
}

.add-detail {
    background: #FFFFFF;
    border: 1px solid #7B3A3B;
    border-radius: 8px;
    width: 100%;
    padding: 10px;
    cursor: pointer;
}

.add-detail:hover {
    background: #FAFAFA;
    border: 1px solid #7B3A3B;
    border-radius: 8px;
    width: 100%;
    padding: 10px;
    cursor: pointer;
}

/*modal*/
.box-detail-shipping {
    width: 1100px !important;
    box-shadow: none !important;
    max-width: none !important;
}

.card-box {
    margin: 8px;
}

/*modal*/


/*setting*/

.tab-menu-template {
    background: white;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    height: 130px;
}

.tab-content {
    padding: 14px;
}

.text-menu-nav.active {
    background: #F1553E;
    color: white;
}

.text-menu-nav {
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
    color: black;
    display: flex;
    align-items: center;
    padding: 10px;
    justify-content: center;
}

.text-menu-nav:hover {
    text-decoration: none;
    background: #F1553E;
    color: white;
}

.tab-content-template img:hover {
    border: 1px solid #F1553E;
    border-radius: 4px;
    cursor: pointer;
}

.tab-content-template img {
    max-height: 60px;
}

.menu-items {
    margin-bottom: 0 !important;
}

.box-edit-template {
    width: 100%;
}

.tool-move-box {
    height: fit-content;
    border-radius: 4px;
    top: 0;
    right: 0;
    padding: 2px;
    display: flex;
    justify-content: flex-end;
}

.tool-move-box button {
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 4px;
}

.form-flash, .form-key, .form-banner, .form-top-product, .form-content, .form-coupon, .form-center, .form-brand {
    position: relative;
    /*float: left;*/
    width: 100%;
}

.form-banner {
    margin-bottom: 15px;
}

.form-key {
    margin-bottom: 15px;
    text-align: center;
}

.form-key > img {
    max-height: 96px;
}

.form-flash {
    padding: 15px;
    text-align: center;
}

.form-flash > img {
    max-height: 156px;
    margin-bottom: 16px;
}

.form-top-product {
    padding: 40px;
    text-align: center;
}

.form-top-product img {
    max-width: 550px;
}

.form-content {
    margin-top: 10px;
    padding: 10px 40px;
}

.icon-rank-9 img {
    max-width: 30px;
}

.form-coupon {
    padding: 40px;
}

.header-content {
    display: flex;
    align-items: center;
    color: #111111;
    font-weight: 500;
    font-size: 20px;
}

.line-content {
    height: 2px;
    background: linear-gradient(90.32deg, #F1553E 0.08%, #FBB02A 106.32%);
    margin: 15px 0 30px 0;
}

.sticky {
    position: -webkit-sticky;
    position: sticky !important;
    top: 28%;
}

.img-article {
    border: 0.5px dashed #CDCDCD;
    background: #FFF;
    height: 203px;
    width: 100%;
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

.img-article-content {
    border: 0.5px dashed #CDCDCD;
    background: #FFF;
    /*height: 150px;*/
    width: 100%;
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    aspect-ratio: 1/1;
}

/*.img-article-content-8 {*/
/*    border: 0.5px dashed #CDCDCD;*/
/*    background: #FFF;*/
/*    !*height: 150px;*!*/
/*    width: 100%;*/
/*    color: #aaa;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    flex-direction: column;*/
/*    overflow: hidden;*/
/*    aspect-ratio: 16/9;*/
/*}*/

.img-news-views {
    border: 0.5px dashed #CDCDCD;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 300px;
    width: 300px;
    overflow: hidden;
}

.picture, .video {
    width: 100%;
    aspect-ratio: 16/9;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    border: 1px dashed #878787;
    border-radius: 0.5px;
    cursor: pointer;
    transition: color 300ms ease-in-out, background 300ms ease-in-out;
    outline: none;
    overflow: hidden;
    float: left;
    font-size: 12px;
}

.picture:hover, .video:hover {
    color: #777;
    background: #ccc;
}

.picture_input {
    display: none;
}

.picture_img {
    width: 100%;
}

.frame_main_set {
    width: 100%;
    aspect-ratio: 1/1;
    background: #ddd;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #aaa;
    border: 1px dashed #878787;
    border-radius: 0.5px;
    transition: color 300ms ease-in-out, background 300ms ease-in-out;
    outline: none;
    overflow: hidden;
    float: left;
    font-size: 12px;
    flex-wrap: wrap;
}

.frame_sub_set {
    width: 89%;
    aspect-ratio: 16/9;
    background: #ddd;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #aaa;
    border: 1px dashed #878787;
    border-radius: 0.5px;
    transition: color 300ms ease-in-out, background 300ms ease-in-out;
    outline: none;
    overflow: hidden;
    float: left;
    font-size: 12px;
    flex-wrap: wrap;
}

/*template height light*/
/* Slideshow container */
.slideshow-container {
    margin: auto;
    overflow: hidden;
    width: 100%;
    border-radius: 12px;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot.active,
.dot:hover {
    background-color: #F1553E;
}

/* Fading animation */
/*.fade {*/
/*    animation-name: fade;*/
/*    animation-duration: 1.5s;*/
/*}*/

@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

.btn-dot {
    bottom: 5%;
    text-align: center;
    position: absolute;
}

.mySlides {
    text-align: center;
}

.height-light-main {
    float: left;
    overflow: hidden;
    display: flex;
    justify-content: center;
    width: 59%;
    padding-right: 10.5px;
    position: relative;
    max-height: 245px;
}

.height-light-sub {
    float: left;
    width: 41%;
}

.height-light-sub1, .height-light-sub2 {
    height: 118px;
}

.height-light-sub1, .height-light-sub2 {
    overflow: hidden;
}

.height-light-sub1 {
    margin-bottom: 10.5px;
}

.border-radius-12 {
    border-radius: 12px;
}

/*template height light*/


.input-img-banner {
    margin-bottom: 10px;
}

.scrollbar-input {
    max-height: 275px;
    overflow-x: hidden;
}

.gallery-set {
    width: 100%;
    float: left;
    padding: 10px;
    background: #F6F6F6;
    border-radius: 8px;
}

.gallery-input {
    width: 100%;
    float: left;
}

.picture_main_set {
    width: 100%;
    aspect-ratio: 1/1;
}

.picture_sub_set {
    width: 89%;
    aspect-ratio: 16/9;
}

.picture_sub_set1 {
    width: 100%;
    aspect-ratio: 1/1;
}

.picture_sub_set2 {
    width: 100%;
    aspect-ratio: 16/9;
}

.picture_main_set, .picture_sub_set, .picture_sub_set1, .picture_sub_set2 {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    border: 1px dashed #878787;
    border-radius: 0.5px;
    cursor: pointer;
    transition: color 300ms ease-in-out, background 300ms ease-in-out;
    outline: none;
    overflow: hidden;
    float: left;
    font-size: 12px;
}

.set_picture_input {
    display: none;
}

.picture_img {
    width: 100%;
}

.modal-dialog-centered {
    align-items: center;
}

/*menu-setting*/

.border-box-menu {
    border-radius: 6px;
    background: #FAFAFA;
    padding: 10px;
    height: 100%;
}


.delete-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.delete-icon {
    background: #F1553E;
    color: #FFFFFF;
    border-radius: 50%;
    position: absolute;
    font-size: 10px;
    padding: 2px 6px;
    border: none;
    cursor: pointer;
    z-index: 3;
}

.font-878787 {
    color: #878787;
}

.img-key {
    border: 1px dashed #AEAEAE;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main_banner_domo, .sub_banner_domo_1, .sub_banner_domo_2 {
    border: 1px dashed #AEAEAE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.main_banner_domo {
    width: 100%;
    aspect-ratio: 1/1;
}

.sub_banner_domo_1 {
    width: 100%;
    height: -webkit-fill-available;
    overflow: hidden;
}

.sub_banner_domo_2 {
    width: 100%;
    aspect-ratio: 1/1;
}

.frame-product-form {
    background: #FFFFFF;
    border: 0.5px dashed #CDCDCD;
    width: 100%;
    height: 96px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.border-active {
    border: solid 1px #04B4A9;
}

/*seo*/

.card-seo {
    background: #FFFFFF;
    box-shadow: 0px 1px 22px rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    padding: 26px;
}

.search-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 25px;
}

.search-box input {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 7px 8px 7px 16px;
    border: 1px solid #DEDEDE;
    border-radius: 6px;
    width: 100%;
}

.search-box i {
    position: absolute;
    margin-right: 13px;
}

.category-box {
    background: #FFF9F9;
    color: #7B3A3B;
    cursor: pointer;
    padding: 13px 20px;
    display: flex;
    justify-content: space-between;
}

.tag-box {
    background: #FFFFFF;
    border: 1px solid #D6D6D6;
    border-radius: 4px;
    padding: 15px;
}

.tag-seo {
    background: #EFEFEF;
    border-radius: 4px;
    padding: 5px 8px;
    color: #878787;
    cursor: pointer;
    margin-bottom: 3px;
}

.tag-seo input {
    border: none;
    background: #EFEFEF;
    width: 70px;
}

.box-top-product-form {
    border: 1px solid #E9E9E9;
    border-radius: 8px;
    padding: 14px;
    position: relative;
}

.box-default-form {
    position: relative;
}

.header-top-product {
    background: #F9F9F9;
    border-bottom: 1px solid #D7D7D7;
    text-align: center;
    color: #373737;
    height: 50px;
    align-items: center;
    font-weight: bold;
}

.body-top-product {
    border-bottom: 1px solid #D7D7D7;
    height: 110px;
    align-items: center;
    text-align: center;
}

.body-top-product img {
    max-height: 87px;
    max-width: 63px;
}

/*loading*/
.loader {
    width: 16em;
    height: 8em;
    position: relative;
    overflow: hidden;
}

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    bottom: 0;
}

.loader::before {
    width: inherit;
    height: 0.2em;
    background-color: hsla(0, 0%, 85%);
}

.loader::after {
    box-sizing: border-box;
    width: 50%;
    height: inherit;
    border: 0.2em solid hsla(0, 0%, 85%);
    border-radius: 50%;
    left: 25%;
}

.loader span {
    position: absolute;
    width: 5%;
    height: 10%;
    background-color: #F1553E;
    border-radius: 50%;
    bottom: 0.2em;
    left: -5%;
    animation: 2s linear infinite;
    transform-origin: 50% -3em;
    animation-name: run, rotating;
}

.loader span:nth-child(2) {
    animation-delay: 0.075s;
}

.loader span:nth-child(3) {
    animation-delay: 0.15s;
}

@keyframes run {
    0% {
        left: -5%;
    }
    10%, 60% {
        left: calc((100% - 5%) / 2);
    }
    70%, 100% {
        left: 100%;
    }
}

@keyframes rotating {
    0%, 10% {
        transform: rotate(0deg);
    }
    60%, 100% {
        transform: rotate(-1turn);
    }
}

.load-center {
    margin: 0;
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*loading*/

.tab-content-padding-0 {
    padding: 0;
}

.index-icon {
    display: flex;
    justify-content: center;
}

.index-icon .icon-box {
    text-align: center;
    color: #7B3A3B;
    font-size: 20px;
    margin: 0 20px;
}

.icon-box img {
    max-width: 96px;
}

/*form flash sale*/

.content-form {
    float: left;
    width: 100%;
}

.flash-sale {
    text-align: center;
}

.head-index-img {
    width: 320px;
}

.content-flash-sale {
    margin-top: 20px;
}

.real-time {
    display: flex;
    width: 35%;
    float: left;
    align-items: center;
    color: #F1553E;
    margin-top: 15px;
}

.time-duration {
    width: 65%;
    float: left;
    box-shadow: 0px 2px 11px 0px #7A7A7A4D;
    border-radius: 25px;
    padding: 8px;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.time-down-view-tab .item-counter-down {
    border: solid 1px #CDCDCD;
    padding: 8px !important;
    width: 50px;
    border-radius: 8.8px !important;;
    color: #F1553E !important;;
    background: #ffffff !important;
    text-align: center;
    display: unset !important;
    font-size: 30px !important;
}

.line-head {
    background: linear-gradient(272.85deg, #FBB02A 12.78%, #FD6C5F 144.45%);
    height: 16px;
}

.time-duration-inactive.active, .time-duration-inactive:hover {
    background: #F1553E;
    border-radius: 21px;
    padding: 8.5px 23.38px;
    width: fit-content;
    display: flex;
    align-items: center;
    color: white;
    float: left;
}

.box-promotion-tab {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    width: 100%;
}

.product-2 {
    width: 33.33%;
    padding: 10px;
    float: left;
}

.product-flash-sale {
    width: 100%;
    display: flex;
    border-radius: 16px;
    background: #F6F6F6;
    border: 1px solid #E0E0E0;
    min-height: 188px;
}

.img-flash-sale {
    margin-right: 15px;
    padding: 16px;
}

.text-flash-sale {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.text-flash-sale p {
    font-weight: bold;
    font-size: 16px;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    margin: unset;
    height: 48px;
}

.text-name-flash-sale {
    padding: 16px 10px 0 0;
    text-align: left;
}

.date-open-sale {
    background: #fab127;
    border-radius: 0px 0px 8px 8px;
    font-weight: 500;
    font-size: 14px;
    color: white;
    padding: 5px;
    margin-top: 8px;
}

.product-sale-out {
    background: #7B3A3B;
    border-radius: 0px 0px 8px 8px;
    font-weight: 500;
    font-size: 14px;
    color: white;
    padding: 5px;
    margin-top: 8px;
}

.img-flash-sale img {
    max-width: 100px;
    max-height: 120px;
}

.progress-bar-sale {
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background: linear-gradient(90.32deg, #F1553E 0.08%, #FBB02A 106.32%);
    transition: width 0.6s ease;
}

.price-product-list {
    display: flex;
    align-items: center;
    height: 30px;
}

.discount {
    color: #FFFFFF;
    background-color: #ED1C24;
    padding: 0 5px;
    border-radius: 3.04348px;
}

.margin-b-admin {
    margin-bottom: 0 !important;
}

.coupon-text {
    display: flex;
    justify-content: center;
    position: relative;
    text-align: center;
}

.condition-coupon {
    position: absolute;
    bottom: 7%;
    color: white;
}

.coupon-text img {
    max-width: 270px;
}

.modal-700 {
    max-width: 700px !important;
}

.product-other-search {
    border: solid 1px #DEDEDE;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    font-size: 14px;
}

.product-other-search img {
    max-width: 70px;
    max-height: 100px;
}

.header-home-form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.text-home-form {
    font-style: italic;
    font-weight: 600;
    background-color: #D72314;
    color: white;
    font-size: 35px;
    padding: 0 120px;
    border-radius: 15px 15px 0 0;
}

.center-first-1, .center-first-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.center-first-1 {
    width: 100%;
    overflow: hidden;
    max-height: 399px;
    border-radius: 12px;
}

.center-first-2 {
    width: 100%;
    overflow: hidden;
    max-height: 193px;
    border-radius: 12px;
}

.box-btn-description {
    position: absolute;
    margin-bottom: 20px;
}

.form-center {
    margin: 28px 0;
}

.box-content {
    background: #FFFFFF;
    border-radius: 16px;
    filter: drop-shadow(0px 1px 13px rgba(0, 0, 0, 0.15));
    margin-bottom: 15px;
}

.img-content {
    height: 130px;
    overflow: hidden;
}

.img-content img {
    border-radius: 16px 16px 0 0;
}

.text-content {
    padding: 10px 16px;
    min-height: 175px;
}

.head-content {
    font-size: 20px !important;
    min-height: 60px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.head-content a {
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-size: 20px;
    color: #7B3A3B;
    text-align: center;
    max-height: 60px;
}

.short-content {
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-size: 14px;
    min-height: 63px;
    margin: 10px 0;
}

.read-more a {
    color: #F1553E !important;
}

/*home form*/
.one-product {
    float: left;
    background: #FFFFFF;
    box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin: 0 14px 28px 14px;
    text-align: center;
    width: 16.6%;
    height: 265px;
}

.img-one-product {
    height: 120px;
}

.img-one-product img {
    max-width: 90px;
    max-height: 120px;
}

.one-product .text {
    font-weight: bold;
    font-size: 14px;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-align: left;
    height: 40px;
    padding: 0 10px;
    margin-bottom: 10px;
}

.btn-product-1 .box-btn-add-to-cart {
    padding: 5px;
}

.box-head-coupon {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-coupon {
    font-size: 50px;
    font-weight: bold;
    color: #7B3A3B;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.line-short {
    background: linear-gradient(90.32deg, #F1553E 0.08%, #FBB02A 106.32%);
    width: 155px;
    height: 5px;
}

.box-best-seller {
    width: 100%;
}

.seller-left {
    width: 25%;
    float: left;
    background: #F1553E;
    height: 100%;
}

.seller-right {
    width: 75%;
    float: left;
    background: linear-gradient(90.32deg, #F1553E 0.08%, #FBB02A 106.32%);
    height: 100%;
}

.bg-img-left {
    background: url(image/seller-left.png);
}

.bg-img-right {
    background: url(image/seller-right.png);
}

.category-set {
    margin: 20px;
    color: white;
}

.best-product {
    margin: 20px;
    background-color: white;
    border-radius: 16px;
    padding: 10px;
}

.box-tab-conten.tab-content {
    padding: 0px;
    box-shadow: none;
}

.category-set-sub.active {
    background-color: white !important;
    padding: 10px;
    color: #F1553E !important;
    border-radius: 6px;
    border-left: solid 10px #FBB02A;
}

.category-set-sub {
    color: white;
    padding: 10px;
}

.category-set-sub:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8464635854341737) 85%, rgba(241, 85, 62, 0.5019257703081232) 100%);
    color: #F1553E !important;
    border-radius: 6px !important;
    border-left: solid 10px #FBB02A;
}

/*pre-order*/

.preorder-bg {
    background: #FFFFFF;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0px 1px 22px rgba(0, 0, 0, 0.04);
}

.head-nav .nav-pills .nav-link.active {
    background: #F1553E;
    border-radius: 67px;
    color: #FFFFFF;
}

.head-nav .nav-pills .nav-link {
    background: #FFF3F1;
    border-radius: 67px;
    color: #F1553E;
}

.date-box input {
    background: #FFFFFF;
    border-radius: 4px;
    color: #878787;
    border: 1px solid #DEDEDE;
    padding: 7px 8px 7px 16px;
}

.date-box-pro input {
    background: #FFFFFF;
    border-radius: 4px;
    color: #878787;
    border: 1px solid #DEDEDE;
    padding: 7px 8px 7px 16px;
    width: 100%;
}

.line-topic {
    border-top: 4px solid #F1553E;
    width: 13%;
    margin-top: -10px;
    margin-bottom: 30px;
}

.btn-preorder {
    background: rgba(24, 85, 202, 0.06);
    border-radius: 30px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    color: #1855CA;
    width: 60%;
    border: none;
}

.btn-close-preorder {
    background: #FFF3F1;
    color: #F1553E;
    border-radius: 30px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    width: 60%;
    border: none;
}

.box-detail {
    border: 1px solid #CDCDCD;
    border-radius: 8px;
    padding: 16px;
}

.detail-product img {
    max-height: none;
}

.icon-search {
    border: 1px solid #ced4da;
    padding: 0 10px;
    border-radius: 0 2px 2px 0;
}

/*pre-order*/
.product-9 {
    float: left;
    width: 20%;
    padding: 5px;
}

.box-product-9 {
    background: #FFFFFF;
    box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
    width: 100%;
}

.icon-rank-9 {
    position: absolute;
    display: flex;
    justify-content: center;
    right: 8px;
    top: -7px;
}

.icon-rank-9 span {
    color: white;
    font-size: 12px;
    font-weight: 400;
    position: absolute;
    top: 5px;
}

.date-cancel-sale {
    background: #F1553E;
    border-radius: 0 0 8px 8px;
    font-weight: 500;
    font-size: 14px;
    color: white;
    padding: 5px;
    margin-top: 8px;
}

.product-9 .text {
    font-weight: bold;
    font-size: 14px;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-align: left;
    height: 45px;
    padding: 0 5px;
}

.price-product-list {
    height: 30px;
    margin-top: 5px;
    justify-content: center;
    display: flex;
    align-items: center;
}

.delete-top-product {
    position: absolute;
    right: 5px;
    top: 5px;
    border: solid 1px #e63431;
    border-radius: 4px;
    width: 25px;
    height: 25px;
    text-align: center;
    cursor: pointer;
}

.img-brand-1 {
    overflow: hidden;
    border: 0.5px dashed #CDCDCD;
    background: #F4F4F4;
    height: 63px;
    width: 100%;
}

.img-brand-2 {
    overflow: hidden;
    border: 0.5px dashed #CDCDCD;
    background: #F4F4F4;
    height: 41px;
    width: 100%;
}

.img-brand-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    border: 0.5px dashed #CDCDCD;
    background: #F4F4F4;
    height: 75px;
}

.brand-head {
    display: flex;
    justify-content: center;
    align-items: center;
}

.font-brand-head {
    position: absolute;
    color: #FFFFFF;
    font-size: 28px;
}

.brand-box-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.btn-book {
    border: 1px solid #CDCDCD;
    background: #FFFFFF;
    border-radius: 4px;
    color: #111111;
    padding: 5px 10px;
}

.dropdown-toggle {
    white-space: nowrap;
}

.contain-brand {
    background: #FFFFFF;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.06);
    border-radius: 0 0 16px 16px;
    padding: 20px;
    width: 100%;
    margin-bottom: 30px;
}

.head-news {
    font-size: 40px;
}

.video-sale {
    display: flex;
    justify-content: center;
    padding: 25px;
}

.link-video {
    display: flex;
    justify-content: center;
    min-height: 420px;
    min-width: 1000px;
}

.box-video-news {
    width: 70%;
    border: 10px solid #F1553E;
    border-radius: 10px;
}

.area-content-article:hover {
    border: solid 1px #F1553E;
}

.width-article > .widthArticle {
    width: 100% !important;
}

.set-row {
    padding: 0 30px;
}

.one-img-article-slide {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 80px;
    background-color: white;
    margin-bottom: 10px;
}

.box-delete {
    position: absolute;
    right: 5px;
    top: 5px;
}

.img-create-hover:hover {
    border: solid 1px #00519A;
    border-radius: 4px;
}

.order-detail-bg table tbody tr td {
    background-color: #ffffff;
}

.box-button-update {
    position: fixed;
    bottom: 20px;
    padding: 15px;
    width: 98%;
}

.code-box {
    width: 100%;
    padding: 15px;
    border: solid 1px #dedede;
    border-radius: 5px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.highlight {
    height: 250px;
    background-color: rgba(255, 188, 178, 0.48);
}

.product-review {
    background: #F9F9F9;
    display: flex;
    padding: 15px;
    border-radius: 14px;
    border: 1px solid #CDCDCD;
    justify-content: space-between;
    align-items: center;
}

.box-reply-comment {
    border-radius: 8px;
    background: #F9F9F9;
    margin: 10px 0 0 5%;
    padding: 10px;
}

.file-reviews {
    float: left;
    margin-right: 10px;
}

.file-reviews img {
    max-height: 150px;
}

.file-reviews video {
    max-height: 150px;
}

.header-setting {
    font-size: 18px;
    text-align: center;
    color: #F1553E;
    margin-bottom: 10px;
}

/*link*/
.link-product {
    color: #333333;
}

.link-product:hover {
    color: #333333;
}

/*link*/

.image-demo-slide {
    float: left;
    width: 25%;
    margin: 0px 10px;
}

.detail-box img {
    max-width: 900px;
}

@media only screen and (min-width: 1200px) {
    .display-tablet, .display-tablet-mobile {
        display: none !important;
    }
}

@media only screen and (max-width: 1200px) and (min-width: 1001px) {
    .display-tablet, .display-tablet-mobile {
        display: none !important;
    }
}

/*review*/
.product-review-box {
    width: 100%;
    display: flex;
    border-radius: 16px;
    background: #ffffff;
    height: 180px;
    padding: 15px;
    box-shadow: 2px 5px 16px #DEDEDE;
}

.star-review-product {
    height: 33px;
}

.star-review-size {
    font-size: 16px;
}

.detail-review {
    width: stretch;
}

.text-review {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 5px;
    height: 60px;
    font-size: 14px;
}

.text-review span {
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.img-book-review {
    margin-right: 10px;
    width: 240px;
    overflow: hidden;
    text-align: left;
}

.name-product-review-index {
    margin-bottom: 5px;
    font-size: var(--bs-font-24);
    font-weight: bold;
}

.name-product-review-index a {
    color: var(--bs-vine);
    word-wrap: break-word;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-size: var(--bs-font-18);
    text-decoration: none;
}

.name-product-review-index a:hover {
    text-decoration: none;
    color: var(--bs-vine);
}

.name-user-review {
    text-align: right;
    color: var(--bs-vine);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.img-user-review {
    width: 20px;
    margin-right: 5px;
}

/*review*/

.HW-100P{
    height: 100%;
}