Files
du_an_khach_hang/Teahouse/css/style_pc.css

294 lines
33 KiB
CSS
Raw Normal View History

2023-07-06 11:11:29 +07:00
:root{--color-primary:#a88266;--color-secondary:#4e4e4e;--white:#fff;--black:#000;--red:#e80000;--blue:#0083fd;--gray:#a2a2a2;--gray-2:#d9d9d9;--box-shadow:0px 1px 6px rgba(0, 0, 0, 0.2)}
html{font-size:15px}
body{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Roboto,sans-serif;color:#000;word-break:break-word;line-height:1.5;font-weight:400;background-color:#fff;letter-spacing:.15px}
.container{max-width:1220px;width:100%;padding:0 10px;margin:0 auto}
.mb-display{display:none}
.grid{gap:16px}
.box-w{border-radius:15px;background-color:#fff;padding:12px}
.box-empty{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:24px;line-height:28px;width:100%;height:430px;color:var(--red);text-align:center;grid-column:1/-1}
.box-bottom{border-top:1px solid #c6c6c6;padding:32px 0 52px}
.alert-mess{text-align:center;padding:50px 30px;font-size:20px;font-weight:500;color:var(--red);grid-column:1/-1}
.alert-error{padding-left:24px;margin:16px 0;color:var(--red);font-weight:600;line-height:1.5}
.font-roboto{font-family:Roboto,sans-serif}
.font-petrona{font-family:Petrona,serif}
.heading-primary{position:relative;display:inline-block;font-size:32px;font-weight:600;line-height:40px;font-family:Petrona,serif}
.heading-primary::after{content:"";position:absolute;bottom:0;left:0;border-bottom:5px solid #a88266;width:40%}
.heading-primary.page-title{font-size:32px;line-height:62px}
.swiper-btn-custom{display:none;color:#ccc}
.page-padding{padding-top:190px}
.accordion .fa-angle-right{display:none;position:absolute;right:10px;font-size:28px;line-height:16px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s}
.accordion-content-pc{max-height:0;line-height:30px;-webkit-transition:max-height .3s ease-out;-o-transition:max-height .3s ease-out;transition:max-height .3s ease-out;overflow:hidden}
.paging{padding:0 10px 32px;margin-top:42px;text-align:center}
.paging-link.active,.paging-link:hover{color:#fff;background:var(--color-primary);font-weight:500}
.paging-link{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:8px;border-radius:50%;color:#000;font-size:16px;line-height:16px;text-decoration:none;text-transform:capitalize;width:36px;height:36px}
.routing .list{display:-webkit-box;display:-ms-flexbox;display:flex;padding:12px 0;margin-bottom:12px;list-style:none}
.routing .routing-link{position:relative;font-size:14px;font-weight:400;padding:0 10px;text-decoration:none}
.routing .routing-link:first-child{padding-left:0}
.routing .routing-link:last-child{color:var(--color-primary);max-width:700px;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis}
.routing .routing-link:not(:last-child)::before{content:"";position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%) rotate(25deg);-ms-transform:translateY(-50%) rotate(25deg);transform:translateY(-50%) rotate(25deg);width:1px;height:70%;border-right:1px solid #000}
.success-form{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background:rgba(0,0,0,.5);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.success-form .cart-success{width:500px;height:300px;background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:fixed}
.success-form .success-form-svg{display:block;height:80px;width:80px;color:var(--color-primary)}
.success-form .text-cart-success{font-size:24px;font-weight:600;line-height:1.6;padding-top:30px}
.header-cart:hover .cart-ttip{display:block}
.cart-ttip{display:none;position:absolute;background-color:#fff;border-radius:10px;width:400px;height:auto;right:0;top:40px;z-index:3;-webkit-box-shadow:0 1px 6px rgb(0 0 0 / 25%);box-shadow:0 1px 6px rgb(0 0 0 / 25%)}
.cart-ttip .cart-ttip-price-button{border-radius:5px;padding:10px;background:var(--color-primary);text-align:center;margin:0 12px 12px}
.cart-ttip .cart-ttip-item-container{max-height:300px;overflow:auto}
.cart-ttip .cart-ttip-item-container .compare-item{height:auto;margin:0;max-width:unset;-webkit-box-shadow:none;box-shadow:none}
.cart-ttip .cart-ttip .header-null-cart{width:100%!important;text-align:center;padding:30px;color:#000;font-weight:600}
.cart-ttip .header-cart-item-price{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:10px}
.cart-ttip .cart-ttip-price,.compare-item,.header-nav-menu a{display:-webkit-box;display:-ms-flexbox}
.cart-ttip .header-cart-item-price p{font-weight:700;width:auto}
.cart-ttip .cart-ttip-price{padding:10px 20px 10px 10px;border-top:3px solid var(--color-primary);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important;gap:6px;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}
.cart-ttip .cart-ttip-price p{color:#000;width:auto;padding:0;margin:0}
.cart-ttip .cart-ttip-price p:first-child{font-size:15px;font-weight:700;text-transform:uppercase;-webkit-transform:translateY(2px);-ms-transform:translateY(2px);transform:translateY(2px)}
.cart-ttip .cart-ttip-price p:nth-child(2){font-size:13px;font-weight:200;color:var(--color-primary);margin-left:0!important}
.cart-ttip .cart-ttip-price p:last-child{font-size:15px;font-weight:700}
.cart-ttip .compare-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;-webkit-box-shadow:0 1px 8px rgb(0 0 0 / 25%);box-shadow:0 1px 8px rgb(0 0 0 / 25%);padding:10px;border-radius:10px;max-width:360px;background:#fff}
.cart-ttip .compare-item img{width:80px;border:5px}
.cart-ttip .compare-item .compare-item-text{display:inline-block;padding:0 10px;-webkit-box-flex:1;-ms-flex:1;flex:1}
.cart-ttip .compare-item .compare-item-text p{background:0 0;color:#000;padding:0;width:100%;word-break:break-word;font-size:14px;line-height:20px;margin-left:0;height:40px}
.cart-ttip .header-null-cart{width:100%;text-align:center;padding:24px;color:#000;font-size:14px;font-weight:600}
.teahouse-icons{background-image:url(/images/teahouse-icons-map.png);background-repeat:no-repeat;display:inline-block;background-size:106.5px 81.5px}
.icon-angel-down{width:8px;height:5px;background-position:-2px -2px}
.icon-cart{width:21px;height:21px;background-position:-15px -2px}
.icon-heart{width:21px;height:21px;background-position:-41px -2px}
.icon-hearth-fill-black{width:20px;height:18px;background-position:-2px -28px}
.icon-logo-fb{width:23px;height:23px;background-position:-27px -28px}
.icon-logo-instagram{width:23px;height:23px;background-position:-55px -28px}
.icon-logo-twitter{width:23px;height:23px;background-position:-2px -56px}
.icon-logo-youtube{width:23px;height:23px;background-position:-30px -56px}
.icon-mail{width:17px;height:14px;background-position:-58px -56px}
.icon-search{width:21px;height:21px;background-position:-66px -2px}
.icon-user{width:21px;height:21px;background-position:-83px -28px}
.p-item{padding:10px 0;text-align:center}
.p-item:hover .p-cart{display:-webkit-box;display:-ms-flexbox;display:flex}
.p-item .p-img{position:relative;margin-bottom:16px}
.p-item .p-name{font-size:15px;line-height:20px;font-weight:400;margin-bottom:8px}
.p-item .p-price{font-size:16px;font-weight:700}
.p-item .p-price-saleoff{position:absolute;top:8px;right:8px;width:38px;height:38px;font-size:14px;line-height:38px;border-radius:50%;color:#fff;background:#505745;text-align:center}
.p-item .p-cart{position:absolute;bottom:8px;right:8px;width:42px;height:42px;display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#fff}
.p-item .p-cart:hover{-webkit-box-shadow:0 1px 5px rgba(0,0,0,.2);box-shadow:0 1px 5px rgba(0,0,0,.2)}
.review-box{font-size:14px}
.review-box .r-input{width:100%;height:40px;font-size:14px;line-height:40px;padding:10px;border:1px solid #eaeaea;margin-bottom:12px}
.review-box textarea.r-input{height:103px;line-height:18px}
.review-box .r-btn{display:inline-block;height:40px;font-weight:600;line-height:40px;padding:0 30px;background:#6b3915;border:1px solid #6b3915;color:#fff}
.review-box .r-avatar{width:32px;height:32px;font-size:16px;font-weight:600;line-height:32px;text-align:center;border-radius:50%;background:#d9d9d9}
.review-box .r-name{font-weight:600}
.global-header{position:fixed;top:0;left:0;right:0;z-index:9;padding-top:24px}
.global-header .header-top .header-logo{display:-webkit-box;display:-ms-flexbox;display:flex;max-width:132px;margin:0 auto}
.global-header .hearder-menu-mobile{font-size:24px;padding:8px}
.global-header .header-search .search-bar{display:none;position:absolute;top:0;left:0;width:300px}
.global-header .header-search .search-bar-input{line-height:32px;padding:0 10px;border:1px solid #ddd;width:100%}
.global-header .header-search .search-bar-btn-close{position:absolute;width:32px;height:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;top:0;right:0;cursor:pointer}
.global-header .header-navbar .header-navbar-list{list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:36px;font-size:15px;line-height:39px;border-bottom:1px solid #eee;font-family:Petrona,serif}
.global-header .header-navbar .header-navbar-item:hover .sub-menu{display:-ms-grid;display:grid}
.global-header .header-navbar .sub-menu{display:none;-ms-grid-columns:3fr 1fr;grid-template-columns:3fr 1fr;-webkit-box-shadow:0 5px 10px rgb(0,0,0,.2);box-shadow:0 5px 10px rgb(0,0,0,.2);position:absolute;left:0;top:100%;max-height:500px;width:100%;overflow:auto;z-index:9999;background:#fff;padding:20px}
.global-header .header-navbar .sub-menu>:nth-child(2){-ms-grid-row:1;-ms-grid-column:2}
.global-header .header-navbar .sub-item{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;gap:4px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}
.global-header .header-navbar .sub-item:hover{background:0 0}
.global-header .header-navbar .sub-item-link{text-decoration:none;color:#000;font-weight:400;padding:6px 0}
.global-header .header-navbar .sub-item-link:hover{color:var(--color-primary)}
.global-header .header-navbar .sub-item-1:first-child span{font-weight:700;color:var(--color-primary)}
.global-header .header-navbar .sub-item-2{position:relative}
.global-header .header-navbar .sub-item-2 .sub-item-link{font-size:13px;line-height:17px}
.global-header .header-navbar .sub-item-2:hover .sub-item-3{display:block}
.global-header .header-navbar .sub-item-2 .sub-item-3{display:none;position:absolute;top:0;left:100%;-webkit-box-shadow:0 0 10px 1px rgb(0 0 0 / 15%);box-shadow:0 0 10px 1px rgb(0 0 0 / 15%);max-width:180px;width:100%;border-radius:5px;background:#fff;padding:4px}
.global-header .header-navbar .bridge{position:absolute;display:block;width:130px;height:40px;background:#fff;top:70px;opacity:0}
.global-header.fixed{background:rgba(255,255,255,.9);-webkit-box-shadow:0 1px 5px rgba(0,0,0,.2);box-shadow:0 1px 5px rgba(0,0,0,.2);padding-top:0}
.global-header.fixed .header-top{display:none}
.global-header.fixed .header-navbar{margin-top:0!important}
.global-footer{background:#f1f2f2;color:var(--color-secondary)}
.global-footer .letternews{max-width:510px;margin:0 auto;padding:32px 0}
.global-footer .letternews .title{line-height:20px;margin-bottom:40px;text-align:center}
.global-footer .letternews .form-newsletter{position:relative}
.global-footer .letternews .form-newsletter-input{width:100%;background:0 0;border:0;outline:0;border-bottom:1px solid var(--color-secondary);line-height:26px;padding:0 60px 0 40px}
.global-footer .letternews .form-newsletter-icon{position:absolute;top:50%;left:10px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
.global-footer .letternews .form-newsletter-btn{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);font-size:13px;line-height:24px;font-weight:700;color:var(--color-secondary);border:0;cursor:pointer}
.global-footer .company{font-size:13px;line-height:24px}
.global-footer .company a:hover{color:var(--color-primary)}
.global-footer .copyright{background:#f6f6f6;height:60px}
.global-footer .copyright .text{font-size:13px;line-height:60px;text-align:center}
.homepage{font-family:Petrona,serif}
.homepage .section-about-us{padding:48px 0 124px;max-width:800px;margin:0 auto;text-align:center}
.homepage .section-about-us .title::after{width:0}
.homepage .section-about-us .text{font-size:15px;line-height:29px;color:#505745;letter-spacing:1px}
.homepage .section-category .category-box{margin-bottom:190px}
.homepage .section-category .category-box:nth-child(2n){-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-flow:row-reverse;flex-flow:row-reverse}
.homepage .section-category .category-box .category-content{margin:0 0 0 66px}
.homepage .section-category .category-box:nth-child(2n) .category-content{margin:0 66px 0 0}
.homepage .section-category .category-box .category-title{padding-bottom:16px;margin-bottom:32px}
.homepage .section-category .category-box .category-description{letter-spacing:1px;font-size:15px;line-height:29px;color:#505745}
.homepage .section-category .category-box .category-link{display:inline-block;height:45px;font-size:20px;font-weight:600;line-height:45px;text-transform:uppercase;padding:0 20px;margin-top:48px;color:#fff;background:#734625;border:1px solid #734625}
.homepage .section-category .category-box .category-link:hover{color:#734625;background-color:#fff}
.homepage .section-promos .promos-box .text{color:var(--color-secondary)}
.product-page .section-banner .header{font-size:40px;line-height:80px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff;font-family:Petrona,serif}
.product-page .section-banner .header::after{content:"";position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);border-bottom:5px solid #505745;width:40px}
.product-page .section-filter{color:#ababab;font-weight:700}
.product-page .section-filter .sort select{height:29px;border:0;outline:0;font-size:15px;margin-left:8px}
.product-page .section-product .product-list{row-gap:24px;margin-bottom:42px}
.product-detail-page .product-thumbs .gallery-top:hover .swiper-btn-custom{display:block}
.product-detail-page .product-thumbs .gallery-thumbs{padding-bottom:8px}
.product-detail-page .product-thumbs .gallery-thumbs .swiper-slide{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto;position:relative;cursor:pointer}
.product-detail-page .product-thumbs .gallery-thumbs .swiper-slide::after{content:"";position:absolute;bottom:-8px;left:0;width:0;border-bottom:5px solid #ea8e6a;-webkit-transition:width .5s;-o-transition:width .5s;transition:width .5s}
.product-detail-page .product-thumbs .gallery-thumbs .swiper-slide-thumb-active::after{width:100%}
.product-detail-page .product-info .product-summary{line-height:24px;letter-spacing:1px;color:var(--color-secondary);padding-bottom:24px;margin-bottom:32px;border-bottom:1px solid #e4e4e4}
.product-detail-page .product-info .product-price{font-size:24px;line-height:42px;font-weight:700}
.product-detail-page .product-info .product-rate{display:block;margin-right:24px;text-decoration:underline}
.product-detail-page .product-info .product-rate:hover{text-decoration:none}
.product-detail-page .product-info .product-config .config-select{max-width:360px;width:100%;height:38px;font-size:15px;line-height:38px;padding:0 8px;margin-top:8px;border:1px solid #767676}
.product-detail-page .product-info .product-buy .buy-quantity-holder{width:90px;height:38px;line-height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;border:1px solid #767676}
.product-detail-page .product-info .product-buy .buy-quantity-btn{font-size:32px;color:#767676;font-weight:300;width:24px;padding-bottom:5px}
.product-detail-page .product-info .product-buy .buy-quantity-input{width:100%;text-align:center;border:0;outline:0;-webkit-box-flex:1;-ms-flex:1;flex:1}
.product-detail-page .product-info .product-buy .buy-btn{display:block;max-width:196px;width:100%;height:38px;line-height:38px;font-weight:600;text-transform:uppercase;text-align:center;color:#fff;background:#000;padding:0 8px;border:2px solid #000}
.product-detail-page .product-info .product-buy .buy-btn:hover{background:#fff;color:#000}
.product-detail-page .product-info .product-buy .buy-like{width:38px;height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border:2px solid #000;background:#fff}
.product-detail-page .product-info .product-buy .buy-like:hover{background:#000}
.product-detail-page .product-info .product-buy .buy-like:hover .icon-hearth-fill-black{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}
.product-detail-page .section-features .features-title{font-size:20px;line-height:36px;font-weight:600;color:var(--color-secondary);margin-bottom:24px}
.product-detail-page .section-features .features-title .item{position:relative;cursor:pointer}
.product-detail-page .section-features .features-title .item::after{content:"";position:absolute;bottom:0;left:0;width:0;border-bottom:2px solid #000;-webkit-transition:width .3s;-o-transition:width .3s;transition:width .3s}
.product-detail-page .section-features .features-title .item.active{color:#000}
.product-detail-page .section-features .features-title .item.active::after{width:100%}
.product-detail-page .section-features .features-list .features-item{display:none}
.cart-page .c-item{position:relative;font-size:16px;line-height:20px;border-bottom:1px solid #eaeaea}
.cart-page .c-item td{padding:40px 0}
.cart-page .c-item .c-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}
.cart-page .c-item .c-img{width:100px}
.cart-page .c-item .c-name .name{font-size:16px;font-weight:400;text-align:left;margin-left:12px}
.cart-page .c-item .c-quantity .quantity{max-width:62px;height:32px;font-size:16px;line-height:32px;border:1px solid #c6c6c6;text-align:center}
.cart-page .c-item .c-price{font-weight:500;line-height:32px}
.cart-page .c-item .c-edit{position:absolute;right:0;bottom:12px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}
.cart-page .c-item .c-edit .c-btn{width:30px;height:30px;background:#fff;border-radius:3px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.cart-page .c-item .c-edit .c-btn:hover{-webkit-box-shadow:0 1px 5px rgba(0,0,0,.2);box-shadow:0 1px 5px rgba(0,0,0,.2)}
.cart-page .c-item .c-edit .c-btn img{max-height:16px}
.cart-page input::-webkit-inner-spin-button,.cart-page input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cart-page input[type=number]{-moz-appearance:textfield}
.cart-page .cart-page-btn{width:100%;height:40px;line-height:40px;font-weight:500;text-align:center;text-transform:uppercase;border:2px solid #000;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s}
.cart-page .cart-product{border-collapse:collapse;text-align:center;width:100%}
.cart-page .cart-product-title{font-size:18px;line-height:36px;border-bottom:1px solid #eaeaea}
.cart-page .cart-product-title .quantity{width:76px}
.cart-page .cart-product-title .price{width:124px}
.cart-page .cart-addon .cart-addon-return{text-decoration:underline}
.cart-page .cart-addon .cart-addon-return:hover{text-decoration:none}
.cart-page .cart-addon .cart-addon-clear{max-width:216px}
.cart-page .cart-addon .cart-addon-clear:hover{background:#000;color:#fff}
.cart-page .cart-summary{background:#f5f5f5;padding:24px 24px 32px;max-width:326px;margin-left:auto;position:sticky;top:50px}
.cart-page .cart-summary .cart-voucher .cart-voucher-title{line-height:40px;border-bottom:1px solid #ccc;position:relative}
.cart-page .cart-summary .cart-voucher .cart-voucher-title i{display:inline-block;font-size:20px}
.cart-page .cart-summary .cart-voucher .cart-vocher-btn{display:inline-block;width:110px}
.cart-page .cart-summary .cart-voucher .cart-vocher-btn:hover{color:#fff;background:#000}
.cart-page .cart-summary .cart-summary-checkout{background:#648c24;border-color:#648c24;color:#fff}
.cart-page .cart-summary .cart-summary-checkout:hover{color:#648c24;background:#fff}
.cart-page .cart-summary .cart-summary-print{background:#6b3915;border-color:#6b3915;color:#fff}
.cart-page .cart-summary .cart-summary-excel{background:#e80000;border-color:#e80000;color:#fff}
.cart-page .form-input{font-size:15px;line-height:40px;width:100%;height:40px;border:1px solid #ccc;outline-color:var(--color-primary);padding:0 10px;margin-bottom:16px}
.cart-page .cart-form{border:1px solid #f2f5f7;padding:25px 35px}
.cart-page textarea.form-input{height:114px}
.cart-page .list-radio .item:not(:last-child){margin-bottom:16px}
.cart-page .list-radio .item label{position:relative;cursor:pointer;font-size:15px;line-height:15px;display:block}
.cart-page .list-radio .item label:before{content:"";display:inline-block;position:static;margin:-1px 5px -1px -1px;width:14px;height:14px;border-radius:50%;border:.1px solid var(--color-primary);background-color:transparent}
.cart-page .list-radio .item input[type=radio]:checked+label:after{content:"";border-radius:50%;width:8px;height:8px;position:absolute;top:2px;left:2px;display:block;background:var(--color-primary)}
.article-page .a-item{font-size:14px;line-height:18px;font-weight:300}
.article-page .a-item .a-img{width:80%;padding:4px 0 24px}
.article-page .a-item .a-img .style-img-block{padding-bottom:68%}
.article-page .a-item .a-info{margin-bottom:16px}
.article-page .a-item .a-info .a-views{margin-left:48px}
.article-page .a-item .a-name{font-size:24px;font-weight:600;line-height:28px;position:relative;padding-bottom:12px;margin-bottom:16px;text-decoration:underline}
.article-page .a-item .a-name::after{border-bottom:3px solid var(--color-primary)}
.article-page .a-item .a-category-link{color:#0083fd;text-decoration:underline;font-weight:400}
.article-page .a-item .a-btn{max-width:130px;width:100%;height:40px;font-size:16px;font-weight:600;line-height:40px;color:#fff;background:#6b3915;border:1px solid #6b3915;text-align:center;margin-right:12px}
.article-page .a-item .a-btn:hover{color:#6b3915;background:#fff}
.article-page .page-title{line-height:42px;position:relative;max-width:620px;margin:0 auto 48px;display:block;text-align:center;padding-bottom:16px}
.article-page .page-title::after{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
.article-page .page-content{display:-ms-grid;display:grid;-ms-grid-columns:4fr 12px 1fr;grid-template-columns:4fr 1fr;gap:12px}
.article-page .article-box{border-radius:10px;background:#fff;-webkit-box-shadow:0 2px 9px 0 #87878740;box-shadow:0 2px 9px 0 #87878740;padding:16px 12px;margin-bottom:12px}
.article-page .article-box-title{position:relative;font-size:20px;line-height:38px;font-family:Petrona,serif}
.article-page .article-box .list .item{font-size:13px;line-height:17px;font-weight:500;padding:8px 0}
.article-page .article-box .list .item .number{font-weight:300}
.article-page .article-tags .list .item{display:inline-block;background:#f5f5f5;height:28px;font-size:14px;font-weight:400;line-height:28px;padding:0 12px;border-radius:13px}
.article-page .article-tags .list .item:hover{-webkit-box-shadow:0 1px 5px rgba(0,0,0,.2);box-shadow:0 1px 5px rgba(0,0,0,.2)}
.article-page .article-search .article-search-input{font-size:14px;line-height:40px;padding:0 40px 0 10px;width:100%;border:1px solid #eaeaea;border-radius:5px}
.article-page .article-search .article-search-btn{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);right:10px;display:-webkit-box;display:-ms-flexbox;display:flex}
.article-page .article-search .article-search-btn i{-webkit-filter:invert(100%) sepia(54%) saturate(166%) hue-rotate(190deg) brightness(117%) contrast(84%);filter:invert(100%) sepia(54%) saturate(166%) hue-rotate(190deg) brightness(117%) contrast(84%)}
.article-page .article-newest .list .name{display:inline-block;text-decoration:underline;margin-bottom:4px}
.article-page.page-detail .page-content{-ms-grid-columns:1fr 3fr 1fr;grid-template-columns:1fr 3fr 1fr}
.article-page.page-detail .a-item .a-img{width:100%;padding:0 0 24px}
.article-page.page-detail .a-item .a-content{padding:0 18px 24px}
.article-page.page-detail .a-item .a-comments{color:#a2a2a2}
.article-page.page-detail .article-comments{padding:24px 18px}
.article-page .article-navbar .article-navbar-btn{position:fixed;top:20%;right:10px;font-size:24px;width:40px;height:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:50%;background:#1979c2;color:#fff;z-index:9}
.article-page .article-navbar-popup{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:99}
.article-page .article-navbar-popup .popup-bg{background:rgba(60,60,60,.3);height:100%}
.article-page .article-navbar-popup .popup-content{max-width:300px;position:absolute;top:0;right:0;bottom:0;background:#fff;padding:16px 16px 50px;overflow:auto}
.article-page .article-navbar-popup .popup-content-close{position:fixed;width:300px;bottom:0;right:0;font-size:50px;line-height:50px;text-align:center;color:#fff;background:var(--red);-webkit-box-shadow:0 1px 5px rgba(0,0,0,.2);box-shadow:0 1px 5px rgba(0,0,0,.2)}
.customer-page .page-title::after{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
.customer-page .customer-content-group{max-width:600px;margin:20px auto 48px;background:#fff;padding:20px}
.customer-page .customer-content-title{text-align:center;font-size:18px;font-weight:600}
.customer-page .customer-content-title a{color:#222}
.customer-page .customer-content-title a:first-child{margin-right:16px}
.customer-page .customer-content-title a.current,.customer-page .customer-content-title a:hover{color:var(--color-primary);border-bottom:1px solid var(--color-primary)}
.customer-page .customer-form .item{margin-top:20px}
.customer-page .customer-form .item input{display:block;width:100%;border:1px solid #d7d7d7;padding:10px;height:40px;margin-top:5px;font-size:16px}
.customer-page .customer-form .item span{color:#d91605}
.customer-page .customer-form .item p{font-size:14px;font-weight:400}
.customer-page .btn-customer{display:inline-block;height:40px;line-height:40px;font-weight:500;background:#734625;color:#fff;padding:0 16px}
.customer-page .btn-customer:hover{background:#7b5a42;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.3);box-shadow:0 1px 5px rgba(0,0,0,.3)}
.customer-page .password-input{position:relative}
.customer-page .show-pass{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);right:10px}
.customer-page .forgot-password{display:block;text-align:right;color:#208ce8;margin:8px 0 0;font-size:14px}
.customer-page .forgot-password-content{max-width:800px;padding-top:50px;margin:0 auto}
.customer-page .forgot-password-content h2{font-size:26px;font-weight:600;margin-bottom:8px}
.customer-page .forgot-password-content p{font-size:16px;margin-bottom:20px}
.customer-page .forgot-password-content table{width:100%}
.customer-page .forgot-password-content input{width:100%;padding:10px 8px;font-size:18px;border-radius:5px;outline:0;border:1px solid var(--color-primary)}
.customer-page .forgot-password-content td:first-child{font-size:18px}
.customer-page .btn-forgot-password{display:block;width:50%;margin:30px auto}
.nav-search-bar .s-input{line-height:32px;padding:0 10px;border:1px solid #ddd;width:100%}
.nav-search-bar .s-btn-find{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:32px;height:32px;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);right:18px;-webkit-filter:invert(100%) sepia(54%) saturate(166%) hue-rotate(190deg) brightness(117%) contrast(50%);filter:invert(100%) sepia(54%) saturate(166%) hue-rotate(190deg) brightness(117%) contrast(50%)}
@media (max-width:1024px){
.global-header .header-navbar .header-navbar-list{overflow:auto;white-space:nowrap;-webkit-box-pack:normal;-ms-flex-pack:normal;justify-content:normal}
}
@media (max-width:768px){
html{font-size:14px}
.m-mb-0{margin:0!important}
.pc-display{display:none}
.mb-display{display:inline-block}
.page-padding{padding-top:0}
.accordion-content{max-height:0;line-height:30px;-webkit-transition:max-height .3s ease-out;-o-transition:max-height .3s ease-out;transition:max-height .3s ease-out;overflow:hidden}
.heading-primary{font-size:28px;line-height:36px}
.heading-primary::after{border-bottom:3px solid #a88266}
.global-header{position:static;padding:10px 0;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.2);box-shadow:0 1px 5px rgba(0,0,0,.2)}
.global-header.fixed .header-top{display:-webkit-box;display:-ms-flexbox;display:flex}
.global-header .header-top .header-logo{max-width:100px}
.global-footer .col-contact{margin-top:16px;text-align:center}
.global-footer .col-content{padding:8px;border:1px solid #ccc;margin:1px 0}
.global-footer .col-content .col-heading{margin-bottom:0!important;position:relative}
.accordion .fa-angle-right{display:inline-block}
.homepage .section-about-us{padding-bottom:100px}
.homepage .section-category .category-box{margin-bottom:100px;row-gap:24px}
.homepage .section-category .category-box:nth-child(2n){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column}
.homepage .section-promos .promos-box .text{font-size:18px}
.product-page .section-product .product-list{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}
.product-detail-page .product-info{margin:24px 0 0!important}
.cart-page .c-item td{float:left;width:33.33%;padding:12px 0;text-align:left}
.cart-page .c-item td::before{position:static;display:block;line-height:32px;color:#666;font-weight:600}
.cart-page .c-item .c-wrapper{float:unset;width:100%;padding-bottom:0}
.cart-page .c-item .c-price{padding-bottom:50px}
.cart-page .c-item .c-price::before{content:"Giá"}
.cart-page .c-item .c-quantity::before{content:"Số lượng"}
.cart-page .c-item .c-total-price::before{content:"Tổng"}
.cart-page .c-item .c-edit{right:10px}
.cart-page .cart-summary{max-width:100%;margin-top:24px}
.article-page .page-content{-ms-grid-columns:auto;grid-template-columns:auto}
.article-page .a-item .a-img{width:100%}
.article-page.page-detail .a-item .a-img{padding:24px 18px}
}
@media (max-width:576px){
.col-mb-12{-ms-flex:0 0 100%;-webkit-box-flex:0;flex:0 0 100%;max-width:100%}
.homepage .section-category .category-box .category-content{text-align:center}
.homepage .section-category .category-box .category-title::after{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
.product-page .section-product .product-list{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}
.product-detail-page .section-features .features-title .list{margin-top:48px;white-space:nowrap;overflow:auto;-webkit-box-pack:normal;-ms-flex-pack:normal;justify-content:normal}
.cart-page .cart-form{padding:24px}
}