form{position:relative; top: 0px; left: 0px; width: 100%; height:auto; overflow-x:hidden;}
.main{position:relative; top: 0px; left: 0px; width: 100%; height:auto; min-height: 100vh; max-width: 100%; padding: 0px; margin: 0px; background-color: #fff; display:grid; grid-template-columns: 1fr; grid-template-rows: max-content max-content 1fr max-content;}
.container{position:relative; top: 0px; left: 0px; width: 100%; height:auto; max-width: 1200px; padding: 0px 15px; margin: 0px auto;}
.banner{position:relative; top: 0px; left: 0px; width: 100%; height:auto; border-bottom: 2px solid #024b42; background-color: #fff; background-repeat: no-repeat; background-size:cover; background-position:center;}
.banner .container{ display:grid; grid-template-columns: 100px 1fr; height: 100%; align-items:center;}
.banner .logo{position:relative; top: 0px; left: 0px; width: 100%; height: auto; aspect-ratio: 1; background-image: url(../images/logo.png); background-repeat: no-repeat; background-size: auto calc(100% - 20px); background-position: center;}
.banner .banner-title{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 20px 0px; text-align:left;}
.banner .banner-title > div{position:relative; top: 0px; left: 0px; width: max-content; height:auto; white-space:nowrap; overflow:hidden; pointer-events:none;}
.banner .banner-title span{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; display:block; color: #444; font-size: 18px; text-transform: uppercase; font-weight: 400;}
.banner .banner-title span:last-child{font-weight: bold; letter-spacing: 2px; font-size: 28px; line-height: 36px; color: #024b42;}

.customer-info{position:absolute; top: 10px; left:auto; right: 15px; bottom: auto; width: max-content; height:auto; color: #024b42;}
.customer-info span { position:relative; top: 0px; left: 0px; width:max-content; height:auto; white-space:nowrap; display:grid; grid-template-columns: 20px 1fr; grid-column-gap: 0px; cursor:pointer;}
.customer-info span:before{content: ""; position:relative; top: 0px; left: 0px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.customer-info span:first-child:before{content: "\f090";}
.customer-info span:last-child:before{content: "\f08b";}
.customer-info span:last-child{display:none; color: #444;}
.customer-info.logined{display:grid; grid-template-columns: 1fr max-content; grid-column-gap: 20px;}
.customer-info.logined span:first-child{font-weight: bold;}
.customer-info.logined span:first-child:before{content: "\f2bd"; font-weight: 900;}
.customer-info.logined span:last-child{display:grid;}

.customer-review label{color: #666;}

.top-bar{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 10px 0px; line-height: 20px; background-color: rgba(0,55,43, 0.8); color: #fff; border-bottom: 1px solid #0060a1;}
.top-bar .container{display:grid; grid-template-columns: 1fr max-content; grid-column-gap: 10px;}
.top-bar .container .date{line-height: 40px;}

.top-bar:has(.top-menu){padding: 0px; border-bottom: 0px;}
.top-menu{background-color: transparent; border-bottom: 0px; min-height: unset;}
.top-menu .menu > li > a{color: #fff; padding: 10px 15px;}
.top-menu .menu > li > a:hover, .top-menu .menu > li > a.active{background-color: #024b42;}
.top-menu .menu > li > a.active{font-weight: 400;}

.main-body{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.main-body:before{content: "\f2bd"; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--border-color); font-size: 48px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.main-body:after{content: "Bạn phải đăng nhập để tra cứu thông tin"; position:absolute; top: calc(50% + 32px); left: 50%; transform: translateX(-50%); font-size: 22px; width: 100%; height: auto; line-height: 24px; color: var(--border-color); text-align: center; max-width: 100%; padding: 5px;}
.main-body:has(div):before, .main-body:has(div):after{display:none;}

.popup{border-color: #024b42;}
.popup .popup-header{background: #024b42;}

input:focus, textarea:focus, select:focus{border-color: #024b42;}
button:hover, button.hot{background: #024b42;}

.footer{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 20px 0px; background-color: #024b42; color: #fff; background-image: url(../images/footer_bg.png); background-repeat:no-repeat; background-size: auto; background-position: bottom right;}

@media (max-width: 950px) {
    .top-bar .container{grid-template-columns: 1fr;}
    .top-bar .date{display:none;}
}

@media (max-width: 750px) {
    .banner .banner-title span:last-child{font-size: 24px;}
}

@media (max-width: 600px) {
    .banner .container{padding: 0px;}
    .banner .banner-title span:last-child{font-size: 20px;}
    .top-bar .container{grid-template-columns: max-content 1fr;}
    .top-bar .container .date{text-align:right; display:block;}
    .top-bar .container:has(.name:empty) .date{display:block;}
    .top-menu > ul{background-color: #024b42;}
}

@media (max-width: 450px) {
    .banner .container{padding-top: 25px; grid-template-columns: 90px 1fr;}
    .banner .banner-title span:last-child{font-size: 18px; line-height: 24px; letter-spacing: 1px;}
    .customer-info{top: 0px; left: 0px; right: 0px; bottom: auto; padding: 5px 10px; grid-template-columns: 1fr max-content max-content !important; display:grid; width: 100%; background-color: #f0f0f0;}
    .customer-info:before{content: ""; position:relative; top: 0px; left: 0px; width: 100%; height: 100%:}
}