@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,700'); @charset "utf-8"; body {color: #222;font-family: "Roboto", sans-serif;font-size: 14px;margin: 0;padding: 0;} @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); * {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Roboto', sans-serif;} body {color: #222;font-family: 'Roboto', sans-serif;background: #edeef2;position: relative;min-width: 1280px;font-size: 14px;} html {font-size: 100%;font-family: 'Roboto', sans-serif;} img { max-width: 100%; height: auto; } a { text-decoration: none; color: black; } .ul, .ol { margin: 0; padding: 0; list-style: none; } table { width: 100%; height: 100% !important; } .clearfix { clear: both; margin-bottom: 1rem; } .clearfix::after { display: block; clear: both; content: ""; } .header { max-width: 100%; margin: 0 auto; padding: 0; } .d-block { display: block !important; } .d-none { display: none !important; } .banner_top { background-image: url(../images/banner_top.png); background-position: center; background-repeat: no-repeat; background-size: auto; height: 3rem; width: 100%; } .container { padding: 0 10px; max-width: 1260px; min-width: 1260px; margin: 0 auto; } .header-top { background-color: #3d52bf; } .text-run-top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; } .text-run-top .text-left { position: relative; } .text-run-top .text-left .icon { position: absolute; content: "."; width: 8px; height: 8px; background-color: #ffe901; top: 50%; left: -4%; transform: translateY(-50%); border-radius: 50%; border: 1px solid #ffe901; } .text-run-top .text-left .pulse { position: absolute; border: 1px solid #ffe901; top: 19%; left: -6%; width: 24px; height: 24px; transform: translateY(-50%); border-radius: 50%; animation: pulse 1s linear infinite both; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1.5); } } .text-run-top marquee { color: white; padding: 10px 0; } .text-run-top .text-right { display: flex; align-items: center; } .text-run-top .text-right a { text-decoration: none; color: white; padding: 0 0 0 2rem; } .text-run-top .text-right span { font-weight: normal; } .main_menu { background-color: #546ce8; } .menu { display: flex; align-items: center; flex-wrap: wrap; } .menu .logo-img { display: block; width: 190px; margin-right: 20px; max-height: 70px; } .menu .logo-img img { max-height: 70px; } .menu .logo-fix { display: none; } .menu .icon_menu { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 780px); position: relative; } .menu .icon_menu .item a { display: flex; color: white; } .menu .icon_menu .item a.cart_icon { position: relative; } .menu .icon_menu .item .count-cart { background: #fd3620; color: #fff; border-radius: 50%; font-size: 13px; font-weight: 500; width: 18px; height: 18px; line-height: 18px; text-align: center; position: absolute; top: -3px; right: -6px; } .form__input { width: 550px; margin-right: 20px; position: relative; } .form__input .search-form { border-radius: 4px; overflow: hidden; } .form__input select { border: 0; width: 140px; height: 38px; padding-left: 3px; float: left; outline: none; } .form__input .submit-search { position: absolute; top: 0; right: 0; bottom: 0; border: 0; width: 95px; height: 38px; border-radius: 0 4px 4px 0; font-weight: 300; } .form__input .fa-search { font-size: 16px; color: #777; outline: none; } .form__input .text_search { border: 0; padding: 0 5px 0 10px; width: calc(100% - 95px); height: 100%; outline: none; } .form__input .searh-form-container { float: left; width: calc(100% - 140px); height: 38px; } .main_menu .header_icon_text { float: left; } .main_menu .header_icon_text span { display: block; } .menu .icon_menu .item img { margin: 2px 8px 0 0; width: 30px; height: 30px; } .main_menu .bottom_menu, .main_menu .d-flex, .main_menu .d-flex .item_bottom_menu { display: flex; align-items: center; } .main_menu .bottom_menu { width: 100%; position: relative; } .main_menu .d-flex a { text-decoration: none; } .main_menu .d-flex img { max-height: 25px; background-color: white; padding: 4.5px; border-radius: 50%; } .main_menu .category_main { position: relative; width: 190px; margin-right: 20px; padding: 8px 0; font-size: 15px; color: white; } .menu_holder { position: absolute; background-color: white; color: black; z-index: 10; top: 100%; width: 200px; -webkit-box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 30%); box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 30%); } .menu_holder .item { height: 31.5px; font-size: 13px; font-weight: bolder; } .menu_holder .item a { display: flex; align-items: center; padding: 5px 10px; text-decoration: none; color: black; } .menu_holder .item img { margin-right: 7px; } .main_menu .category_main.nothome .menu_holder { visibility: hidden; } .main_menu .category_main:hover .menu_holder { visibility: visible; } .menu-hover { opacity: 0; visibility: hidden; font-size: 13px; font-weight: 300; position: absolute; background: #fff; z-index: 1; width: calc(1240px - 200px); height: 410px; overflow: auto; padding: 15px 15px 15px 12px; -webkit-box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 30%); box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 30%); top: 0; left: 220px; -webkit-transition: .4s all; transition: .4s all; } .menu-hover .title-holder { font-weight: bold; color: #546ce8 !important; } .menu-hover .list-holder { display: flex; flex-wrap: wrap; padding-left: 15px; float: left; width: calc(100% - 180px); } .menu-hover .list-holder .item-holder { width: calc(100% / 5); } .menu-hover .list-holder .item-holder a { padding: 0; margin: 1rem 0; } .menu-hover .list-holder .holder-last { line-height: 1; } .menu-hover .holder-img { float: left; width: 180px; } .main_menu .item:hover .item-cate { background: #546ce8; color: #fff; } .main_menu .item:hover .menu-hover { opacity: 1; visibility: visible; -webkit-transition: .4s all; transition: .4s all; left: 200px; } .main_menu .category_main i { margin-right: 0.5rem; } .main_menu .d-flex { width: calc(100% - 210px); justify-content: space-between; } .main_menu .d-flex .item_bottom_menu { position: relative; color: #fff; } .main_menu .d-flex img, .main_menu .d-flex i { margin-right: 0.3rem; } /* fix-header */ .header.header-fix { position: fixed; top: 0; left: 0; right: 0; z-index: 99; } .header.header-fix .banner_top { display: none; } .header.header-fix .header-top { display: none; } .header.header-fix .main_menu .header_icon_text { display: none; } .header.header-fix .main_menu .category_main { background-color: white; color: black; width: 200px; position: absolute; top: -54px; left: 100px; text-align: center; font-weight: 400; font-size: 15px; border-radius: 5px; padding: 10px 0; } .header.header-fix .main_menu .d-flex { display: none; } .header.header-fix .menu .logo .logo-fix { display: block; padding-right: 20px; max-height: 70px; } .header.header-fix .menu .logo-img { display: none; } .header.header-fix .form__input { left: 235px; } .header.header-fix .menu .icon_menu { width: 340px; left: 250px; } .header.header-fix .menu_holder { display: none; } .header.header-fix .category_main:hover .menu_holder { display: block; } /* banner */ .banner_home { width: calc(100% - 210px); margin: auto 0 auto auto; } .banner_home .banner_left { width: 725px; margin-right: 10px; float: left; } .banner_home .banner_right { float: left; width: calc(100% - 735px); } .banner_home .banner_right a { display: block; } .homepage .banner_sale { align-items: center; margin-top: 1rem; } .banner_sale a { text-decoration: none; } .homepage .banner_sale img { width: 33%; } /* product_sale */ .product_sale { position: relative; } .product_sale .text_giasoc { width: 100%; } .product_sale .text_giasoc img { display: block; margin: 0 auto; text-align: center; } .product_container { background-color: white; border: 2px solid #fc6900; } .product_list { display: flex; flex-wrap: wrap; padding-top: 0.5rem; } .item_product { padding: 10px 15px 10px 20px; } .container-product { width: 100%; position: relative; } .item_product .item_img { display: block; position: relative; padding-bottom: 200px; margin-bottom: 5px; } .product_list_hot { display: flex; flex-wrap: wrap; padding-top: 0.5rem; } .product_list_hot .item_product { padding: 10px 15px 10px 20px; width: calc(100% / 5); } .product_list_hot .item_product .item_img { display: block; position: relative; padding-bottom: 200px; margin-bottom: 5px; } .fix_img { width: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto; } .item_product .icon_sale-hot { background: url(../images/sale.png) no-repeat; width: 55px; height: 45px; position: absolute; top: 0; left: -5%; background-position: center; background-size: cover; } .item_product .item-name { display: block; font-size: 14px; height: 35px; overflow: hidden; text-decoration: none; color: black; margin: 6px 0; } .item_product .item-name:hover { color: #3d52bf; } .item_product .content-price { position: relative; margin: 6px 0; height: 45px; } .item_product .item-old-price { display: block; font-weight: bold; color: #999999; } .item_product .item-discount { position: absolute; top: 0; right: 0; width: 45px; height: 45px; background: url(../images/discound.png) no-repeat; line-height: 45px; text-align: center; color: #fff; font-weight: bold; } .item_product .item-price { display: block; font-size: 18px; color: #fd3620; font-weight: 700; } .product_container .show-all-sale { display: block; width: 230px; text-align: center; color: #fc6900; border: 1px solid #fc6900; padding: 6px; text-transform: uppercase; font-style: italic; margin: 22px auto 17px auto; text-decoration: none; } .product_container .show-all-sale:hover { background: #fc6900; color: white; } /* top product */ .top-product-list { position: relative; border-top: 3.2px solid #3d52bf; margin: 2rem 0; background: white; padding-bottom: 0.5rem; } .top-product-list::before { content: ""; position: absolute; left: 156px; top: -17px; height: 8px; width: 140px; border-bottom: 6px solid #3d52bf; border-left: 7px solid transparent; border-right: 7px solid transparent; } .content-title { display: flex; align-items: center; } .box-title { position: relative; background-color: #546ce8; font-size: 16px; text-transform: uppercase; color: white; margin: 0; padding: 10px 28px 10px 15px; } .box-title::before { position: absolute; content: ""; top: 0; bottom: 0; right: -25px; border-top: 39px solid #546ce8; border-right: 25px solid transparent; } .tag-title a:first-child { margin: 0 0 0 40px; padding: 0; border: 0; } .tag-title a { text-decoration: none; color: black; font-weight: 300; border-left: 1px solid #999; text-transform: uppercase; padding-left: 15px; margin-left: 15px; } .tag-title a:hover { color: #3d52bf; } .item_product .icon_sale { background: url(../images/NEW.png) no-repeat; width: 55px; height: 25px; position: absolute; top: 0; left: 0; background-position: center; background-size: cover; } /* banner-product-hot */ .banner-product-hot { padding: 10px 20px; } .show-all-top { display: block; width: 230px; text-align: center; color: #546ce8; border: 1px solid #546ce8; padding: 6px; text-transform: uppercase; font-style: italic; margin: 22px auto 17px auto; text-decoration: none; } .show-all-top:hover { background: #3d52bf; color: white; } /* banner-product-hot */ .banner-under-product-hot { margin: 21px 0 25px 0; display: flex; justify-content: space-between !important; } .banner-under-product-hot a { display: block; width: calc(50% - 2px); } /* box-product */ .box-product { margin: 24px 0 20px 0; border-top: 3.2px solid #3d52bf; position: relative; background-color: white; } .box-product::before { content: ""; position: absolute; left: 156px; top: -17px; height: 8px; width: 140px; border-bottom: 6px solid #3d52bf; border-left: 7px solid transparent; border-right: 7px solid transparent; } .show-all { color: #546ce8; font-style: italic; display: block; border-top: 1px solid #edeef2; text-align: center; padding: 18px; margin: 4px auto; width: 100%; text-decoration: none; } .hover-content-product, #tooltip { display: none; position: absolute; background: #fff; z-index: 999; border: 1px solid #546ce8; width: 395px; -webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.3); } .hover-content-product .name-product, #tooltip .name-product { background: #546ce8; color: #fff; font-size: 15px; font-weight: bold; padding: 12px 12px 12px 15px; margin-bottom: 0; } .hover-content-product .hover-content, #tooltip .hover-content { padding: 10px 13px 20px 13px; } .hover-content-product .hover-summary, #tooltip .hover-summary { white-space: pre-line; margin: 15px 0 20px 0; max-height: 149px; overflow: hidden; } .hover-summary .item .fa.fa-check-circle { color: #ff9900; margin-right: 5px; } .hover-content-product .hover-specialOffer, #tooltip .hover-specialOffer { position: relative; padding: 7px 0 12px 0; border: 1px solid #ce0707; } .hover-content-product .hover-specialOffer ul, #tooltip .hover-specialOffer ul { padding: 0 10px 0 5px; margin-top: 14px; } .hover-content-product .title-text, #tooltip .title-text { background: #e05353; color: #fff; font-weight: bold; padding: 6px 58px 6px 32px; display: inline-block; position: relative; } .hover-content-product .title-text::before, #tooltip .title-text::before { content: ''; background: url(../images/khuyenmai.png) no-repeat; position: absolute; left: 0; top: 5px; bottom: 0; width: 20px; } .hover-content-product .title-text::after, #tooltip .title-text::after { content: ''; position: absolute; right: -21px; top: 0; bottom: 0; width: 33px; background: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .hover-content-product li, #tooltip li { margin-bottom: 4px; } .hover-content-product li:last-child, #tooltip li:last-child { margin: 0; } .hover-content-product li::after, #tooltip li::after { content: ''; display: block; clear: both; } .hover-content-product li .number, #tooltip li .number { float: left; width: 18px; height: 18px; line-height: 19px; border-radius: 50%; margin-right: 12px; text-align: center; background: #526ae7; color: #fff; font-size: 13px; font-weight: bold; } .hover-content-product li .text, #tooltip li .text { float: left; width: calc(100% - 30px); font-weight: 300; } .hover-content-product .spec-title, #tooltip .spec-title { position: relative; } .hover-content-product .spec-title::before, #tooltip .spec-title::before { content: ''; position: absolute; width: 10px; background: #e05353; left: -10px; top: 0; bottom: 0; } .hover-content-product .spec-title::after, #tooltip .spec-title::after { content: ''; position: absolute; border-top: 13px solid #ce0707; border-left: 10px solid transparent; left: -10px; bottom: -13px; } .hover-content-product .p-old-price, #tooltip .p-old-price { display: block; font-weight: bold; color: #999999; } .hover-content-product .p-price, #tooltip .p-price { display: block; font-size: 18px; color: #fd3620; font-weight: 500; } .position-relative { position: relative; } .hover-content-product .p-discount, #tooltip .p-discount { background: url("../images/discound.png") no-repeat; width: 45px; height: 45px; line-height: 45px; text-align: center; color: #fff; font-weight: bold; position: absolute; top: 0; right: 0; } /* footer */ .content-footer { background-color: white; } .top-footer { background-color: #3d52bf; color: white; padding: 30px 0; } .contact-us { display: flex; justify-content: space-between; } .contact-us .item { width: calc(100% / 3); } .contact-us .item .title { font-weight: 400; font-size: 15px; margin-bottom: 20px; } .contact-us .social-media a { position: relative; font-size: 27px; color: white; text-decoration: none; padding-right: 20px; } .contact-us .social-media .icon-zalo { background: url(../images/zalo.png) no-repeat; width: 100%; bottom: 0; background-position: 0 37px; padding: 30px; } .contact-us .icon-pay { background: url(../images/pay.png) no-repeat; width: 360px; height: 36px; } .contact-us .new-form { position: relative; border-radius: 3px; overflow: hidden; } .contact-us .new-form input { height: 45px; padding: 0 90px 0 13px; width: 100%; border: 0; } .contact-us .submit-new { color: #fff; background: #ffe401; font-weight: 500; width: 85px; border: 0; position: absolute; top: 0; bottom: 0; right: 0; text-transform: uppercase; } .footer-tintuc { padding: 20px 0; } .footer-tintuc .content-tintuc { display: flex; justify-content: space-between; } .footer-tintuc .content-tintuc .item-tintuc { width: calc(50% - 10px); } .footer-tintuc .item-tintuc .title-tintuc { font-weight: bold; font-size: 18px; border-bottom: 1px solid #d7d7d7; padding-bottom: 3px; margin-bottom: 16px; } .list-tintuc .item { margin-bottom: 20px; display: flex; } .item-tintuc-img { position: relative; width: 30%; } .item-tintuc-img img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-height: 100%; width: 150px; object-fit: cover; } .text-tintuc { width: 70%; } .text-tintuc a { font-weight: bold; text-decoration: none; color: black; } .text-tintuc a:hover { color: #3d52bf; } .summary-tintuc { max-height: 35px; overflow: hidden; } .text-tintuc .info-tintuc { margin: 4px 0 8px 12px; color: #999999; font-size: 12px; } .info-tintuc span { position: relative; margin-right: 20px; } .info-tintuc .time-tintuc::before { position: absolute; content: ""; background: url(../images/icon-comment.png); background-repeat: no-repeat; background-position: -4px -1px; padding: 10px; margin-right: 4px; top: 0; left: -14%; } .info-tintuc .comment-tintuc::before { position: absolute; content: ""; background: url(../images/icon-comment.png); background-repeat: no-repeat; background-position: -30px -1px; padding: 10px; margin-right: 4px; top: 0; left: -260%; } .info-tintuc .view-tintuc::before { position: absolute; content: ""; background: url(../images/icon-comment.png); background-repeat: no-repeat; background-position: -52px -1px; padding: 10px; margin-right: 4px; top: 0; left: -50%; } .list-tintuc-khuyenmai .item { margin-bottom: 20px; display: flex; } .footer-hotrokhachhang { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } .content-hotrokhachhang { display: flex; justify-content: space-between; } .chinhsachgiaohang { background: url(../images/icon-hotrokhachhang.png); width: 22%; height: 70px; } .doitradedang { background: url(../images/icon-hotrokhachhang.png); width: 22%; height: 70px; background-position: 0 -75px; } .thanhtoantienloi { background: url(../images/icon-hotrokhachhang.png); width: 22%; height: 70px; background-position: 0 -145px; } .hotronhiettinh { background: url(../images/icon-hotrokhachhang.png); width: 22%; height: 70px; background-position: 0 -215px; } /* footer-main */ .footer-main { margin-top: 1.5rem; } .footer-main .footer-info { display: flex; justify-content: space-between; } .footer-info .item-info { width: 25%; } .footer-info .item-info .title-info { font-size: 18px; font-weight: 700; text-transform: uppercase; position: relative; margin-bottom: 1.5rem; } .footer-info .item-info .title-info::before { position: absolute; content: ""; left: 0; bottom: -7px; width: 100px; height: 1px; background-color: #546ce8; } .footer-info .item-info a { display: block; padding: 0.5rem 0; text-decoration: none; color: black; font-size: 13px; } .footer-info .item-info a:hover { color: #546ce8; } .footer-info .item-info .click-mobile { background-color: #546ce8; padding: 10px; color: white; width: 200px; border-radius: 3px; text-align: center; } .footer-info .item-info .click-mobile:hover { background-color: #3d52bf; color: white; } .footer-showroom { border-top: 1px solid rgb(235, 235, 235); background-color: #f7f7f7; } .footer-showroom .content-showroom { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 2rem; } .footer-showroom .content-showroom .item-showroom { width: calc(100% / 3); margin-bottom: 2rem; } .footer-showroom .item-showroom .title { color: #5f75e9; font-size: 16px; text-transform: uppercase; font-weight: 700; margin-bottom: 15px; } .footer-showroom .item-showroom ul li { list-style: none; font-size: 13px; } .footer-showroom .item-showroom li { padding-left: 25px; margin-bottom: 10px; position: relative; } .footer-showroom .item-showroom i { padding-right: 15px; position: absolute; left: 0; top: 3px; } .footer-showroom .item-showroom a { color: #5f75e9; text-decoration: none; } .footer-bottom { background-color: #edeef2; border-top: 1px solid rgb(223, 223, 223); } .footer-bottom .content-company { margin: 1rem 0; font-size: 13px; } /* product-detail */ .product-detail { padding-bottom: 20px; } .product-detail .breadcrumb { margin: 15px 0; position: relative; } .breadcrumb li { font-weight: lighter; float: left; position: relative; z-index: 1; } .breadcrumb li::after { content: '\f105'; font-family: Fontawesome; padding: 0 10px; } .breadcrumb li:last-child { font-weight: 300; color: #999999; } .breadcrumb li:last-child a { color: #999999; } .breadcrumb li:last-child::after { content: none; } .breadcrumb h1 { font-size: inherit; font-weight: inherit; margin: 0; line-height: inherit; } .breadcrumb i { padding: 0px 6px; } .breadcrumb a { text-decoration: none; color: black; font-weight: 400; } .product-detail .product-detail-content { background-color: white; padding: 20px; margin-bottom: 20px; } .product-detail-content { display: flex; justify-content: space-between; } .product-detail-content .product-detail-gallery { width: 380px; } .product-detail-content .item-img-sp { padding-bottom: 2.5rem; } .product-detail-content .view-album { position: absolute; bottom: -8px; left: 50%; width: 100%; margin: 1rem auto; transform: translate(-50%, 0); color: #526ae7; background-color: #f3f3f3; text-decoration: none; padding: 5px; text-align: center; } .product-detail-gallery .product-detail-thumbnail { padding: 0 0 20px 0; border-bottom: 1px dashed #f0f0f0; margin-bottom: 20px; } .product-detail-thumbnail .item-thumbnail { display: block; width: 70px; margin-right: 7px; text-align: center; float: left; } .product-detail-thumbnail .item-thumbnail a { text-decoration: none; font-weight: bold; color: black; font-size: 13px; } .product-detail-thumbnail .item-thumbnail.active { border: 1px solid #ce0707; } .product-detail-thumbnail .img { display: block; height: 63px; position: relative; margin-bottom: 7px; border: 1px solid #e1e1e1; border-radius: 5px; } .product-detail-thongso { width: 380px; overflow: hidden; } .product-detail-thongso .content-table-thongso { max-height: 350px; } .product-detail-thongso .content-table-thongso { position: relative; } .product-detail-thongso .content-table-thongso::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff)); background: linear-gradient(transparent, #fff); } .product-detail-thongso .tlqcontent tr td { text-align: left !important; font-weight: 500; } .product-detail-thongso .tlqcontent strong { font-weight: 500; } .product-detail-thongso .tlqcontent tr:nth-child(even) { background-color: #f2f2f2; } .show-full-thongso table { height: 409px !important; } .show-full-thongso ..tlqcontent tr td { text-align: left !important; font-weight: 500; } .show-full-thongso .tlqcontent tr:nth-child(even) { background-color: #f2f2f2; } .product-detail-info { width: 505px; } a.show-thongso { display: block; text-align: center; text-decoration: none; } .product-detail-info .name-info { font-weight: 500; font-size: 18px; margin-bottom: 10px; } .product-detail-info .icon-star { background: url(../images/star_sprite.png) no-repeat; width: 100px; height: 20px; display: inline-block; vertical-align: text-top; background-position: 0 0; } .product-info-summary { padding: 1rem 0; } .product-info-summary .item-info-summary { list-style: none; font-size: 13px; } .product-info-summary .item-info-summary i { color: #ff9900; margin-right: 5px; } .info-content-price { background-color: #f1f1f1; padding: 1rem; } .info-content-price .price-title { display: flex; align-items: center; } .info-offer { padding: 20px 0; font-size: 15px; } .info-showroom b { padding: 10px 0; font-size: 15px; } .info-showroom ul { padding: 15px; } .info-showroom li { color: #2a9ce2; } .content-option { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 20px; } .product-detail-info .item-option { position: relative; text-decoration: none; background-color: #f9faff; width: calc(100% / 2 - 10px); margin: 0 10px 10px 0; padding: 15px 10px; text-align: center; color: #222; font-weight: 350; border-radius: 5px; border: 1px solid #e1e1e1; } .product-detail-info .item-option.active { border: 1px solid #526ae7; background: #f9faff; font-weight: bold; } .product-detail-info .item-option .item-name { display: block; font-size: 13px; text-transform: uppercase; padding-bottom: 5px; } .product-detail-info .item-option .item-name .checkbox-option { position: absolute; left: 1%; top: 3%; width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: #dddddd; } .product-detail-info .item-option .item-name .checkbox-option.checked { background-color: #546ce8 } .product-detail-info .item-option .variant-price { color: red; font-weight: 700; } .product-detail-info .info-khuyenmai { border: 1px solid red; margin-bottom: 20px; } .info-khuyenmai .title-khuyenmai { padding: 6px 8px 7px 0; border-bottom: 1px dashed #e1e1e1; position: relative; } .title-khuyenmai { display: flex; align-items: center; justify-content: space-between; } .info-khuyenmai .title-khuyenmai::before { content: ''; position: absolute; width: 10px; background: #e05353; left: -10px; top: 6px; bottom: 0; height: 30px; } .info-khuyenmai .title-khuyenmai::after { content: ''; position: absolute; border-top: 13px solid #ce0707; border-left: 10px solid transparent; left: -10px; bottom: -7px; } .info-khuyenmai .title-khuyenmai .spec-price { background: #e05353; color: #fff; font-weight: bold; padding: 6px 58px 6px 32px; display: inline-block; position: relative; } .info-khuyenmai .title-khuyenmai .spec-price::before { content: ''; background: url(../images/khuyenmai.png) no-repeat; position: absolute; left: 0; top: 6px; bottom: 0; width: 20px; } .info-khuyenmai .title-khuyenmai .spec-price::after { content: ''; position: absolute; right: -21px; top: 0; bottom: 0; width: 31px; height: 32px; background: #fff; transform: rotate(45deg); } .info-khuyenmai ul { padding: 15px 10px; } .product-detail-info .product-button { display: flex; align-items: center; justify-content: space-between; text-align: center; flex-wrap: wrap; } .product-detail-info .product-button .btn-buynow { background: #ce0707; border-color: #ce0707; width: 100%; } .product-detail-info .product-button a { display: block; width: calc(50% - 5px); line-height: 1.4; margin-bottom: 10px; border-radius: 5px; color: #fff; padding: 6px; border: 1px solid transparent; text-decoration: none; } .product-detail-info .product-button .btn-addcart { color: #526ae7; border-color: #526ae7; } .product-detail-info .product-button .btn-payinstall { background: #546ce8; border-color: #546ce8; } .product-detail-info .product-button .text-18 { font-size: 18px; font-weight: 500; text-transform: uppercase; } .product-detail-info .product-icon-payment { margin: 20px 0 0 0; color: #546ce8; } .product-detail-info .product-icon-payment .icon-payment { background: url(../images/payment.png) no-repeat; display: block; height: 50px; } /* product-right */ .product-detail-content .product-detail-right { width: calc(100% - 909px); } .product-detail-right .address-showroom span { display: block; position: relative; padding: 5px 0; } .product-detail-right .address-showroom span::before { content: ''; background: #1b95e0; width: 4px; height: 4px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 5px; } .product-detail-right .color-showroom { text-decoration: none; color: #546ce8; font-weight: 700; } .product-detail-right a { color: #222; text-decoration: none; } .product-description { display: flex; justify-content: space-between; margin: 20px 0; padding: 15px; background-color: white; } .product-description .item-left { width: 800px; margin-right: 20px; } .product-description .item-left .title { border-bottom: 1px solid #edeef2; padding-bottom: 5px; margin-bottom: 12px; font-weight: bold; font-size: 20px; } .product-description .item-left .content-description { max-height: 380px; overflow: hidden; position: relative; } .product-description .item-left .content-description.active { max-height: 100%; } .product-description .item-left .content-description::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff)); background: linear-gradient(transparent, #fff); } .item-btn { font-weight: 700; display: block; text-align: center; text-decoration: none; color: #1b95e0; font-size: 16px; padding-top: 1rem; } .product-description .item-article-right { width: 400px; } .item-article-right .title-article { border-bottom: 1px solid #edeef2; padding-bottom: 5px; margin-bottom: 12px; font-weight: bold; font-size: 20px; } .item-article-right .content-article-new { display: block; } .item-article-right .content-article-new .item { width: 100%; } .item-article-right .content-article-new .article-img { width: 120px; float: left; margin: 0 10px 0 0; display: block; margin-bottom: 20px; position: relative; } .item-article-right .content-article-new .article-text { width: calc(100% - 170px); float: left; font-weight: bold; } .content-article-new .article-text a { text-decoration: none; color: black; } .content-article-new .article-info { margin: 5px 0 10px 12px; color: #999999; font-size: 13px; } .article-info span { position: relative; margin-right: 20px; } .article-info .time-article::before { position: absolute; content: ""; background: url(../images/icon-comment.png); background-repeat: no-repeat; background-position: -4px -1px; padding: 10px; margin-right: 4px; top: 0; left: -14%; } .article-info .comment-article::before { position: absolute; content: ""; background: url(../images/icon-comment.png); background-repeat: no-repeat; background-position: -28px -1px; padding: 10px; margin-right: 4px; top: 0; left: -260%; } .article-info .view-article::before { position: absolute; content: ""; background: url(../images/icon-comment.png); background-repeat: no-repeat; background-position: -52px -1px; padding: 10px; margin-right: 4px; top: 0; left: -90%; } .product-video { display: flex; flex-wrap: wrap; } .product-video .content-review { width: 840px; } .content-review .item-video { background-color: white; padding: 20px; margin-bottom: 1.5rem; } .content-review .item-video .title { font-size: 20px; font-weight: 700; padding-bottom: 0.5rem; border-bottom: 1px solid #edeef2; } .content-review .item-video .new-product-video, .content-review .product-comment .new-product-comment { margin-top: 1rem; } .content-review .product-comment { background-color: white; padding: 20px; margin-bottom: 2rem; } .content-review .product-comment .title { font-size: 20px; font-weight: 700; padding-bottom: 0.5rem; border-bottom: 1px solid #edeef2; } .new-product-comment { box-sizing: border-box; } .new-product-comment .comment-form .img-avatar { float: left; } .new-product-comment .comment-form form { margin-left: 50px; } .relative { position: relative; } .new-product-comment .comment-form textarea { height: 80px; padding: 5px 10px; margin-bottom: 10px; width: 100%; } .new-product-comment .form-input { border: solid 1px #ddd; position: absolute; background: #fff; width: 100%; z-index: 99; padding: 10px; top: 81px; display: none; } /* category */ .product-category { padding: 1rem; margin-bottom: 2rem; } .product-category .banner-category { margin-top: 1rem; } .product-category .product-category-desc { background-color: white; margin-top: 1rem; padding: 1rem; } .product-category-desc .title { margin-bottom: 1rem; font-size: 20px; font-weight: 700; } .product-category-desc .content-desc { max-height: 200px; overflow: hidden; position: relative; } .product-category-desc .content-desc.active { max-height: 100% !important; } .product-category-desc .content-desc::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff)); background: linear-gradient(transparent, #fff); } .product-category-desc .content-desc.active::after { background: 0; } .product-filter { background-color: white; margin-top: 1rem; padding-bottom: 1rem; } .product-filter .title { font-size: 20px; font-weight: 500; margin-bottom: 1rem; padding: 0.5rem 1rem; background-color: #f7f7f7; } .product-filter .list-filter-content { padding: 10px 0; overflow: hidden; } .product-filter .list-filter-content.active { height: auto !important; } .product-filter table tr { display: block; padding: 0 20px; } .product-filter table tr:hover { background: rgba(247, 247, 247, .5); } .product-filter .filter-list { padding-top: 5px; } .product-filter .filter-list { overflow: hidden; transition: .3s ease-in-out; } .product-filter .filter-list.show-filter { height: auto !important; } .product-filter .filter-list a { border: 1px solid #e1e1e1; padding: 8px 18px; margin: 0 8px 10px 0; display: inline-block; text-decoration: none; color: #222; } .product-filter .filter-list.active a { background-color: #546ce8; color: white; } .product-filter .filter-list a:hover { background-color: #546ce8; color: white; } .product-list-filter { margin: 20px 0; background-color: white; } .product-list-filter .product-filter-sort { display: flex; justify-content: space-between; align-items: center; padding: 20px; } .product-list-filter .product-filter-sort .list-sort { display: flex; align-items: center; } .product-list-filter .product-filter-sort .list-sort a { border: 1px solid #e1e1e1; padding: 8px 18px; margin: 8px 8px 10px 0; display: inline-block; text-decoration: none; color: #222; } .product-list-filter .product-filter-sort .list-sort a:hover, .product-list-filter .product-filter-sort .list-sort a.current { background-color: #546ce8; color: white; } .product-list-filter .product_list { border-top: 1px solid #edeef2; position: relative; margin-right: -2px; } .product-list-filter .product_list .item_product { width: 20%; border: 1px solid #edeef2; border-left: 0; border-top: 0; } .list-filter-content a.toggle-filter { color: #c2c2c2; border: 1px solid #c2c2c2; border-radius: 50%; font-size: 20px; width: 24px; height: 24px; line-height: 24px; text-align: center; display: block; margin: auto 0 auto auto; } .product_list .owl-nav button { position: absolute; top: 50%; margin: 0 !important; width: 27px; height: 55px; line-height: 55px !important; border-radius: 0 50px 50px 0 !important; background: #eee !important; opacity: .5; transition: .3s all; transform: translateY(-50%); outline: none; } .product_list .owl-nav button:hover { transition: .3s all; opacity: 1; } .product_list .owl-nav .owl-prev { left: 0; } .product_list .owl-nav .owl-next { right: 0; border-radius: 50px 0 0 50px !important; } .tab-product-detail .tab-content { background-color: white; width: 100%; display: flex; flex-wrap: wrap; overflow: hidden; } .tab-product-detail .title-tab { width: 100%; display: flex; ; padding-left: 10px; } .tab-product-detail .title-tab li, .tab-product-detail .title-tab a { list-style: none; text-decoration: none; color: black; } .tab-product-detail .title-tab-list { width: 100%; display: flex; ; margin-bottom: 10px; border-bottom: solid 1px #acacac; } .tab-product-detail .title-tab-list li { margin-right: 30px; } .tab-product-detail .title-tab-list li a { font-size: 16px; line-height: 42px; border-bottom: solid 3px rgba(0, 0, 0, 0); margin-bottom: -1px; color: #222222; font-weight: 500; } .tab-product-detail .title-tab-list li.active { border-bottom: solid 3px #2b8ae0; } .tab-product-detail .content-product_list { width: 100%; display: flex; } .tab-product-detail .content-product_list .tab-list { width: 100% } .tab-product-detail .content-product_list .tab-list .item-n { width: 100%; } .tab-product-detail .owl-nav button { position: absolute; top: 50%; margin: 0 !important; width: 27px; height: 55px; line-height: 55px !important; border-radius: 0 50px 50px 0 !important; background: #eee !important; opacity: .5; transition: .3s all; transform: translateY(-50%); outline: none; } .tab-product-detail .owl-nav button:hover { transition: .3s all; opacity: 1; } .tab-product-detail .owl-nav .owl-prev { left: 0; } .tab-product-detail .owl-nav .owl-next { right: 0; border-radius: 50px 0 0 50px !important; } .paging { text-align: center; padding: 25px 0; border-bottom: 1px solid #edeef2; } .paging a { display: inline-block; margin-right: 3px; padding: 4px 10px; border-radius: 5px; border: 1px solid #edeef2; color: #888; font-weight: 300; text-decoration: none; } .paging a:hover, .paging a.current { color: #fff; background: #546ce8; font-weight: 400; border-color: #546ce8; } .category-article { padding: 20px; } .category-article .title-article { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; } .category-article .title-article .title { font-size: 25px; } .category-article .title-article a { text-decoration: none; } .category-article .category-content-article { display: flex; align-items: center; justify-content: space-between; } .category-article .item.clearfix { width: calc(25% - 25px); } .category-article .article-img { position: relative; display: block; margin-bottom: 20px; padding-bottom: 50%; overflow: hidden; } .category-article .fit-img { width: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; min-height: 100%; margin: auto; display: block; } .category-article .art-title { display: block; text-decoration: none; color: black; } .category-article .article-info { margin: 4px 0px 8px 15px; color: #999999; font-size: 12px; } .category-article .article-info span { position: relative; margin-right: 17px; } .category-article .article-info .time-article::before { position: absolute; content: ""; background: url(../images/icon-comment.png); background-repeat: no-repeat; background-position: -4px -1px; padding: 8px; margin-right: 8px; top: 0; left: -15%; vertical-align: sub; } .category-article .article-info .comment-article::before { position: absolute; content: ""; background: url(../images/icon-comment.png); background-repeat: no-repeat; background-position: -26px -1px; padding: 10px; margin-right: 4px; top: 0; left: -24px; } .category-article .article-info .view-article::before { position: absolute; content: ""; background: url(../images/icon-comment.png); background-repeat: no-repeat; background-position: -52px -1px; padding: 10px; margin-right: 4px; top: 0; left: -19px; } .cart-page { padding: 1rem 0; } .cart-content-main { width: 790px; margin: auto auto 20px auto; background: #fff; padding: 20px; } .voucher #discount_code { width: 200px; border-radius: 3px; height: 29px; margin-right: 2px; } .cart-select-quantity span, .cart-select-quantity a { display: inline-block; border: solid 1px #ccc; width: 29px; text-align: center; line-height: 29px; margin: 0 -4px; vertical-align: top; cursor: pointer; font-size: 18px; color: #888; } .cart-select-quantity input { height: 31px; width: 40px; text-align: center; border: solid 1px #ccc; margin-right: 0; border-right: 0; border-left: 0; border-right: 0; } .cart-select-quantity .minus { border-radius: 3px 0 0 3px; } .cart-select-quantity .plus { border-radius: 0 3px 3px 0; } .cart-select-quantity { padding: 4px; } .cart-select-quantity span:hover { background: #ccc; } #tbl_list_cart tr td { border-top: solid 1px #ddd; padding: 10px 5px; } .red { color: #db0006 !important; } .list-btn-cart { display: flex; justify-content: space-between; } .btn-cart { display: block; background: #546CE8; color: #fff; text-transform: uppercase; font-size: 18px; font-weight: 500; border-radius: 3px; width: 100%; text-align: center; padding: 11px; } .btn-cart.btn-cart-orange { background: #ff9900; margin: 0; } .btn-cart:hover { color: #fff; opacity: 0.8; } .voucher_input, .button-check-discount { width: 300px; height: 35px; border: solid 1px #ddd; padding-left: 5px; margin-right: 10px; border-radius: 3px; } .hide, .none { display: none; } .title_box_cart { font-size: 18px; font-weight: 700; line-height: 30px; margin-bottom: 6px; } .box-cart-user-info .sex .radio { display: inline-block; } .box-cart-user-info .sex { overflow: hidden; margin-bottom: 15px; margin-top: 15px; } .table-shopping-cart { border: 1px solid #ccc; border-collapse: collapse; width: 100%; line-height: 19px; font-weight: 700 } .table-shopping-cart td { padding: 5px 10px; text-align: center; border: 1px solid #ccc } td.cart_img { vertical-align: top; border-right: none } .cart_img img { max-width: 60px; max-height: 70px; margin: 0 10px 0 0 } .cart-page #btn-submit { display: inline-block; background: #ccc; padding: 0 25px; line-height: 30px; white-space: nowrap; color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; border-radius: 3px; border: solid 1px #D68731; text-shadow: 1px 1px 2px #666; border-color: #546CE8; background-color: #546CE8; } .txt_center { text-align: center; } .box-cart-user-info input[type="text"], .box-cart-user-info select, .box-cart-user-info textarea { width: 100%; height: 36px; padding: 0 10px; border-radius: 3px; margin-bottom: 12px; box-sizing: border-box; -moz-box-sizing: border-box; border: 1px solid #ccc; } /* tin tức */ .list-category { display: flex; align-items: center; padding: 10px; } .tintuc .tintuc-main { display: flex; padding: 1rem 0; } .list-category .item { padding-right: 2rem; font-weight: 700; } .list-category .item a { color: black; text-transform: uppercase; } .list-category .item a:hover { color: #1b95e0; } .tintuc-main .tintuc-left { width: calc(65% - 10px); display: flex; flex-wrap: wrap; } .tintuc-left .tintuc-noibat:first-child { flex: 0 0 100%; width: 100%; } .tintuc-left .tintuc-noibat { flex: 0 0 33.3%; width: 33.3%; padding: 0 10px; } .tintuc-noibat .tintuc-big { position: relative; } .tintuc-noibat .tintuc-big .blog-img { display: inline-block; width: 100%; } .tintuc-noibat .tintuc-big .tintuc-content { padding: 1rem 0; } .tintuc-noibat .tintuc-big .tintuc-content a { color: black; font-weight: 700; } .tintuc-noibat .tintuc-big .info-tintuc { padding-left: 15px; margin-top: 7px; } .tintuc-noibat .tintuc-big .info-tintuc span { margin-right: 13px; } .tintuc-noibat .tintuc-big .info-tintuc .comment-tintuc::before { background-position: -30px 1px; left: -15px; } .tintuc-noibat .tintuc-big .info-tintuc .view-tintuc::before { background-position: -52px 0px; left: -18px; } .tintuc-noibat:first-child .tintuc-big .blog-img::before { content: ''; display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)); } .tintuc-noibat:first-child .tintuc-big .tintuc-content { color: white; padding: 0 20px; margin-bottom: 1rem; } .tintuc-noibat:first-child .tintuc-big .tintuc-content .title { color: white; font-size: 20px; position: absolute; bottom: 2%; transition: 250ms; } .tintuc-noibat:first-child .tintuc-big .tintuc-content .info-tintuc { position: absolute; bottom: 0; font-size: 13px; transition: 250ms; opacity: 0; } .tintuc-noibat:first-child .tintuc-big .tintuc-content .info-tintuc span { margin: 0px 0 0 18px; } .tintuc-noibat:first-child .tintuc-big:hover .title { bottom: 10%; transition: 250ms; } .tintuc-noibat:first-child .tintuc-big:hover .info-tintuc { bottom: 5%; transition: 250ms; opacity: 1; } .tintuc-noibat:first-child .item-thumb .content-title .info-tintuc { font-size: 12px; padding: 5px 0; color: gray; margin: 0px 0 0 18px; } .tintuc-noibat:first-child .tintuc-big .btn-new { position: absolute; background-color: red; padding: 5px 10px; font-weight: 700; bottom: 18%; transition: 250ms; } .tintuc-noibat:first-child .tintuc-big:hover .btn-new { bottom: 25%; transition: 250ms; } .tintuc-product .title { color: black; font-size: 18px; font-weight: 700; border-bottom: 1px solid rgb(197, 197, 197); margin-bottom: 1rem; padding-bottom: 1rem; display: block; position: relative; } .tintuc-right .blog-left .blog-img { flex: 0 0 150px; position: relative; } .tintuc-product .title::before { position: absolute; content: ""; border-top: 1px solid red; width: 60px; bottom: -1px; left: 0; } .list-tintuc .item .tintuc-img { width: calc(40% -15px); } .list-tintuc .item .tintuc-img { width: calc(40% - 15px); margin-right: 1rem; } .tintuc-product .btn-xemthem { text-align: center; overflow: hidden; margin-top: 26px; margin-bottom: 30px; } .tintuc-product .btn-xemthem a { height: 38px; line-height: 40px; position: relative; font-size: 14px; padding: 10px 30px; border: 1px solid #e0e0e0; border-radius: 2px; text-align: center; color: #888888; background: #fff; } .tintuc-product .btn-xemthem a:hover { border: 1px solid #f70d28; color: #f70d28; } .tintuc-product .btn-xemthem a::after, .tintuc-product .btn-xemthem a::before { content: ""; height: 1px; background: rgb(204, 204, 204); width: 1000px; margin: auto; position: absolute; top: 0; bottom: 0; display: block; cursor: none; pointer-events: none; } .tintuc-product .btn-xemthem a::before { right: 100%; margin-right: 20px; } .tintuc-product .btn-xemthem a::after { left: 100%; margin-left: 20px; } .tintuc-right { margin-left: 1rem; width: 30% } .tintuc-new .title { color: black; width: 100%; font-size: 18px; font-weight: 700; border-bottom: 1px solid rgb(197, 197, 197); margin-bottom: 1rem; padding-bottom: 1rem; display: block; position: relative; } .tintuc-new .title a { color: black; } .tintuc-new .title ::before { position: absolute; content: ""; border-top: 1px solid red; width: 60px; bottom: -1px; left: 0; } .tintuc-right .list-tintuc-new .blog-left { display: flex; } .list-tintuc-new .link-title { font-weight: 700; color: black; height: 45px; } .list-tintuc-new .link-title:hover { color: red; } .tintuc-right .list-tintuc-new .blog-new { margin-bottom: 10px; } .tintuc-right .list-tintuc-new .blog-left { display: flex; } .content-left { width: 225px; margin-right: 5px; } .list-tintuc-new .content-left .info-tintuc { margin-top: 1rem; } .list-tintuc-new .content-left .info-tintuc span { margin: 0 0 0 12px; font-size: 12px; } .tintuc-product-content { display: flex; flex-wrap: wrap; padding-top: 2rem } .tintuc-product-content .tintuc-product-left { max-width: calc(65% - 10px); margin-right: 1rem; } .tintuc-product-content .tintuc-product-right { width: 34%; } .tintuc-product-right .title { color: black; font-size: 18px; font-weight: 700; border-bottom: 1px solid rgb(197, 197, 197); margin-bottom: 1rem; padding-bottom: 1rem; display: block; position: relative; } .tintuc-product-right .title a { color: black; } .tintuc-product-right .title::before { position: absolute; content: ""; border-top: 1px solid red; width: 60px; bottom: -1px; left: 0; } .content-feature .top-one { margin-bottom: 1rem; } .list-feature .item-number:first-child { display: flex; padding-bottom: 8px; border-bottom: 1px solid #acacac; margin-bottom: 12px; } .list-feature .item-number:first-child .number { font-size: 50px; color: #cacaca; font-weight: bold; font-style: italic; padding-right: 15px; background: 0; } .list-feature .title-numer:first-child { border-left: 1px solid #acacac; padding-left: 20px; font-weight: 700; font-size: 16px; } .list-feature .item-number:first-child:hover .number { color: #cacaca; background: 0 } .list-feature .item-number { margin-bottom: 1rem; display: flex; } .list-feature .item-number .number { flex: 0 0 40px; max-width: 40px; height: 40px; border-radius: 40px; background-color: #cecece; text-align: center; line-height: 40px; font-style: italic; font-size: 16px; font-weight: bold; color: #222222; margin-right: 18px; } .list-feature .item-number:hover .number { background: red; color: white; } .list-feature .item-number .title-numer { border-left: 1px solid #acacac; padding-left: 20px; font-weight: 700; font-size: 16px; } .list-feature .item-number .title-numer a:hover { color: red; } .content-game .item-game { margin-bottom: 23px; } .content-game .title-game { font-size: 18px; font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin: 1rem 0; } .content-game .info-tintuc span { margin: 0 20px 0 0; } .content-game .author { font-weight: bold; font-size: 13px; text-transform: uppercase; } .content-game .info-tintuc .time-tintuc::before, .content-game .info-tintuc .comment-tintuc::before, .content-game .info-tintuc .view-tintuc::before { background-position: -4px 1px; } .content-game p { padding: 0.7rem 0; margin: 0.7rem 0; } .content-game .click-more-game { text-transform: uppercase; margin-top: 1rem; color: gray; padding: 10px 25px; border: 1px solid gray; } .content-game .click-more-game:hover { color: red; border: 1px solid red; } .list-blog-category { display: flex; flex-wrap: wrap; } .blog-item { flex: calc(100% / 3); max-width: calc(100% / 3); padding: 0 9px; margin-bottom: 30px; } .blog-item .blog-link { display: block; font-size: 18px; font-weight: 700; margin-bottom: 20px; } .list-blog-category .info-tintuc span { margin: 0 20px 0 0; color: gray; } .list-blog-category .info-tintuc i { margin: 0 5px 0 0; } .content-detail { display: flex; } .content-detail .left-detail { flex: 0 0 70%; max-width: 70%; } .content-detail .left-detail .title { font-size: 30px; font-weight: bold; margin-bottom: 2rem; } .tintuc-game .title { color: black; width: 100%; font-size: 18px; font-weight: 700; border-bottom: 1px solid rgb(197, 197, 197); margin-bottom: 1rem; padding-bottom: 1rem; display: block; position: relative; } .product-lienquan .pright-img { float: left; width: 80px; } .product-lienquan li { overflow: hidden; padding: 5px 0; border: solid 1px #ffffffb3; border-top: solid 1px #eee; transition: all 0.5s ease; } .product-lienquan li:hover { border: solid 1px #e00 !important; } .product-lienquan li:first-child { border-color: #ffffff8a; } .pright-name { line-height: 17px; height: 51px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .pright-right { margin-left: 90px; } .product-lienquan .item-price { font-size: 18px; font-weight: 700; color: red; }