#popupLogin {position: fixed;z-index: 111;top: 0;left: 0;width: 100%;height: 100%;display: none;align-items: center;justify-content: center;background-color: rgba(0,0,0,0.7);overflow: auto}
#popupLogin .formLogin {display: none}
#popupLogin .formLogin.active {display: block}
.contentPopup {width: 500px;padding: 0 30px 30px 30px;background-color: white;border-radius: 20px;margin: 50px auto;position: relative}
.contentPopup .closePopup {position: absolute;top: -30px;right: 0;color: white;cursor: pointer}
.head_PU {margin: 0 -30px 20px -30px;border-bottom: 1px solid #cecece;text-align: center}
.head_PU a {text-transform: uppercase;font-weight: bold;padding: 10px 0;margin: 0 10px;border-bottom: 1px solid transparent;display: inline-block}
.head_PU a.active {border-color: var(--bs-primary);color: var(--bs-primary)}
.contentPopup .input-form {margin-bottom: 10px}
.contentPopup .input-form .text {font-weight: bold;margin-bottom: 5px}
.contentPopup .input-form input[type=text], .contentPopup .input-form input[type=password] {display: block;width: 100%;height: 40px;font-size: 15px;padding: 0 10px;border: 1px solid #cecece}
.contentPopup .form_note {text-align: center}
.contentPopup .form_note a {color: var(--bs-primary)}
.contentPopup .form_note a:hover {color: var(--bs-second)}
.contentPopup .btn_action {margin-bottom: 20px}
.contentPopup .btn_action a {display: block;color: white;text-transform: uppercase;font-weight: bold;text-align: center;background: url(/img/bg_tt.png);line-height: 48px;margin: 0 30px;position: relative}
.contentPopup .btn_action a:before, .contentPopup .btn_action a:after {content: "";display: block;position: absolute;top: 0;left: 100%;width: 30px;height: 48px;background: url(/img/bg-title-hp.svg);background-position: right center}
.contentPopup .btn_action a:before {left: -30px;background-position: left center}
.contentPopup .btn_action a:hover {color: var(--bs-primary)}
.contentPopup .input-form input[type=radio] {margin-left: 40px}

.page_dh {padding: 0 20px 20px 20px;background-color: white;border-radius: 20px;box-shadow: 0 0 10px rgba(0,0,0,0.2);margin-bottom: 50px}
.page_dh .dk-breadcrumb {padding-left: 0}

.cb {clear: both}
.col_left {width: 200px;float: left}
.col_right {width: calc(100% - 230px);float: right}

.cateLeft a {display: block;margin-bottom: 15px;overflow: hidden;text-decoration: none;color: #333;position: relative;line-height: 20px}
.cateLeft a.active, .cateLeft a:hover {color: var(--bs-primary)}

#formAccount {overflow: hidden}
#formAccount .accIMG {width: 172px;float: left;margin-top: 20px;text-align: center}
#formAccount .accIMG .imgc {border-radius: 50%;overflow: hidden;margin-bottom: 20px;background: url(/img/user.png) no-repeat center;border-radius: 50%;overflow: hidden;position: relative}
#formAccount .accIMG .imgc img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover}
#formAccount .accIMG .imgc:before {padding-bottom: 100%;content: "";display: block}
#formAccount .accIMG label input {display: none}
#formAccount .accIMG label:hover {color: var(--bs-primary);cursor: pointer}
#formAccount .accInfo {width: calc(100% - 230px);float: right;overflow: hidden}
#formAccount .accInfo .item {overflow: hidden;margin-bottom: 5px}
#formAccount .accInfo b {width: 115px;float: left;height: 40px;background-color: #eaeaea;font-weight: normal;line-height: 40px;padding-left: 15px;box-sizing: border-box}
#formAccount .accInfo.formDMK b {width: 200px}
#formAccount .accInfo .item div {width: calc(100% - 115px);float: right;height: 40px;border: 1px solid #e0e0e0;border-left: none;box-sizing: border-box;position: relative}
#formAccount .accInfo.formDMK .item div {width: calc(100% - 200px)}
#formAccount .accInfo span {display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: white;padding: 0 20px;font: 15px 'GR';line-height: 38px;box-sizing: border-box}
#formAccount .accInfo input, #formAccount .accInfo select {width: 100%;height: 38px;border: none;outline: none;padding: 0 20px;box-sizing: border-box;display: block;font-size: 15px;background: none}
#formAccount .accInfo .btnSave {float: right;margin-top: 20px;width: 258px;height: 48px;background: url(/img/bg-title-hp.svg) no-repeat center;text-align: center;color: white;font-weight: bold;text-transform: uppercase;line-height: 48px}
#formAccount .accInfo .btnSave:hover {color: var(--bs-primary)}

.infoAccount {background-color: white;padding: 30px 40px 50px 40px;border-radius: 8px}
.menuAccount.block_left {padding-top: 30px;padding-bottom: 10px}
.menuAccount .titleLeft, .infoAccount .tt_other .title {text-transform: none;font-size: 20px;text-transform: uppercase;font-weight: bold;color: var(--bs-second);margin-bottom: 15px}
.infoAccount .tt_other {margin-bottom: 20px}
.infoAccount .editInfo {float: right;text-decoration: none;color: #333;padding-left: 20px;background: url(images/edit.png) no-repeat left bottom 2px;font-weight: 600;line-height: 22px}
.infoAccount .editInfo:hover {color: var(--main-color)}

#formAccount #ChangePassForm.accInfo b {float: none;background: none;padding: 0;height: auto;line-height: 22px;margin-bottom: 5px;display: block;width: auto}
#formAccount #ChangePassForm.accInfo .item div {float: none;width: auto;border-left: 1px solid #e0e0e0}
#formAccount #ChangePassForm.accInfo .item {margin-bottom: 20px}
#formAccount #ChangePassForm.accInfo .btnSave {float: none;margin-top: 0}
#ChangePassForm.accInfo {max-width: 600px;float: left;margin-left: 70px}

.row_dh {background-color: var(--bs-primary);color: white;font-weight: bold;overflow: hidden;padding: 8px 0}
.col_1, .col_2, .col_3, .col_4 {width: 200px;float: left;padding: 0 10px;box-sizing: border-box}
.col_2, .col_3 {width: 150px}
.col_1 {width: calc(100% - 500px)}
.list_dh .item {overflow: hidden;border: 1px solid #cecece;border-top: none;display: block;padding: 6px 0}
.list_dh .item:hover {color: var(--bs-primary)}

.product-info-bottom .btn-second, .product-info-bottom .btn-dk, .contact-pg .form-action .btn, .back_Total a, .spgh-bk .spgh-confirm .btn-second {position: relative;margin: 0 30px;background: url(/img/bg_tt.png);border: none;border-radius: 0;min-width: 0;padding: 0;height: 48px;line-height: 48px}
.product-info-bottom .btn-second:before, .product-info-bottom .btn-second:after, .product-info-bottom .btn-dk:before, .product-info-bottom .btn-dk:after, .contact-pg .form-action .btn:before, .contact-pg .form-action .btn:after, .back_Total a:before, .back_Total a:after, .spgh-bk .spgh-confirm .btn-second:before, .spgh-bk .spgh-confirm .btn-second:after {content: "";display: block;position: absolute;top: 0;left: -30px;width: 30px;height: 48px;background: url(/img/bg-title-hp.svg) no-repeat left center}
.product-info-bottom .btn-second:after, .product-info-bottom .btn-dk:after, .contact-pg .form-action .btn:after, .back_Total a:after, .spgh-bk .spgh-confirm .btn-second:after {background-position: right center;left: 100%}
.product-info-bottom .btn-second:hover, .product-info-bottom .btn-dk:hover, .contact-pg .form-action .btn:hover, .back_Total a:hover, .spgh-bk .spgh-confirm .btn-second:hover {color: var(--bs-primary)}
.product-info-bottom .btn-dk {margin: 0;background: url(/img/bg_btn.png);min-width: 277px}
.product-info-bottom .btn-dk:before, .product-info-bottom .btn-dk:after {display: none}
.product-info-bottom .btn-dk:hover {color: var(--bs-second)}

.infoAccount .tt_other .title span {font-weight: normal;color: #333;text-transform: none;font-size: 15px}
.infoAccount .tt_other .dateDH {float: right;font-size: 15px}
.infoCart {overflow: hidden}
.infoCart .col_dh {width: calc(50% - 15px);float: left;font-size: 15px}
.infoCart .col_dh:nth-child(2n) {float: right}
.infoCart .title_dh {font-weight: bold;padding-bottom: 5px;border-bottom: 1px solid #cecece;text-transform: uppercase;margin-bottom: 15px}
.infoCart .big_tt {font-weight: bold;margin-bottom: 10px}
.infoCart .tt_cart {margin-bottom: 5px}
.row_ctdh {margin-top: 50px;border-bottom: 1px solid #cecece;text-transform: uppercase;overflow: hidden}
.row_ctdh span {color: #333;font-weight: bold}
.cot_1, .cot_2, .cot_3, .cot_4 {float: left;width: 150px;text-align: center;font-weight: bold}
.cot_1 {text-align: left;width: calc(100% - 450px);padding-right: 20px;overflow: hidden}
.cot_3 {font-weight: normal}
.cot_4 {color: var(--bs-second)}
.cot_1 .imgc {width: 80px;height: 80px;float: left;margin-right: 10px;position: relative}
.cot_1 .imgc img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover}
.list_ctdh {margin-bottom: 20px}
.list_ctdh .item {overflow: hidden;padding: 10px 0;border-bottom: 1px solid #cecece;display: flex;align-items: center}
.list_ctdh .cot_1 {display: flex;align-items: center}
.back_Total .totalCart {float: right;font-weight: bold;font-size: 18px;line-height: 48px}
.back_Total .totalCart span {color: var(--bs-second)}
.back_Total a {display: inline-block;color: white}
.product-info-bottom .btn_like {font-size: 24px;display: inline-block;transform: translateY(4px);-webkit-transform: translateY(4px);-moz-transform: translateY(4px)}

.bao_htpp {padding: 20px 17px;margin-bottom: 30px}
.bao_htpp .big_tt {text-transform: uppercase;font-weight: bold;color: var(--bs-second);margin-bottom: 10px;font-size: 18px}
.bao_htpp .col_left {width: 300px;float: left;padding: 20px 15px;box-shadow: inset 0 0 8px rgba(0,0,0,0.2)}
.bao_htpp .col_right {width: calc(100% - 320px);background-color: #faf9f8;box-shadow: inset 0 0 8px rgba(0,0,0,0.2);box-sizing: border-box;padding: 20px}
.searchLeft .tt_left {text-align: center;font-weight: bold;margin-bottom: 5px}
.searchLeft input {display: block;width: 100%;height: 40px;font-size: 14px;box-sizing: border-box;border-radius: 20px;border: 1px solid #ececec;outline: none;margin-bottom: 10px;padding: 0 10px}
.searchLeft .note {position: relative;margin-bottom: 10px;text-align: center}
.searchLeft .note span {display: inline-block;background-color: white;padding: 0 5px;position: relative;z-index: 2}
.searchLeft .note:before {content: "";display: block;width: 100%;height: 1px;background-color: #ececec;position: absolute;top: 50%;left: 0}
.searchLeft select {display: block;width: 100%;height: 40px;border: 1px solid #ececec;border-radius: 20px;outline: none;padding: 0 10px;font-size: 14px;margin-bottom: 10px}
.title_htpp {font-size: 18px;font-weight: bold;margin-bottom: 15px}
.map_htpp {width: 260px;float: left;height: 260px}
.map_htpp iframe {width: 100%;height: 100%}
.info_htpp {width: calc(100% - 280px);float: right}
.info_htpp .item {padding-left: 20px;margin-bottom: 10px;position: relative}
.info_htpp .item i {position: absolute;left: 0;top: 5px;color: var(--bs-second)}
.info_htpp .viewMap, .info_htpp .call {display: block;width: 277px;height: 48px;background: url(/img/bg-title-hp.svg) no-repeat center;margin: 0 auto 10px auto;text-align: center;color: white;line-height: 48px}
.info_htpp .viewMap i {margin-right: 5px;font-size: 13px}
.info_htpp .call {background-image: url(/img/bg_btn.png)}
.info_htpp .call i {margin-right: 5px}
.content_htpp {margin: 20px 0}
.list_htpp {overflow: hidden}
.list_htpp .item {width: calc(50% - 15px);float: left;margin: 0 0 30px 30px;overflow: hidden}
.list_htpp .item:nth-child(2n+1) {clear: both;margin-left: 0}
.list_htpp .icon {width: 40px;height: 40px;float: left;position: relative}
.list_htpp .icon img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: scale-down}
.list_htpp .info {width: calc(100% - 60px);float: right}
.list_htpp .title {font-weight: bold}

.album_htpp {margin-top: 20px}
.slide_htpp .slick-list {width: calc(100% + 20px)}
.slide_htpp .image {margin-right: 20px;border-radius: 10px;overflow: hidden;position: relative}
.slide_htpp .image:before {content: "";display: block;padding-bottom: 66.66%}
.slide_htpp .image img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover}
.slide_htpp .slick-arrow {width: 30px;height: 30px;z-index: 2}
.slide_htpp .slick-arrow:before {font-size: 30px}
.slide_htpp .slick-prev {left: 0}
.slide_htpp .slick-next {right: 0}

.list_ch {max-height: 400px;overflow: auto}
.list_ch .item {padding: 8px 0 8px 30px;position: relative;border-bottom: 1px solid #ececec}
.list_ch .item:before {content: "";display: block;width: 18px;height: 18px;border: 1px solid #cecece;border-radius: 50%;position: absolute;left: 0;top: 11px}
.list_ch .item.active:before {border-color: var(--bs-second)}
.list_ch .item.active .title {color: var(--bs-second)}
.list_ch .item.active:after {content: "";display: block;width: 10px;height: 10px;border-radius: 50%;background-color: var(--bs-second);position: absolute;left: 4px;top: 15px}
.list_ch textarea {display: none}
.dk-footer .footer-top .top-l a {color: white}
.dk-footer .footer-top .top-l a:hover {color: var(--bs-second)}

.alert_bct {padding-top: 15px}
.alert_bct img {max-width: 200px}

@media(max-width: 767px){
    .contentPopup {width: calc(100% - 20px);padding: 0 15px 15px 15px}
    .head_PU {margin: 0 -15px 20px -15px}
    .col_left {width: 100%;margin-bottom: 20px}
    .col_right {width: 100%}
    .infoAccount {padding: 0}
    #formAccount .accIMG {float: none;margin: 0 auto 20px}
    #formAccount .accInfo {width: auto;clear: both;float: none}
    #formAccount .accInfo .btnSave {float: none;display: inline-block}

    .page_dh {padding: 0 10px 10px 10px;margin: 0 -15px 20px -15px;border-radius: 5px}
    .col_1, .col_3 {width: 60%}
    .col_2, .col_4 {width: 40%}

    .infoAccount .tt_other .dateDH {float: none;margin-bottom: 15px}
    .infoCart .col_dh, .infoCart .col_dh:nth-child(2n) {float: none;width: auto;margin-bottom: 20px}

    .cot_4 {display: none}
    .cot_1 {width: 100%;padding-right: 0}
    .cot_2, .cot_3 {width: 50%;text-align: left}
    .list_ctdh .item {display: block}
    .list_ctdh .cot_1 {margin-bottom: 10px}
    .cot_1 .imgc {width: 60px;height: 60px}

    .bao_htpp .col_left {width: 100%}
    .bao_htpp .col_right {width: 100%}
    .map_htpp, .info_htpp {width: 100%;margin-bottom: 15px}

}