@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i'); 
@import url('https://fonts.googleapis.com/css?family=Taviraj:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=vietnamese'); 
@import url('https://banh.softaz.vn/data/fonts/fontawesome581pro/fontawesome581pro.css');
@import url('https://banh.softaz.vn/data/fonts/zmdi/zmdi.css'); 
@font-face {
    font-family: 'baskerville';
    src: local('baskerville'), url(/fonts/baskerville/baskerville.woff2) format('woff2');
    src: url('/data/fonts/baskerville/baskerville.ttf') format('truetype')
}
@font-face {
    font-family: 'UTM-Alter-Gothic';
    src: url('/data/fonts/UTM-Alter-Gothic/UTM-Alter-Gothic.ttf') format('truetype')
}
:root {
    --safe-top: var(--safe-top);
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: var(--safe-bottom);
    --safe-bottom: env(safe-area-inset-bottom);
    --button-bg:#c11d0d;
    --button-bg-hover:#1d96b2
}
html,body{margin:0px;padding:0px;font-family:Roboto,sans-serif;background-color:#f0f4f5;font-size:14px}
*{text-shadow:none;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;box-sizing:border-box}
a {text-decoration: none;font-family: inherit;color:inherit}

.sep{width:100%;margin:80px auto 20px}
.sep img{margin:auto;display:block}
.sep2{width:250px;margin:30px auto 80px}
.sep2 img{margin:auto;display:block}

.list{max-width:1100px;width:100%;margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap}
.list a{color:#474747}
.list .item{width:300px;margin:15px auto}
.list .image{width:300px;height:auto;display:block;position:relative;overflow:hidden}
.list .image img{width:100%;height:auto;display:block;margin:auto;border-radius:5px}
.list .price{width:100%;height:30px;line-height:30px;margin:0 auto;color:#470000;font-size:16px;font-weight:500;text-align:center}
.list .price span{font-size:1.5rem;font-weight:bold;color:red}
.list .price sup{color:red;margin-left:2px}
.list .name{width:100%;height:35px;line-height:35px;margin:0;padding:0;text-align:center;color:#470000;font-family:'Taviraj', serif;font-size:16px;font-weight:600;overflow:hidden}
.book{width:calc(100% - 20px);margin:10px;display:flex}
.book .minus,.book .plus{width:38px;height:38px;line-height:38px;border:1px solid #ddd;background-color:#F1EBDA;text-align:center;color:#999999;font-size:16px;font-weight:bold;cursor:pointer;float:left;user-select:none;}
.book .minus:hover,.book .plus:hover{background-color:#F4F4F4;}
.book input[type="number"],.book input[type="text"]{width:50px;height:38px;line-height:38px;margin:0;padding:0 5px;border:1px solid #ddd;border-left:0;border-right:0;text-align:center}
.book input[type="number"].incart,.book input[type="text"].incart{background-color:#eee;}
.book .order{width:auto;height:40px;line-height:40px;margin-left:10px;padding:0 8px;border-radius:3px;background-color:#c11d0d;text-align:center;font-size:16px;font-weight:bold;color:#ffffff;cursor:pointer;transition:all 0.3s linear}
.book .order:hover{background-color:#7D0202}
.book .order i{margin-right:8px;color:yellow;display:none}
.book.incart .order i{display:inline-block}

/*Header*/
.PanelHeader{width:100%;height:50px;background-color:#340C0C;position:fixed;top:0;left:0;z-index:999;overflow:initial;padding-top:var(--safe-top)}
.PanelHeader .logo{width:calc(100% - 60px);height:50px;line-height:50px;text-indent:10px;text-align:left;position:absolute;top:0;z-index:1;padding-top:var(--safe-top)}
.PanelHeader .logo i{margin:0 5px}
.PanelHeader .logo a{font-family:UTM-Alter-Gothic;font-size:26px;font-weight:400;color:#FFBF43 !important;}
.PanelHeader i.fa-shopping-cart{font-size:1.5rem;color:white;position:absolute;right:20px;top:calc(15px + var(--safe-top));top:calc(15px + env(safe-area-inset-top))}
.cartcount{width:20px;height:20px;line-height:20px;padding:0;border-radius:50%;color:#fff;background-color:#f00;font-size:0.8rem;display:flex;align-items:center;justify-content:center;position:absolute;top:calc(5px + var(--safe-top));right:5px;}
.cartalert{height:40px;line-height:30px;padding:5px 10px;border-radius:5px;color:yellow;background-color:#f00;text-align:center;display:block;position:absolute;top:calc(50px + var(--safe-top));right:5px;cursor:pointer;display:none;transition:all 0.3s;}
.cartalert.active{display:block;}
.cartalert a{font-size:16px;font-weight:bold;color:yellow !important;}
.cartalert .fa-times{margin-left:10px;}
.cartalert .fa-triangle{position:absolute;top:-2px;right:5px;border:solid #f00;border-width:0 8px 8px 0;display:inline-block;padding:8px;transform:rotate(-135deg);z-index:-1}

/*Footer*/
.PanelFooter{width:100%;height:calc(50px + var(--safe-bottom));border-top:1px solid #A3A3A3;background:#F9F9F9;position:fixed;bottom:0;left:0;z-index:3000;box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);padding-bottom:var(--safe-bottom) !important;}
.PanelFooter ul{margin:0;padding:0;display:flex;justify-content:space-between}
.PanelFooter li{width:25%;height:100%;list-style:none;display:inline-block;vertical-align:top;text-align:center;position:relative}
.PanelFooter a,.PanelFooter a:visited{line-height:1.5rem;font-size:12px;font-weight:400;color:#A1A1A1;display:block}
.PanelFooter a.on,.PanelFooter a.on i{color:#8FC742;}
.PanelFooter i{width:100%;height:1.5rem;line-height:1.5rem;margin:3px 0 0;color:green;display:block;text-align:center;font-size:20px}
.PanelFooter img{max-width:100%;height:1.5rem;border-radius:50%;display:block;margin:3px auto 0}

/*Homepage*/
.PanelHomepage{width:100vw;height:100vh;margin:0;padding:0;top:0;left:0;padding-top:var(--safe-top,0);overflow:auto;background:url('images/bg.jpg') #f0f4f5}
.PanelHomepage .list{margin:20px auto}
.PanelHomepage .policy{width:calc(100% - 20px);margin:30px auto 150px;text-align:justify;font-family:'Taviraj',serif;font-size:16px;line-height:1.33;color:#470000}
.PanelHomepage .policy h2{width:calc(100%);font-family:'Taviraj', serif;color:#470000;font-size:30px;font-weight:500;text-align:center}
.PanelHomepage .policy p{font-family:'Taviraj', serif;font-size:16px !important;color:#470000;line-height:1.33}

/*Login*/
.PanelPersonLogin .logo{display:none !important}

/*Cart*/
.cartheader{width:100%;height:100px;position:fixed;top:0;left:0;z-index:99999;background-color:#fff;border-bottom:1px solid #ccc;}
.cartheader header{width:100%;height:50px;line-height:50px;background-color:rgb(52, 12, 12);color:#fff;font-size:16px;font-weight:bold;text-align:center;text-transform:uppercase;position:relative;}
.cartheader header i{width:30px;height:30px;margin:10px;position:absolute;top:0;left:0;font-size:25px;color:white}
.cartheader nav{margin:auto;padding:20px 0 5px;background-color:#fff;display:flex}
.cartheader nav a{color:inherit !important}
.cartheader .status{width:25%;margin-right:5px;font-size:12px;font-weight:500;color:black;text-align:center;position:relative;display:inline-block;vertical-align:top;}
.cartheader .status span{width:20px;height:20px;border:1px solid #7D0202;border-radius:50%;background-color:#fff;position:absolute;top:-30px;left:calc(50% - 10px);display:block;}
.cartheader .status.complete span{background-color:#7D0202;display:block;}

.cartbody{padding:100px 0 150px;position:relative}
.cartbody h2{width:100%;font-size:1.6rem;text-align:center}

.cartbody .info,.cartbody .payment{max-width:1100px;width:calc(100% - 20px);margin:20px auto 0;padding:10px;background-color:white;border:1px solid #ccc}
.cartbody .info > div{width:100%;padding:0;margin:10px 0;display:flex}
.cartbody .info > div > label {width:95px;height:40px;line-height:40px;margin:0;padding-right:5px;text-align:right;overflow:hidden}
.cartbody .info > div > span,.cartbody .info > div > p {width:auto;height:40px;line-height:40px;margin:0;padding:0;text-align:left}
.cartbody .info > div > p{height:auto}
.cartbody .info > div > input[type="text"],.cartbody .info > div > input[type="number"],.cartbody .info > div > select,.cartbody .info > div > textarea {
    width:calc(100% - 100px);height:40px;margin:0;padding:5px;border-radius:5px;border:1px solid #aaa;
}
.cartbody .info .error label{
    color:red
}
.cartbody .info .error input[type="text"],.cartbody .info .error textarea{
    border-color:red
}
.cartbody .info [name="DateFrom"] option{text-align:right}

.cartbody .payment{padding:20px}
.cartbody .payment .bank{display:flex;flex-wrap:wrap;justify-content:flex-start;}
.cartbody .payment .bank img{max-width:150px;max-height:40px;margin:5px;padding:5px;border:1px solid #D09D2C;transition: all 0.5s}
.cartbody .payment button{height:40px;line-height:40px;padding:0 10px;border:0;background-color:#7D0202;color:#fff;font-size:16px;font-weight:500;letter-spacing:1px;text-transform:uppercase;cursor:pointer}

.cartbody .paymentreturn{background-color:white;margin:20px;padding:20px}

.cartbody .list{width:calc(100% - 30px);margin:15px auto;padding:15px;background-color:white}
.cartbody .item{width:100%;margin:0 0 15px;display:flex;padding-bottom:15px;border-bottom:1px solid #ccc}
.cartbody .item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.cartbody .item > div:first-child{width:80px;height:80px;margin-right:10px;border-radius:5px;overflow:hidden}
.cartbody .item > div:first-child img{width:100%;height:auto;display:block;margin:auto;border-radius:5px}
.cartbody .item > div:last-child{width:calc(100% - 90px);min-height:80px}
.cartbody .price{text-align:left;font-weight:400}
.cartbody .book{width:auto;margin:0;float:right}
.cartbody .plus,.cartbody .minus{background-color:white}
.cartbody .item [name="delete"]{color:red;font-size:0.8rem;line-height:40px}
.cartbody .select2-container .select2-selection--single{height:40px !important}
.cartbody .select2-selection__rendered{line-height:40px !important}
.cartbody .select2-selection__arrow{height:40px !important}
.cartbody .xdsoft_datetimepicker{z-index:10 !important}

.cartfooter{width:100%;padding:5px 10px;background-color:#fff;position:fixed;bottom:0;left:0;z-index:99999;border-top:1px solid #ccc;}
.cartfooter div{height:25px;line-height:25px;text-align:right;color:#aaa;display:flex}
.cartfooter label{width:calc(50% - 10px);height:25px;line-height:25px;font-size:16px;color:black;text-align:left}
.cartfooter span{width:50%;height:25px;line-height:25px;color:black;font-size:16px;font-weight:bold}
.cartfooter ul{display:flex;list-style:none;margin:0;padding:0}
.cartfooter li{width:50%;height:30px;line-height:30px;padding:0 5px;font-size:1rem;color:#aaa;}
.cartfooter li b{color:red}
.cartfooter li:last-child{text-align:right}
.cartfooter button,.cartfooter a{width:100%;height:35px;line-height:35px;margin:10px 0;padding:0;border:0;background-color:#ed2f2e;color:#fff !important;font-size:16px;font-weight:500;letter-spacing:1px;text-transform:uppercase;cursor:pointer;display:block;text-align:center}

.Panel{background:url('images/bg.jpg') #f0f4f5}
.PanelCartList,.PanelCartInfo,.PanelPayment,.PanelPaymentReturn{
    width:100vw;height:100vh;margin:0;padding:0;top:0;left:0;padding-top:var(--safe-top,0);overflow:auto
}

.AZMain.mobile{padding:50px 0 100px !important;margin:0 !important;min-height:100vh;overflow:auto}
.AZMain.mobile.AZPopupMain{min-height:unset;padding:0 !important}
.AZMain.mobile .main{background-color:rgba(255,255,255,0.6)}
.AZMain.mobile .main table,.AZMain.mobile .main tfoot{background-color:transparent}
.AZMain.mobile .main thead{top:50px !important}
.AZMain.mobile.AZPopupMain .main thead{top:-10px !important}
.AZMain.mobile .main tbody tr:nth-child(even){background-color:transparent}
.AZMain.mobile .main tbody tr:hover,.AZMain.mobile .main tbody tr:nth-child(even):hover{background-color:rgba(255,255,255,1)}