@import 'tailwindcss'; @plugin 'daisyui'; :root { --background: #ffffff; --foreground: #171717; --green: #36ac4a; --red: #e31223; --color-primary: #0f5b99; --white: #fff; --black: #000; } .color-primary { color: var(--color-primary); } .color-white { color: var(--white); font-style: normal; } .color-black { color: var(--black); } .color-red { color: var(--red); } .color-green { color: var(--green); } *, ::after, ::before { -webkit-box-sizing: inherit; box-sizing: inherit; } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); } @media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; --foreground: #ededed; } } body { background: var(--background); color: var(--foreground); font-family: 'SF Pro Display', sans-serif; line-height: 18px; font-weight: 400; color: rgb(70, 70, 70); background-color: rgb(255, 255, 255); min-width: 1220px; word-break: break-word; } html { font-size: 14px; scroll-behavior: smooth; line-height: 16px; } a:hover { color: var(--color-primary); } li, ol, ul { list-style: none; } .fz-16 { font-size: 16px; } img { display: block; max-width: 100%; height: auto; } input, input::placeholder, select, textarea, textarea::placeholder { font-family: 'SF Pro Display', sans-serif; } .nd { font-size: 13pt; line-height: 1.5; text-align: justify; } .nd h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67em; -webkit-margin-after: 0.67em; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight: 700; margin: 0.67em 0; } .nd h2 { display: block; font-size: 1.5em; -webkit-margin-before: 0.83em; -webkit-margin-after: 0.83em; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight: 700; margin: 0.83em 0; } .nd h4 { display: block; -webkit-margin-before: 1.33em; -webkit-margin-after: 1.33em; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight: 700; font-size: 1em; } .nd ul { padding-left: 40px !important; margin: 1em 0; list-style: initial; } .nd ol li, .nd ul li { list-style: initial !important; } .nd ol { padding-left: 40px !important; margin: 1em 0; list-style: decimal !important; } .nd ol li { list-style-type: decimal !important; } .nd p { margin: 12px 0; font-size: 17px !important; line-height: 25px !important; } .nd span { font-size: 17px !important; line-height: 25px !important; } .nd table { border-collapse: collapse; } .nd table td, .nd table th { border: solid 1px #ddd; padding: 5px; } .nd a { color: #4285f4; } .nd { line-height: 1.45; } .nd table td img { max-width: 9999px; } .nd h1 { font-size: 24px; } .nd h2 { font-size: 22px; } .nd h3 { font-size: 20px; } .nd h4 { font-size: 18px; } .border-error { border: 2px solid red !important; } .boder-radius-10 { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .grid--product-info { -ms-grid-columns: 2fr 1fr; grid-template-columns: 2fr 1fr; } .grid--product-details { -ms-grid-columns: 3fr 1fr; grid-template-columns: 3fr 1fr; } .grid--product-details-inside { -ms-grid-columns: 5.13fr 6.48fr; grid-template-columns: 7fr 5.76fr; } .swiper-button-next, .swiper-button-prev { width: 28px !important; height: 44px !important; background: #d9d9d9; opacity: 0.5; } .swiper-button-prev { transform: translateX(-10px); -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); } .swiper-button-next { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } .swiper-button-next::after, .swiper-button-prev::after { font-size: 18px !important; color: var(--black); } .swiper { width: 100%; height: 100%; margin-left: auto; margin-right: auto; } .swiper-slide img { display: block; width: 100%; } .swiper-pagination-bullet { width: 12px !important; height: 12px !important; background: #0009 !important; opacity: 1 !important; } .swiper-pagination-bullet-active { background: #0f5b9a !important; width: 42px !important; height: 12px !important; border-radius: 10px !important; } .swiper-slide-thumb-active { border: 1px solid var(--color-primary) !important; } .container { max-width: 1224px; padding: 0 12px; margin: 0 auto; } .box-empty { font-size: 32px; line-height: 36px; padding: 40px 0; color: #0f5b99; width: 100%; } .static-html a, .static-html b, .static-html h1, .static-html h2, .static-html h3, .static-html h4, .static-html h5, .static-html h6, .static-html ol, .static-html p, .static-html span, .static-html strong, .static-html ul { padding: revert !important; font-family: 'SF Pro Display', sans-serif; line-height: 26px; font-size: 16px !important; } .static-html a { color: #4285f4; } @-webkit-keyframes shake { 0% { -webkit-transform: rotate(0) scale(1) skew(1deg); } 10% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); } 20% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); } 30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); } 40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); } 50% { -webkit-transform: rotate(0) scale(1) skew(1deg); } 100% { -webkit-transform: rotate(0) scale(1) skew(1deg); } } @keyframes shake { 0% { -webkit-transform: rotate(0) scale(1) skew(1deg); } 10% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); } 20% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); } 30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); } 40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); } 50% { -webkit-transform: rotate(0) scale(1) skew(1deg); } 100% { -webkit-transform: rotate(0) scale(1) skew(1deg); } } @-webkit-keyframes gradient { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } } @keyframes gradient { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } } .success-form-svg { display: block; height: 80px; width: 80px; color: #0f5b99; } .circle { stroke-dasharray: 76; stroke-dashoffset: 76; -webkit-animation: draw 0.5s forwards; animation: draw 0.5s forwards; } .tick { stroke-dasharray: 18; stroke-dashoffset: 18; -webkit-animation: draw 0.5s forwards 0.6s; animation: draw 0.5s forwards 0.6s; } @-webkit-keyframes draw { to { stroke-dashoffset: 0; } } @keyframes draw { to { stroke-dashoffset: 0; } } @-webkit-keyframes phonering { 0% { -webkit-transform: rotate(0) scale(1) skew(1deg); } 10% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); } 20% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); } 30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); } 40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); } 50% { -webkit-transform: rotate(0) scale(1) skew(1deg); } 100% { -webkit-transform: rotate(0) scale(1) skew(1deg); } } .global-fixed-right a { font-size: 22px; width: 45px; height: 45px; position: fixed; border-radius: 50%; z-index: 999; -webkit-transition: 0.4s all; -o-transition: 0.4s all; transition: 0.4s all; right: 10px; color: #fff; } .global-fixed-right .fix-face { bottom: 300px; background: #4267b2; } .global-fixed-right .fix-youtube { bottom: 250px; background: red; } .global-fixed-right .scroll-top-btn { bottom: 200px; background: var(--swiper-theme-color); border: 1px solid var(--swiper-theme-color); color: #fff; } .global-fixed-right .messenger { background: #fff; bottom: 50px; width: 170px; padding: 10px; border-radius: 15px; -webkit-box-shadow: 0 1px 2px 1px #01010133; box-shadow: 0 1px 2px 1px #01010133; color: #007bff; font-size: 14px; height: 50px; } .global-fixed-right .messenger img { width: 40px; height: 40px; margin-right: 10px; } .global-fixed-right .scroll-top-btn:hover { color: #fff; background: var(--swiper-theme-color); border: none; } .global-fixed-left { position: fixed; left: 20px; bottom: 50px; width: 80px; z-index: 9999; } .global-fixed-left .fixed sale { width: 56px; height: 56px; position: relative; cursor: pointer; -webkit-box-shadow: 0 3px 10px 0 #000; box-shadow: 0 3px 10px 0 #000; -webkit-animation: uptocallmini_offline 2s 0 cubic-bezier(0.42, 0, 0.2, 0.8) infinite; animation: uptocallmini_offline 2s 0 cubic-bezier(0.42, 0, 0.2, 0.8) infinite; border-radius: 50% !important; } @-webkit-keyframes uptocallmini_offline { 0% { -webkit-box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0 0 transparent, 0 0 0 0 rgba(53, 161, 32, 0); box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0 0 transparent, 0 0 0 0 rgba(53, 161, 32, 0); } 10% { -webkit-box-shadow: 0 0 8px 6px #35a120, 0 0 12px 10px transparent, 0 0 12px 14px #35a120; box-shadow: 0 0 8px 6px #35a120, 0 0 12px 10px transparent, 0 0 12px 14px #35a120; } 100% { -webkit-box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0 40px transparent, 0 0 0 40px rgba(53, 161, 32, 0); box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0 40px transparent, 0 0 0 40px rgba(53, 161, 32, 0); } } @keyframes uptocallmini_offline { 0% { -webkit-box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0 0 transparent, 0 0 0 0 rgba(53, 161, 32, 0); box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0 0 transparent, 0 0 0 0 rgba(53, 161, 32, 0); } 10% { -webkit-box-shadow: 0 0 8px 6px #1cb2ed, 0 0 12px 10px transparent, 0 0 12px 14px #1cb2ed; box-shadow: 0 0 8px 6px #1cb2ed, 0 0 12px 10px transparent, 0 0 12px 14px #1cb2ed; } 100% { -webkit-box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0 40px transparent, 0 0 0 40px rgba(53, 161, 32, 0); box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0 40px transparent, 0 0 0 40px rgba(53, 161, 32, 0); } } .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; } .text-cart-success { font-size: 24px; font-weight: 600; line-height: 1.6; padding-top: 30px; color: var(--color-primary); } .ease-015s { -webkit-transition: all ease 0.15s; -o-transition: all ease 0.15s; transition: all ease 0.15s; } .success-form { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; background: rgba(0, 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; } .global-tooltip, .tippy-box { display: none; position: absolute; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); background-color: #fff; color: #000; border-radius: 10px; width: 440px; z-index: 999; overflow: hidden; } .tooltip-name { -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); border-radius: 10px 10px 0 0; padding: 12px; background: -webkit-gradient( linear, left bottom, left top, color-stop(10.84%, #0167d5), color-stop(104.56%, #0f5b99) ); background: -o-linear-gradient(bottom, #0167d5 10.84%, #0f5b99 104.56%); background: linear-gradient(0deg, #0167d5 10.84%, #0f5b99 104.56%); color: #fff; font-size: 18px; line-height: 26px; text-transform: uppercase; } .tooltip-descreption { margin-top: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 8px; } .tooltip-descreption-price { padding: 0 12px; padding-bottom: 6px; } .tooltip-descreption-price p { font-weight: 600; line-height: 24px; } .tooltip-descreption-info { margin-left: 80px; color: #105fbd; font-weight: 600; line-height: 24px; } .tooltip-input { -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); margin-top: 12px; background-color: var(--color-primary); padding-left: 10px; margin: 0 12px; font-size: 18px; color: #fff; border-radius: 8px; } .tooltip-input span { padding: 10px 0; } .box-tooltip-gift { border: 1px solid #0f5b99; margin: 0 10px 10px; } .tooltip-gift { background: #fff; -webkit-box-shadow: unset; box-shadow: unset; border-radius: unset; } .tooltip-gift .icon-gift { background: var(--color-primary); color: #fff; font-weight: 700; font-size: 16px; line-height: 40px; position: relative; margin: 6px 0 11px -30px; max-width: 170px; width: 100%; padding-left: 40px; } .tooltip-gift .icon-gift::before { content: ''; border-top: 8px solid #105fbd; border-left: 8px solid transparent; position: absolute; left: 0; top: 100%; } .tooltip-gift .icon-gift i { width: 18px; height: 18px; background-position: -59px -98px; position: absolute; top: 12px; left: 16px; } .tooltip-gift .icon-gift::after { content: ''; width: 28px; height: 28px; background: #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 6px; right: -13px; } .icon-database { margin-right: 12px; padding: 10px; border: 1px solid var(--color-primary); border-radius: 10px; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); } .tooltip-list { line-height: 24px; padding: 20px; } .tooltip-list ul { font-size: 14px; list-style: none; } .tooltip-descreption-info .card-price-origin-line-through { position: absolute; top: 50%; left: 0; width: 100%; border-bottom: 1px solid #000; } .box-tooltip-gift .tooltip-list-gift { line-height: 20px; padding: 0 20px 20px; } .box-tooltip-gift .tooltip-list-gift p { margin-bottom: 4px; } .sprite { background-image: url(https://nguyencongpc.vn/static/assets/nguyencong_2023/images/spritesheet1.png); background-repeat: no-repeat; display: block; background-size: 366px 284px !important; } .sprite-more { background-image: url(https://nguyencongpc.vn/static/assets/nguyencong_2023/images/sprite_more.png); background-repeat: no-repeat; display: block; background-size: 116.5px 107.5px !important; } .sprite-1doi1-detail { width: 16px; height: 21px; background-position: -3px -3px; } .sprite-account-header { width: 25px; height: 26px; background-position: -24px -3px; } .sprite-article-header { width: 25px; height: 21px; background-position: -54px -3px; } .sprite-bct-fotoer { width: 132px; height: 40px; background-position: -84px -3px; } .sprite-big-play-video-article { width: 58px; height: 41px; background-position: -221px -3px; } .sprite-buildpc-header { width: 14px; height: 25px; background-position: -3px -49px; } .sprite-camket-detail { width: 21px; height: 21px; background-position: -21px -49px; } .sprite-cart-comboset-detail { width: 19px; height: 17px; background-position: -47px -49px; } .sprite-cart-detail { width: 19px; height: 19px; background-position: -70px -49px; } .sprite-cart-header { width: 23px; height: 21px; background-position: -94px -49px; } .sprite-clock-item-article { width: 13px; height: 13px; background-position: -122px -49px; } .sprite-deal-hot-category { width: 26px; height: 33px; background-position: -140px -49px; } .sprite-delete-cart { width: 14px; height: 14px; background-position: -170px -49px; } .sprite-discount-sp { width: 45px; height: 19.5px; background-position: -188.5px -48.5px; } .sprite-dohoa-category { width: 61px; height: 61px; background-position: -170px -73px; } .sprite-doitra-footer { width: 24px; height: 31px; background-position: -239px -49px; } .sprite-fb-footer { width: 33px; height: 33px; background-position: -3px -85px; } .sprite-fire-deal { width: 29px; height: 29px; background-position: -41px -85px; } .sprite-flashsale-detail { width: 34px; height: 33px; background-position: -74px -85px; } .sprite-gaming-category { width: 60px; height: 61px; background-position: -3px -139px; } .sprite-giaohang-footer { width: 40px; height: 31px; background-position: -236px -85px; } .sprite-giaohang-header { width: 20px; height: 16px; background-position: -113px -85px; } .sprite-gift-detail { width: 24px; height: 25px; background-position: -113px -120px; } .sprite-hoctap-category { width: 61px; height: 61px; background-position: -142px -139px; } .sprite-hotro-footer { width: 36px; height: 36px; background-position: -236px -120px; } .sprite-hotrotragop-detail { width: 21px; height: 21px; background-position: -68px -161px; } .sprite-icon-deal-home { width: 21px; height: 41px; background-position: -93px -161px; } .sprite-icon-hot-deal { width: 50px; height: 20px; background-position: -207px -161px; } .sprite-icon-mayanh-detail { width: 20px; height: 21px; background-position: -262px -161px; } .sprite-icon-play-video-detail { width: 29px; height: 21px; background-position: -207px -185px; } .sprite-icon-reply-detail { width: 19px; height: 15px; background-position: -68px -186px; } .sprite-icon-review-homepage { width: 18px; height: 15px; background-position: -119px -161px; } .sprite-icon-send-detail { width: 19px; height: 20px; background-position: -241px -186px; } .sprite-icon-video-detail { width: 31px; height: 23px; background-position: -3px -211px; } .sprite-instagram-footer { width: 33px; height: 33px; background-position: -39px -211px; } .sprite-item-gift-detail { width: 21px; height: 22px; background-position: -77px -211px; } .sprite-lienhe-header { width: 23px; height: 23px; background-position: -103px -211px; } .sprite-like-productdetail { width: 20px; height: 19px; background-position: -130px -211px; } .sprite-location-detail { width: 17px; height: 23px; background-position: -267px -49px; } .sprite-manhinh-category { width: 60px; height: 61px; background-position: -155px -211px; } .sprite-mongnhe-category { width: 61px; height: 61px; background-position: -220px -211px; } .sprite-news-detail { width: 25px; height: 21px; background-position: -284px -3px; } .sprite-play-youtube { width: 49px; height: 49px; background-position: -314px -3px; } .sprite-ram-category { width: 61px; height: 61px; background-position: -289px -56px; } .sprite-sanphammoi-detail { width: 20px; height: 21px; background-position: -276px -122px; } .sprite-search-header { width: 17px; height: 17px; background-position: -301px -122px; } .sprite-share-detail { width: 22px; height: 19px; background-position: -323px -122px; } .sprite-tainghe-category { width: 61px; height: 61px; background-position: -301px -145px; } .sprite-thanhtoan-footer { width: 41px; height: 41px; background-position: -285px -211px; } .sprite-tiktok-footer { width: 33px; height: 33px; background-position: -331px -211px; } .sprite-tintuc-category { width: 20px; height: 21px; background-position: -3px -249px; } .sprite-tragop-header { width: 30px; height: 25px; background-position: -28px -249px; } .sprite-youtube-fotoer { width: 33px; height: 33px; background-position: -63px -249px; } .sprite-zalo-footer { width: 33px; height: 33px; background-position: -101px -249px; } .sprite-PC { width: 13px; height: 17px; background-position: -5px -5px; } .sprite-danh-gia-category { width: 15px; height: 15px; background-position: -28px -5px; } .sprite-gia-giam-category { width: 15px; height: 15px; background-position: -53px -5px; } .sprite-gia-tang-cateogry { width: 15px; height: 15px; background-position: -53px -30px; } .sprite-laptop { width: 23px; height: 17px; background-position: -5px -54px; } .sprite-linhkien { width: 17px; height: 17px; background-position: -38px -54px; } .sprite-manhinh { width: 19px; height: 17px; background-position: -65px -54px; } .sprite-phimchuot { width: 19px; height: 18px; background-position: -78px -5px; } .sprite-phongnet { width: 19px; height: 17px; background-position: -93px -33px; } .sprite-thietbi { width: 15px; height: 17px; background-position: -93px -60px; } .sprite-trao-doi-category { width: 17px; height: 17px; background-position: -5px -86px; } .sprite-star-5 { background: url(https://nguyencongpc.vn/static/assets/nguyencong_2023/images/star.png); background-size: 90px 100px !important; display: block; width: 90px; height: 16px; } .star0 { background-position: -269px 218px !important; } .star1 { background-position: -269px 234px !important; } .star2 { background-position: -269px 250px !important; } .star3 { background-position: -269px 267px !important; } .star4 { background-position: -269px 183px !important; } .star5 { background-position: -269px 300px !important; } .sprite-1star { background: url(https://nguyencongpc.vn/static/assets/nguyencong_2023/images/star_rating.png); display: block; } .rating-selection { display: inline-block; } .rating-selection input { opacity: 0; float: right; width: 17px; height: 17px; padding: 0; margin: 0 0 0 -16px; } .rating-selection label:hover, .rating-selection label:hover ~ label { background-position: -16px -57px !important; } .rating-input:checked ~ .rating-star, .rating-input:checked ~ .rating-star:hover { background-position: -16px -57px !important; } .rating-selection label { position: relative; float: right; display: block; width: 17px; height: 17px; margin: 0 3px; background-position: -16px -28px !important; } .global-menu-breadcrumb { width: 190px; height: 36px; background: #000; border-radius: 5px; color: #fff; margin-right: 16px; } .box-breadcrumb-global { padding-top: 10px; } .global-breadcrumb ol { padding-bottom: 13px; line-height: 19px; color: #464646; } .global-breadcrumb li span { margin: 0 6px; color: #3a3a3a; font-size: 13px; } .global-breadcrumb li .gach-cheo { margin: 0 3px; text-decoration: none; font-size: 10px; } .global-breadcrumb li span:hover { color: var(--color-primary); } .global-breadcrumb li:last-child .gach-cheo { display: none; } .paging a { margin-left: 6px; padding: 4px 8px; line-height: 20px; background: #ebebeb; border-radius: 4px; text-align: center; font-size: 14px; color: #3a3a3a; } .paging a.current, .paging a:hover { background: #0a76e4; border: solid 1px #0a76e4; color: #fff; font-weight: 600; } .box-question { background: #fff; padding: 14px 12px; margin-top: 12px; } .box-question .title-question { font-size: 20px; line-height: 24px; color: #0a76e4; text-align: center; text-transform: uppercase; margin-bottom: 8px; } .box-question .item-question { margin-bottom: 10px; padding: 10px 15px; border: 1px solid #b8b8b8; color: #484848; } .box-question .item-question:last-child { margin-bottom: 0; } .box-question .item-question.current i { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); } .box-question .content-question { font-size: 14px; line-height: 18px; margin-top: 10px; display: none; } .box-question .content-question li { list-style: disc; margin-left: 12px; } .img-article img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; min-height: 100%; margin: auto; display: block; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.5s all; -o-transition: 0.5s all; transition: 0.5s all; } .item-article-col { margin-bottom: 14px; } .item-article-col .img-article-col { width: 113px; border-radius: 5px; } .item-article-col .img-article-col img { border-radius: 5px; } .item-article-col .content-article-col { width: calc(100% - 113px - 8px); color: #000; } .item-article-col .content-article-col:hover { color: var(--color-primary); } .title-box { font-size: 24px; color: #3a3a3a; line-height: 28px; text-transform: uppercase; margin-bottom: 16px; } .title-update { color: var(--red); text-transform: uppercase; font-size: 16px; min-height: 50px; } .header .header-top img { width: 100%; height: 60px; } .header i { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .header .header-middle .header-menu-category .box-title i, .header .icon-search { -webkit-filter: unset; filter: unset; } .header .header-middle { top: -20px; padding: 8px 12px 12px; background: linear-gradient(180deg, #2e9bfb 0%, #1d52e7 100%); -webkit-box-shadow: 0 0 7px 0 rgba(130, 130, 130, 0.25); box-shadow: 0 0 7px 0 rgba(130, 130, 130, 0.25); } .header .header-middle.header-fixed { position: fixed; top: 0; left: 0; z-index: 10; min-width: 1224px; right: 0; -webkit-transition: 0.5s all; -o-transition: 0.5s all; transition: 0.5s all; } .header .header-middle.header-fixed .header-middle-left { display: none; } .header .header-middle.header-fixed .header-menu-category { display: block; } .header .header-middle.header-fixed .header-middle-right { width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .header .header-middle .header-menu-category { display: none; position: relative; } .header .header-middle .header-menu-category .box-title { width: 200px; height: 40px; background: #fff; border-radius: 5px; color: var(--color-primary); margin-right: 16px; cursor: pointer; } .header .header-middle .header-menu-category .box-title .title-menu { font-size: 13px; text-transform: uppercase; line-height: 16px; } .header .header-middle .header-menu-category .cau-noi { width: 219px; height: 18px; top: 35px; } .header .header-middle .header-menu-category .list-menu { top: 100%; border-radius: 0 0 10px 10px; visibility: hidden; width: 200px; background: #fff; opacity: 0; position: absolute; left: 0; z-index: 2; -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); } .header .header-middle.header-fixed .header-menu-category:hover .list-menu { opacity: 1; visibility: visible; -webkit-transition: 0.4s all; -o-transition: 0.4s all; transition: 0.4s all; top: 135% !important; } .header .header-middle.header-fixed .list-menu .item:first-child:hover { border-radius: unset; } .header .header-middle.header-fixed .list-menu .sub-menu-list { background: #fff; position: absolute; z-index: 1; top: 0; left: 310px; width: calc(1200px - 200px); height: 501px; overflow: auto; font-size: 14px; padding: 5px 16px; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; } .header .header-middle.header-fixed .list-menu .item:hover .sub-menu-list { display: -ms-grid; display: grid; -ms-grid-rows: -webkit-max-content; -ms-grid-rows: max-content; grid-template-rows: -webkit-max-content; grid-template-rows: max-content; gap: 30px 12px; left: 200px; opacity: 1; visibility: visible; -webkit-transition: 0.4s all; -o-transition: 0.4s all; transition: 0.4s all; } .header .header-middle.header-fixed .list-menu .sub-menu-list .cat-2 { color: var(--swiper-theme-color); font-size: 14px; line-height: 22px; text-transform: uppercase; margin-bottom: 12px; } .header .header-middle.header-fixed .list-menu .sub-menu-list .cat-3 { font-size: 13px; } .header .header-middle.header-fixed .list-menu .sub-menu-list .cat-3:hover { color: var(--red); } .header .header-middle .header-search-group { width: 438px; height: 40px; position: relative; margin-right: 29px; } .header .header-middle .header-search-group { width: 438px; height: 40px; position: relative; } .header .header-middle .form-group-input { width: 100%; background: #fff; border: none; border-radius: 5px; padding-left: 12px; outline: 0; font-size: 14px; height: 40px; color: #464646; } .header .header-middle .form-group-input::-webkit-input-placeholder { color: #aaa; } .header .header-middle .form-group-input::-moz-placeholder { color: #aaa; } .header .header-middle .form-group-input:-ms-input-placeholder { color: #aaa; } .header .header-middle .form-group-input::-ms-input-placeholder { color: #aaa; } .header .header-middle .form-group-input::placeholder { color: #aaa; } .header .header-middle .search-btn-header { border: none; background: unset; outline: 0; position: absolute; top: 0; right: 0; bottom: 0; cursor: pointer; } .header .header-middle .search-btn-header:hover i { -webkit-filter: invert(24%) sepia(95%) saturate(1799%) hue-rotate(201deg) brightness(89%) contrast(91%); filter: invert(24%) sepia(95%) saturate(1799%) hue-rotate(201deg) brightness(89%) contrast(91%); -webkit-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; transition: color 0.2s ease-out; } .header .header-middle .search-results { display: none; border: 1px solid #ddd; background: #fff; position: absolute; top: 100%; left: 0; width: 100%; z-index: 999; } .header .header-middle .search-results-list { max-height: 345px; overflow: auto; z-index: 999; } .header .header-middle .search-results a.item:hover { background-color: #f5f5f5; } .header .header-middle .box-header .wrapper, .p-img, .product-detail-page .pd-info-left-group { overflow: hidden; } .header .header-middle .search-results .item { background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; padding: 10px; width: 100%; position: relative; text-decoration: none; font-weight: 400; } .footer-end-page, .header .header-middle .account .title-list a:hover, .product-detail-page .info-tech tr:nth-child(2n), .search-results a.item:hover { background-color: #f5f5f5; } .header .header-middle .search-results img { width: 60px; } .header .header-middle .search-results .title { font-size: 14px; color: #333; } .header .header-middle .search-results .price { color: #ec1c24; } .header .header-middle .box-tabs-header { gap: 22px; color: #fff; } .header .header-middle .box-tabs-header .item-tab-header:hover { color: #fff; } .header .header-middle .box-tabs-header .item-tab-header:hover .icon-item-tab { top: -5px; -webkit-transition: 0.2s ease-in; -o-transition: 0.2s ease-in; transition: 0.2s ease-in; } .header .header-middle .box-tabs-header .icon-item-tab { height: 25px; position: relative; width: 25px; top: 0; -webkit-transition: 0.2s ease-out; -o-transition: 0.2s ease-out; transition: 0.2s ease-out; } .header .header-middle .box-tabs-header span { font-size: 12px; text-transform: capitalize; line-height: 14px; } .header .header-middle .icon-cart-header { position: relative; } .header .header-middle .icon-cart-header .cart-count { font-size: 10px; background: #fff; width: 13px; height: 13px; border-radius: 50%; text-align: center; line-height: 13px; font-weight: 700; color: #f60000; font-size: 10px; position: absolute; top: -2px; right: -5px; text-decoration: unset; } .header .header-middle .cau-noi { width: 143px; height: 14px; position: absolute; top: 38px; opacity: 0; right: 0; } .header .header-middle .cart-ttip { opacity: 0; position: absolute; background-color: #fff; border-radius: 10px; width: 360px; height: auto; right: 0; z-index: 99; -webkit-box-shadow: 0 1px 6px #000; box-shadow: 0 1px 6px #000; visibility: hidden; top: 130px; color: #000; } .header .header-middle .cart-ttip i { -webkit-filter: unset !important; filter: unset !important; } .header .header-middle .cart-ttip-price-button { border-radius: 5px; padding: 10px; background: #0f5b99; text-align: center; margin: 10px; color: #fff; font-weight: 700; } .header .header-middle .cart-ttip-price-button:hover { background: var(--swiper-theme-color); } .header .header-middle .cart-ttip-item-container { max-height: 300px; overflow: auto; padding: 0 10px; } .header .header-middle .compare-item { font-size: 14px; padding: 10px 0; border-bottom: 1px solid #d9d9d9; } .header .header-middle .price-compare { color: #da251c; font-size: 18px; line-height: 20px; } .header .header-middle .cart-ttip-item-container .compare-item:hover { background: var(--color-global); } .header .header-middle .cart-ttip-item-container .compare-item:hover .compare-item-text p { color: #fff !important; } .header .header-middle .cart-ttip-item-container .compare-item:hover .header-cart-item-price b { color: red !important; } .header .header-middle .cart-ttip .cart-ttip-price { padding: 12px; border-top: 1px solid var(--swiper-theme-color); } .header .header-middle .cart-ttip .cart-ttip-price p:first-child { font-size: 15px; } .header .header-middle .cart-ttip .cart-ttip-price p:nth-child(2) { font-size: 13px; color: #da251c; } .header .header-middle .cart-ttip .cart-ttip-price p:last-child { font-size: 20px; color: #da251c; } .header .header-middle .compare-item .compare-item-text .name-compare-item:hover { color: #e10034; } .header .header-middle .compare-item:last-child { border: none !important; } .header .header-middle .compare-item .compare-item-text span { line-height: 32px; } .header .header-middle .img-compare { width: 80px; } .header .icon-showroom { font-size: 16px; color: #fff; border: 1px solid #fff; border-radius: 50%; width: 35px; height: 30px; line-height: 30px; text-align: center; margin: 0 10px 0 25px; } .header-null-cart { text-align: center; padding: 30px; color: #000; font-weight: 600; font-size: 20px; } #js-header-cart:hover .cart-ttip { opacity: 1; visibility: visible; -webkit-transition: 0.6s all; -o-transition: 0.6s all; transition: 0.6s all; top: 46px; } .header .header-bottom { background: #2366ef; color: #000; padding-top: 10px; } .header .header-bottom .title-header-bottom { color: #fff; } .header .header-bottom .item-category-header { padding-bottom: 10px; } .header .header-bottom .item-category-header:hover .list-category-child { opacity: 1; visibility: visible; -webkit-transform: translateY(-28px); -ms-transform: translateY(-28px); transform: translateY(-28px); -webkit-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; } .header .header-bottom .list-category-child { position: absolute; top: 35px; border-radius: 5px; background: #fff; padding: 0 12px; z-index: 99; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); width: 100%; opacity: 0; top: 55px; visibility: hidden; -webkit-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; left: 0; max-height: 535px; overflow: auto; } .header .header-bottom .list-category-child .box-left { width: 70%; border-right: 1px solid #e3e3e3; padding: 12px 0; } .header .header-bottom .list-category-child .box-left .list-child-lv3 .child-lv3:hover { color: var(--red); } .header .header-bottom .list-category-child .box-left .list-child-lv3 a { margin-bottom: 8px; } .header .header-bottom .list-category-child .box-left .sub-menu .child-lv2 { text-transform: uppercase; } .header .header-bottom .list-category-child .box-left .sub-menu .child-lv2:hover { color: var(--color-primary); } .header .header-bottom .list-category-child .box-right { padding: 12px 0 12px 12px; } .header .header-bottom .list-category-child .box-right .title { font-size: 18px; margin-bottom: 16px; } .header .header-bottom .list-category-child .box-right .img-item { width: 80px; } .header .header-bottom .list-category-child .box-right .price-item { color: var(--red); } .header .header-bottom .list-category-child .box-right .item-product-bestsale { margin-bottom: 12px; } .header .header-bottom .list-category-child .box-right .item-product-bestsale:hover .product-name { color: var(--color-primary); } #popup-hotline { max-width: 750px; padding: 0; max-height: 650px; display: none; border-radius: 10px; } #popup-hotline.active { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; overflow: auto; z-index: 9999; display: block; } #popup-hotline .title-content-pop { font-size: 20px; text-transform: uppercase; color: var(--color-primary); font-weight: 500; margin-bottom: 14px; } #business .title-pop, #popup-hotline .title-pop { width: 100%; float: left; padding: 10px 15px; font-size: 20px; font-weight: 700; } #business .content-pop, #popup-hotline .content-pop { width: 100%; float: left; padding: 15px; } #business .item-pop, #popup-hotline .item-pop { width: 100%; float: left; margin-bottom: 20px; } #business .item-pop .title-item-pop, #popup-hotline .item-pop .title-item-pop { width: 100%; float: left; font-weight: 700; padding-bottom: 5px; margin-bottom: 10px; border-bottom: solid 1px #e1e1e1; } #business .item-pop .item-people, #popup-hotline .item-pop .item-people { width: 100%; float: left; margin-bottom: 5px; } #business .item-pop .item-people a, #popup-hotline .item-pop .item-people a { font-weight: 700; margin-right: 10px; color: #ffb233; } #business .item-cskh, #popup-hotline .item-cskh { width: 100%; float: left; font-size: 18px; } .list-menu .item { padding: 6px 10px; cursor: pointer; } .list-menu .item:hover { background: #0a76e4; } .list-menu .item:first-child:hover { border-radius: 10px 10px 0 0; } .list-menu .item:last-child:hover { border-radius: 0 0 10px 10px; } .list-menu .item:hover .cat-title { color: #fff; } .list-menu .item:hover .icon-menu { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .list-menu .item:last-child { margin-bottom: 0; } .list-menu .item .icon-menu { width: 20px; } .list-menu .item .cat-title { text-transform: uppercase; color: #000; font-size: 12px; line-height: 16px; margin-left: 8px; } .footer-main .footer-policy { background: #e5e5e5; padding: 27px 0; } .footer-main .footer-policy .item { width: 25%; padding: 15px 12px; border-radius: 10px; height: 88px; background: #fff; } .footer-main .footer-policy .box-title-policy { margin-left: 10px; } .footer-main .footer-policy .box-title-policy b { text-transform: uppercase; font-size: 16px; line-height: 18px; font-weight: 500; color: #000; margin-bottom: 4px; } .footer-main .footer-policy .box-title-policy span { text-transform: capitalize; } .footer-main .box-info-main { background: #fff; } .footer-main .footer-list-info-main { padding: 18px 10px 20px; font-size: 13px; line-height: 24px; gap: 10px; } .footer-main .footer-list-info-main .item-info-main { width: 25%; } .footer-main .footer-list-info-main .list-social-footer { margin: 10px 0; gap: 8px; } .footer-main .footer-list-info-main .bct-footer { margin-bottom: 10px; } .footer-main .footer-list-info-main .item-social { border-radius: 5px; } .footer-main .footer-list-info-main p { font-size: 14px; color: #000; text-transform: uppercase; margin-bottom: 10px; } .footer-main .footer-list-info-main a { display: block; } .footer-main .footer-list-info-main a:hover { text-decoration: underline; color: var(--color-primary); } .footer-main .footer-bottom { background: #f4f4f4; padding: 15px 0; font-size: 13px; line-height: 20px; } .footer-main .footer-bottom .list-contact-footer { gap: 20px; } .footer-main .footer-bottom a:hover { text-decoration: underline; color: var(--color-primary); } .fixed-left { position: fixed; top: 127px; left: calc(50% - 770px); -webkit-transition: 0.4s all; -o-transition: 0.4s all; transition: 0.4s all; } .fixed-right { position: fixed; top: 127px; right: calc(50% - 770px); -webkit-transition: 0.4s all; -o-transition: 0.4s all; transition: 0.4s all; } .fixed-left.active, .fixed-right.active { top: 73px; } .fixed_banner.show { display: block; } .product-item { position: relative; border-radius: 5px; background: #fff; padding: 12px 13px; position: relative; -webkit-box-shadow: 0 -1px 9px 0 rgba(164, 164, 164, 0.25); box-shadow: 0 -1px 9px 0 rgba(164, 164, 164, 0.25); min-width: 0; } .product-item .product-image { position: relative; display: block; margin-bottom: 6px; padding-bottom: 100%; width: 100%; } .product-item .product-image img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto; display: block; transition: 0.4s all; -webkit-transition: 0.4s all; -moz-transition: 0.4s all; -ms-transition: 0.4s all; -o-transition: 0.4s all; } .product-item .product-image:hover img { bottom: 15px; } .product-item .product-info .product-title { text-transform: capitalize; margin-bottom: 8px; font-size: 14px; font-weight: 400; height: 54px; word-break: break-word; } .product-item .product-info .product-title:hover { color: var(--color-primary); } .product-item .product-info .product-martket-main { height: 20px; } .product-item .product-info .product-market-price { color: #575757; text-decoration: line-through; margin-right: 6px; } .product-item .product-info .product-percent-price { position: relative; background: #be1f2d; border-radius: 7px; color: #fff; padding: 1px 8px; } .product-item .product-info .product-price-main { margin-top: 6px; font-size: 20px; line-height: 28px; color: #be1f2d; } .product-item .product-info .product-price p { color: #36ac4a; } .product-item .product-info .product-offer { margin-top: 3px; color: #6f6f6f; height: 36px; font-family: inherit !important; } .product-item .product-info .product-item .product-info .product-offer * { font-family: inherit !important; } .product-item .product-info .product-offer p, .product-item .product-info .product-offer span, .product-item .product-info .product-offer strong { font-size: 14px !important; } .product-item .p-type-holder { position: absolute; top: -13px; right: -5px; z-index: 1; } .product-item .p-type-holder-2 { top: unset; bottom: -6px; right: unset; left: -5px; z-index: 1; } .product-item .p-type-holder .p-icon-type { display: block; background-repeat: no-repeat; background-position: center; background-size: contain; margin-bottom: 6px; width: 50px; } .product-item .p-type-holder .p-icon-hot { background-image: url(https://nguyencongpc.vn/media/lib/10-01-2024/ncpc-icon-pro-hot-01-2024.png); height: 37px; width: 24px; margin-left: auto; } .product-item .p-type-holder .p-icon-new { background-image: url(https://nguyencongpc.vn/media/lib/10-01-2024/ncpc-icon-pro-new-01-2024.png); height: 37px; width: 24px; background-size: 100%; } .product-item .p-type-holder .p-icon-best-sale { background-image: url(https://nguyencongpc.vn/media/lib/10-01-2024/ncpc-icon-pro-bestsale-01-2024.png); width: 69px; height: 24px; margin-top: 8px; } .item-article .title-article h3 { font-size: 14px; height: 36px; } .item-article .img-article .incon-play-youtube { display: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .item-article .time-article { color: #9e9e9e; margin-top: 4px; } .title-box-article { font-size: 20px; color: #000; line-height: 24px; padding: 0 12px 12px; border-bottom: 1px solid #d6d6d6; } .box-artilce-col-right { padding: 18px 15px; background: #fff; -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.25); border-radius: 12px; color: #000; } .box-artilce-col-right-product .descreption-article, .box-artilce-col-right-product .time-article { display: none; } .box-artilce-col-right-product .title-article h3 { font-size: 14px; font-weight: 400; } .box-artilce-col-right .title-article p { font-size: 20px; line-height: 24px; } .box-artilce-col-right .list-article-col-right { margin-top: 16px; } .box-artilce-col-right .list-article-col-right .img-article { width: 134px; padding-bottom: 24%; overflow: hidden; } .box-artilce-col-right .list-article-col-right .img-article .icon-play { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .box-artilce-col-right .list-article-col-right .content-article { width: calc(100% - 134px - 12px); } .box-artilce-col-right .list-article-col-right .content-article .time-article { color: #9e9e9e; } .box-artilce-col-right.box-article-video-featured .incon-play-youtube { display: block; } .box-artilce-col-right .list-article-col-right .content-article:hover { color: var(--color-primary); } .page-product-detail .box-artilce-col-right .incon-play-youtube, .page-product-detail .box-artilce-col-right .list-article-related .incon-play-youtube { display: none; } .page-product-detail .box-article-video-featured .icon-video-feature { display: block; } .btn-article-col { width: 300px; margin: 0 auto; border: 1px solid var(--swiper-theme-color); border-radius: 8px; margin-top: 14px; padding: 10px 0; cursor: pointer; color: var(--swiper-theme-color); } .btn-article-col:hover { border: 1px solid var(--red); color: var(--red) !important; } .page-hompage .box-banner-homepage .swiper-pagination { bottom: 50px; } .page-hompage .box-banner-homepage .swiper-pagination-bullet-active { background: #fff !important; } .page-hompage .box-banner-right { position: absolute; right: 70px; top: 30px; z-index: 10; } .page-hompage .box-banner-under-slider { margin-top: -50px; } .swiper .swiper-button-prev svg, .swiper .swiper-button-next svg { width: 8px !important; color: #000; } .page-hompage .box-product-deal { padding: 12px; margin: 20px 0; background: linear-gradient(180deg, #ee1100 0%, #000000 100%); } .page-hompage .box-product-deal .title-deal { margin-top: 10px; gap: 16px; margin-bottom: 20px; color: #fff; font-size: 16px; } .page-hompage .box-product-deal .title-deal .title { font-size: 32px; line-height: 48px; text-transform: uppercase; color: #feea32; } .global-time-deal { white-space: nowrap; } .page-hompage .box-product-deal .box-list-item-deal { min-height: 300px; } .page-hompage .box-product-deal .box-list-item-deal .product-item { padding: 12px 11px; } .page-hompage .box-product-deal .box-list-item-deal .product-item .icon-hot-deal { position: absolute; left: 0; top: 0; } .page-hompage .box-product-collection-homepage .box-list-item-collection { min-height: 300px; position: relative; } .page-hompage .box-product-collection-homepage .box-banner-collection { width: 365px; } .page-hompage .box-product-collection-homepage .box-list-item-collection .box-empty { color: var(--red); } .page-hompage .box-product-deal .banner-title-deal p { position: absolute; color: #fff; text-transform: uppercase; font-size: 24px; font-weight: 28px; font-style: italic; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .page-hompage .box-product-deal .global-time-deal p { color: #cb1c21; border-radius: 3px; background: #fff; font-size: 16px; width: 32px; height: 28px; 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-weight: 600; } .btn-product, .page-hompage .box-product-deal .btn-deal { color: #105fbd; text-transform: capitalize; border-radius: 36px; height: 32px; width: 124px; background: #ffff; border-radius: 36px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 18px; margin: 0 auto; margin-top: 14px; } .btn-product:hover, .page-hompage .box-product-deal .btn-deal:hover { background: var(--color-primary); color: #fff; } .box-product-deal .p-quantity-sale { position: relative; height: 20px; margin: 10px 0 15px; } .box-product-deal .p-quantity-sale i { position: absolute; left: -9px; bottom: 1px; z-index: 2; } .box-product-deal .p-quantity-sale .bg-gradient { background-color: #ebebeb; border-radius: 14px; height: 100%; } .box-product-deal .p-quantity-sale p { position: absolute; top: 0; left: 0; width: 100%; background: #ffb22f; border-radius: 7px; height: 100%; } .box-product-deal .p-quantity-sale span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: var(--black); font-weight: 400; font-size: 11px; width: 100%; text-align: center; } .page-hompage .box-product-deal .box-number-sale { width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; 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; position: absolute; top: 12px; left: 13px; } .page-hompage .box-product-collection-homepage { padding: 14px 12px; margin: 20px 0; } .page-hompage .box-product-collection-homepage .box-title-collection { padding: 8px 0 16px; } .page-hompage .box-product-collection-homepage .btn-collection, .page-hompage .box-product-deal .button-deal { font-size: 16px; } .page-hompage .box-product-collection-homepage .btn-collection:hover, .page-hompage .box-product-deal .button-deal:hover { color: #feea32; } .page-hompage .box-product-collection-homepage .title-collection-homepage { font-size: 32px; line-height: 38px; color: #ffffff; text-transform: uppercase; text-align: center; } .page-hompage .box-product-collection-homepage .product-item { min-height: 338px; } .page-hompage .title-box-product-home .title { font-size: 22px; line-height: 24px; text-transform: uppercase; color: #000; text-align: center; margin-bottom: 12px; } .page-hompage .title-box-product-home .border-title { width: 437px; height: 2px; background-color: #ebebeb; position: relative; } .page-hompage .title-box-product-home .border-title::after { content: ''; background: #ff9f00; width: 145px; height: 2px; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .page-hompage .box-product-bestsale .box-list-product-bestsale { grid-template-columns: repeat(5, 1fr); margin-top: 22px; min-height: 300px; } .page-hompage .box-category-outstanding { margin: 20px 0; padding: 14px 12px; background: #fff; } .page-hompage .box-category-outstanding .title { text-transform: uppercase; } .page-hompage .box-category-outstanding .background-category { background: #fff !important; margin: 16px 0 20px; padding: 33px 40px 22px; -webkit-box-shadow: 0 2px 10px 0 rgba(172, 172, 172, 0.25); box-shadow: 0 2px 10px 0 rgba(172, 172, 172, 0.25); } .page-hompage .box-category-outstanding .list-category-outstanding { -webkit-box-shadow: 0 2px 10px 0 rgba(172, 172, 172, 0.25); box-shadow: 0 2px 10px 0 rgba(172, 172, 172, 0.25); } .page-hompage .box-category-outstanding .list-category-outstanding .item-category { -webkit-box-flex: 0; -ms-flex: 0 0 10%; flex: 0 0 10%; padding: 0 18px; margin: 16px 0; } .page-hompage .box-category-outstanding .list-category-outstanding .item-category-img { width: 100%; height: 50px; position: relative; } .page-hompage .box-category-outstanding .list-category-outstanding img { position: absolute; inset: 0; max-width: 100%; max-height: 100%; margin: auto; width: auto; } .page-hompage .box-category-outstanding .list-category-outstanding .title { font-size: 14px; margin-top: 12px; text-align: center; text-transform: capitalize; color: #3a3a3a; } .page-hompage .box-category-outstanding .list-category-outstanding .item-category:hover .title { color: var(--color-primary); } .page-hompage .banner-category { margin-bottom: 20px; } .page-hompage .box-product-category { margin-bottom: 20px; padding: 14px 12px; background: #fff; } .page-hompage .box-product-category .title { width: 30%; } .page-hompage .box-product-category .swiper { padding: 2px; min-height: 300px; } .page-hompage .box-product-category .list-category-child { margin-bottom: 16px; } .page-hompage .box-product-category .list-category-child .title-category { padding: 0 8px; font-size: 16px; color: #454545; line-height: 22px; text-transform: capitalize; border-right: 1px solid #b8b8b8; } .page-hompage .box-product-category .list-category-child .title-category:hover { color: var(--color-primary); } .page-hompage .box-product-category .list-category-child .title-all-category { font-size: 16px; line-height: 22px; text-transform: capitalize; padding-left: 12px; color: #0a76e4; width: -webkit-max-content; width: -moz-max-content; width: max-content; text-align: right; } .page-hompage .box-product-category .product-item { min-height: 364px; } .box-relative-product .product-item { min-height: 364px; } .page-hompage .box-product-category .list-category-child .title-all-category:hover { color: red; } .page-hompage .box-product-category .banner-category { margin-top: 30px; min-height: 150px; } .page-hompage .box-product-category .banner-category .item-banner-category { position: relative; overflow: hidden; display: block; } .page-hompage .box-product-category .banner-category .item-banner-category:hover::before { width: 112%; background-color: rgba(255, 255, 255, 0); -webkit-transition: all 0.65s ease-out; -o-transition: all 0.65s ease-out; transition: all 0.65s ease-out; z-index: 2; } .page-hompage .box-product-category .banner-category .item-banner-category::before { content: ''; position: absolute; top: 0; left: -6%; bottom: 0; width: 0; height: 100%; background-color: rgba(255, 255, 255, 0.5); -webkit-transition: none; -o-transition: none; transition: none; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); } .page-hompage .box-article-group { margin-bottom: 30px; padding: 14px 12px; background: #fff; } .page-hompage .box-article-group .title-box { margin-bottom: 0; } .page-hompage .box-article-group .title-box .title { text-transform: uppercase; } .page-hompage .box-article-group .list-article-group .item-article { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 25%; border: 1px solid #ebebeb; border-radius: 10px; padding: 8px 8px 10px; } .page-hompage .box-videos-group .list-article-group .item-article { border: none; border-radius: unset; padding: 0; } .page-hompage .box-article-group .list-article-group .item-article .img-article { display: block; padding-bottom: 60%; position: relative; overflow: hidden; } .page-hompage .box-article-group .list-article-group .item-article .descreption-article, .page-hompage .box-article-group .list-article-group .item-article .time-article { display: none; } .page-hompage .btn-article-group { color: #0a76e4; font-size: 18px; } .page-hompage .btn-article-group:hover { color: var(--red); } .page-hompage .box-article-group .list-article-group { margin-top: 16px; min-height: 200px; } .page-hompage .box-article-group .list-videos-group .incon-play-youtube { display: block; } .page-hompage .box-article-group .list-videos-group .video-img { position: relative; margin-bottom: 10px; display: block; overflow: hidden; border-radius: 10px; } .page-hompage .box-videos-group .video-img:hover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .page-hompage .box-article-group .video-img img { -o-transition: 0.5s all; transition: 0.5s all; -webkit-transition: 0.5s all; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); border-radius: 10px; } .page-hompage .box-article-group .list-videos-group .video-img i { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 3; } .page-hompage .box-article-group .list-videos-group .video-text { font-size: 16px; line-height: 18px; } .page-hompage .box-article-group .video-item { display: block; width: calc(100% / 4 - 12px); } .page-hompage .box-article-group .video-item:hover { color: #0f5b9a; } .page-hompage .box-review-from-customer { margin: 20px 0; padding: 14px 12px; background: #fff; } .page-hompage .box-review-from-customer .title-box .title { text-transform: uppercase; } .page-hompage .box-review-from-customer .item-review-customer-hompage { position: relative; border-radius: 10px; padding: 17px 22px 34px 12px; border: 1px solid var(--12, #ebebeb); } .page-hompage .box-review-from-customer .item-review-customer-hompage::after { content: ''; position: absolute; bottom: 0; right: 0; width: 60%; height: 3px; background: #3d73c3; border-radius: 10px; } .page-hompage .box-review-from-customer .item-review-customer-hompage::before { content: ''; position: absolute; right: 0; height: 65%; width: 3px; background: #3d73c3; border-radius: 10px; bottom: 0; } .page-hompage .box-review-from-customer .item-review-customer-hompage .left-review::before { content: ''; position: absolute; background: url(https://nguyencongpc.vn/static/assets/nguyencong_2023/images/icon-nhaykep.png); left: -5px; top: -10px; width: 17px; height: 14px; } .page-hompage .box-review-from-customer .list-review-customer-homepage { margin-top: 20px; min-height: 150px; } .page-hompage .box-review-from-customer .border-review-item { position: absolute; bottom: 0; right: 0; z-index: 1; width: 302px; } .page-hompage .box-review-from-customer .left-review img { width: 88px; height: 88px; border-radius: 50%; } .page-hompage .box-review-from-customer .swiper-pagination { position: relative; bottom: 0; margin-top: 14px; } .page-hompage .box-review-from-customer .right-reivew { width: calc(100% - 100px); margin-left: 12px; } .page-hompage .box-review-from-customer .right-reivew img { width: 80px; } .page-hompage .box-review-from-customer .right-reivew .author-review { color: #0f5b9a; margin: 8px 0 6px; display: block; } .page-hompage .box-article-global { margin-bottom: 20px; } .page-hompage .box-article-global .list-article-global { margin-top: 20px; } .page-hompage .box-article-global .list-article-global .img-article { position: relative; overflow: hidden; display: block; border-radius: 10px; padding-bottom: 60%; width: 100%; } .page-hompage .box-article-global .list-article-global .item-article::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000); background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000) ); background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), #000); z-index: 2; border-radius: 10px; } .page-hompage .box-article-global .list-article-global .img-article:hover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .page-hompage .box-article-global .list-article-global img { border-radius: 10px; -o-transition: 0.5s all; transition: 0.5s all; -webkit-transition: 0.5s all; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .page-hompage .box-article-global .list-article-global .box-left, .page-hompage .box-article-global .list-article-global .box-right { width: 50%; } .page-hompage .box-article-global .item-article { position: relative; color: #fff; } .page-hompage .box-article-global .content-article-item { position: absolute; bottom: 16px; left: 12px; text-shadow: 1px 1px 1px #000; z-index: 3; } .page-hompage .box-article-global .box-left .content-article-item .title { font-size: 24px; line-height: 28px; color: #fff; margin-bottom: 6px; } .page-hompage .box-article-global .content-article-item .title { font-size: 16px; margin-bottom: 4px; } .page-hompage .box-article-global .content-article-item .title:hover { color: #c71e1e; } .page-hompage .box-article-global .content-article-item .time-aricle-item span { line-height: 16px; color: #9e9e9e; font-weight: 300; display: block; margin-left: 8px; } .page-hompage .box-article-global .content-article-item .title-article h3 { height: auto; } .page-hompage .box-article-global .box-right .item-article { width: calc(100% / 2 - 6px); height: 183px; } .page-hompage .box-article-global .box-right .title { font-size: 16px; line-height: 20px; margin-bottom: 3px; color: #fff; } .page-hompage .box-article-global .box-right .content-article-item { bottom: 10px; } .page-category { margin: 0 auto; background: #f4f4f4; padding-top: 12px; padding-bottom: 12px; } .page-category .box-banner-category { margin-bottom: 20px; } .page-category .box-top-product-categroy { padding: 17px 12px; background: url(https://nguyencongpc.vn/static/assets/nguyencong_2023/images/background-category.png) no-repeat; background-size: 100% 100%; min-height: 350px; border-radius: 10px; margin-bottom: 12px; } .page-category .name-category { font-size: 26px; line-height: 32px; margin-bottom: 12px; text-align: center; color: var(--color-primary); } .page-category .box-top-product-categroy .product-item .icon-hot-deal { display: none; position: absolute; top: 0; left: 0; } .page-category .box-top-product-categroy .title { font-size: 32px; line-height: 36px; color: #fff; text-align: center; text-transform: uppercase; margin-bottom: 12px; } .page-category .box-top-product-categroy .product-item { min-height: 343px; } .page-category .box-content-category { width: 100%; margin: 20px 0; } .page-category .box-content-category .category-child { padding: 16px 0; background: #fff; text-align: center; color: #000; } .page-category .box-content-category .category-child li { width: calc(100% / 8); } .page-category .box-content-category .category-child li:hover { color: var(--color-primary); } .page-category .box-content-category .category-child li:nth-child(n + 9) { margin-top: 15px; } .page-category .box-content-category .category-child li .txt { padding: 0 10px; } .page-category .box-content-category .category-child .border-img { border-radius: 50%; height: 60px; margin: 0 auto 10px; width: 60px; background-color: #f0f0f0; background-position: center; background-repeat: no-repeat; background-size: 39px; } .page-category .box-content-category .category-child img { width: 28px; } .page-category .box-content-category .box-filter-category { background: #fff; padding: 13px 0 18px; margin: 12px 0; } .page-category .box-content-category .info-filter-category { padding: 12px; color: #000; border-bottom: 1px solid #ebebeb; } .page-category .box-content-category .info-filter-category:last-child { border-bottom: 0; } .page-category .box-content-category .info-filter-category .title { width: 120px; font-weight: 500; } .page-category .box-content-category .list-filter-category .item { border-radius: 3px; border: 1px solid #d6d6d6; background: #f8f8f8; padding: 5px 10px; font-size: 14px; color: #000; cursor: pointer; position: relative; } .page-category .box-content-category .list-filter-last .item { background: #fff; } .page-category .box-content-category .list-filter-active .item { background: var(--swiper-theme-color); color: #fff; } .page-category .box-content-category .list-filter-active .item:hover { color: #fff !important; } .page-category .box-content-category .list-filter-active .delete-filter-all { background: var(--red); border: none !important; } .page-category .box-content-category .list-filter-active .delete-filter-all:hover { background: red; } .page-category .box-content-category .list-filter-category ul { position: absolute; z-index: 11; background-color: #fff; padding: 10px 0; width: 200px; -webkit-box-shadow: 0 0 5px 0 #969696; box-shadow: 0 0 5px 0 #969696; left: 0; top: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: 0.5s all; -o-transition: 0.5s all; transition: 0.5s all; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; padding: 14px 10px; } .page-category .box-content-category .list-filter-category .item:hover ul { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: 0.5s all; -o-transition: 0.5s all; transition: 0.5s all; -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; } .page-category .box-content-category .list-filter-category ul li { margin-bottom: 8px; } .page-category .box-content-category .list-filter-category ul li a { color: #000; } .page-category .box-content-category .list-filter-category ul li:hover a { color: #0a76e4; } .page-category .box-content-category .list-filter-category .item.current, .page-category .box-content-category .list-filter-category .item:hover, .page-category .box-content-category .sort-option .item.selected { color: #0a76e4; border: 1px solid #0a76e4; } .page-category .box-content-category .list-filter-category .item.current i, .page-category .box-content-category .sort-option .item.selected i { -webkit-filter: invert(41%) sepia(70%) saturate(486%) hue-rotate(176deg) brightness(91%) contrast(97%); filter: invert(41%) sepia(70%) saturate(486%) hue-rotate(176deg) brightness(91%) contrast(97%); } .page-category .box-content-category .list-filter-category .item i { margin-left: 6px; display: block; font-size: 12px; } .page-category .box-content-category .box-list-product-category { padding: 10px 12px 18px; background: #fff; } .page-category .box-content-category .sort-option .item { padding: 8px 10px; border: 1px solid #ececec; color: #515151; font-size: 13px; line-height: 16px; border-radius: 4px; } .page-category .box-content-category .sort-option .item:hover { color: #0a76e4; border: 1px solid #0a76e4; } .page-category .box-content-category .sort-option .item:hover i { -webkit-filter: invert(41%) sepia(70%) saturate(486%) hue-rotate(176deg) brightness(91%) contrast(97%); filter: invert(41%) sepia(70%) saturate(486%) hue-rotate(176deg) brightness(91%) contrast(97%); } .page-category .box-content-category .sort-option .item i { margin-right: 6px; } .page-category .box-content-category .sort-bar-select-category .item-sort-bar { font-size: 20px; gap: 2px; color: #d6d6d6; } .page-category .box-content-category .sort-bar-select-category .item-sort-bar.active, .page-category .box-content-category .sort-bar-select-category .item-sort-bar:hover { color: #00a0f8; } .page-category .box-content-category .list-product-category { margin: 12px 0 18px; } .page-category .box-content-category .list-product-flex .product-item { width: calc(100% / 3 - 12px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 12px; } .page-category .box-content-category .list-product-flex .product-image { width: 50%; padding-bottom: 50%; } .page-category .box-content-category .list-product-search .product-item { width: calc(100% / 5 - 12px); } .page-category .paging { margin-top: 24px; } .page-category .box-static-category { margin: 20px 0; } .page-category .box-static-category .box-descreption-category { width: 67%; } .page-category .box-static-category .box-static-content-category { background: #fff; padding: 18px 12px 14px; } .page-category .box-static-category .box-article-productList { width: 33%; background: #fff; padding: 16px 12px; height: -webkit-max-content; height: -moz-max-content; height: max-content; } .page-category .box-static-category .static-tag-list { 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; gap: 12px; margin-bottom: 12px; } .page-category .box-static-category .static-tag-list a { border-radius: 5px; font-size: 13px !important; color: #484848; border: 1px solid #ececec; padding: 8px 12px !important; } .page-category .box-static-category .static-tag-list a:hover { background: var(--color-primary); color: #fff; } .page-category .box-static-category .info-descreption-category .static-html { max-height: 525px; overflow: hidden; } .page-category .box-static-category .info-descreption-category .static-html img { display: block; width: auto; } .page-category .box-static-category .info-descreption-category .static-html.active { max-height: initial; } .page-category .box-static-category .info-descreption-category .static-html::after { content: ''; width: 100%; height: 90px; background: -webkit-gradient( linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(rgba(255, 255, 255, 0.8)), to(white) ); background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), #fff); background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), #fff); position: absolute; left: 0; bottom: -15px; z-index: 9; } .page-category .box-static-category .title-article-productList { font-size: 15px; text-transform: uppercase; line-height: 18px; color: #000; margin-bottom: 18px; } .page-category .box-static-category .title-article-productList img { width: 25px; margin-right: 6px; } .page-category .box-static-category .btn-article-productList { font-size: 13px; line-height: 16px; color: #000; -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.1), 0 2px 6px 2px rgba(60, 64, 67, 0.15); box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.1), 0 2px 6px 2px rgba(60, 64, 67, 0.15); width: 335px; padding: 9px 0; border-radius: 0 0 10px 10px; margin: 0 auto; border: 1px solid #fff; } .page-category .box-static-category .btn-article-productList:hover { background: #fff; border: 1px solid var(--swiper-theme-color); color: var(--swiper-theme-color); } .page-collection { background: #fff; padding-top: 0; } .page-collection .box-list-product-category { padding: 0 !important; } .page-product-detail .box-content-product-detail .video-thumb::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 2; border-radius: 10px; } .page-product-detail .box-content-product-detail .video-thumb .title-thumb-img { font-size: 13px; color: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 9; } .page-product-detail .box-content-product-detail .box-left, .page-product-detail .box-content-product-detail .box-right { width: calc(100% / 2 - 6px); } .page-product-detail .box-content-product-detail .box-left .product-images-show .bigImage { display: block; height: 595px; margin: auto; } .page-product-detail .box-content-product-detail .box-left .product-images-show .smallImage { display: block; border: 1px solid #d6d6d6; height: 80px; margin: auto; } .page-product-detail .box-content-product-detail .box-left .product-images-show .bigImage img, .page-product-detail .box-content-product-detail .box-left .product-images-show .smallImage img { width: 100%; height: 100%; margin: auto; display: block; object-fit: contain; } .page-product-detail .box-content-product-detail .box-right .product-name { font-size: 18px; line-height: 24px; text-transform: capitalize; margin-bottom: 12px; } .page-product-detail .box-content-product-detail .box-right .list-basic-product-info { margin-bottom: 10px; } .page-product-detail .box-content-product-detail .box-right .item-basic { margin-right: 20px; font-size: 13px; position: relative; line-height: 15px; } .page-product-detail .box-content-product-detail .box-right .item-basic::after { content: '|'; position: absolute; top: -1px; right: -15px; font-size: 16px; } .page-product-detail .box-content-product-detail .box-right .last-item-basic { margin-right: 12px; } .page-product-detail .box-content-product-detail .box-right .last-item-basic::after { content: ''; } .page-product-detail .box-content-product-detail .box-right .icon-fb { margin-right: 12px; } .page-product-detail .box-content-product-detail .box-right .store-status-detail .title { border-radius: 5px; border: 1px solid #d6d6d6; padding: 4px 10px; font-size: 13px; width: 220px; cursor: pointer; } .page-product-detail .box-content-product-detail .box-right .store-status-detail .title:hover, .page-product-detail .box-content-product-detail .box-right .store-status-detail.current .title { border: 1px solid var(--color-primary); color: var(--color-primary); } .page-product-detail .box-content-product-detail .box-right .store-status-detail .list-store-detail { position: absolute; background: #fff; border: solid 1px #ccc; top: 100%; width: 300px; z-index: 10; padding: 12px; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .page-product-detail .box-content-product-detail .box-right .store-status-detail:hover .list-store-detail { opacity: 1; visibility: visible; -webkit-transform: translateY(-1px); -ms-transform: translateY(-1px); transform: translateY(-1px); -webkit-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; } .page-product-detail .box-content-product-detail .box-right .store-status-detail:hover .list-store-detail a { display: block; padding: 4px 4px 0; } .page-product-detail .box-content-product-detail .box-right .store-status-detail .item-store { list-style: disc; margin-left: 12px; font-size: 13px; line-height: 24px; } .page-product-detail .box-content-product-detail .box-flash-sale { border: 1px solid #e31223; height: 64px; overflow: hidden; margin-bottom: 16px; color: #001644; gap: 17px; margin-top: 16px; } .page-product-detail .box-content-product-detail .box-flash-sale .box-middle { width: 165px; } .page-product-detail .box-content-product-detail .box-flash-sale .box-left { background: #e31223; width: 210px; height: 100%; } .page-product-detail .box-content-product-detail .box-flash-sale .box-left .title-deal { font-size: 22px; line-height: 28px; margin-left: 8px; text-transform: uppercase; color: #fff; } .page-product-detail .box-content-product-detail .box-flash-sale .box-left::before { content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-top: 0 solid transparent; border-top: 64px solid transparent; border-right: 30px solid #fff; } .page-product-detail .box-content-product-detail .box-flash-sale .item-time b { border-radius: 5px; background: #001644; padding: 5px; font-size: 16px; color: #fff; margin-bottom: 4px; display: block; } .page-product-detail .box-content-product-detail .box-flash-sale .box-middle span { margin-top: 4px; } .page-product-detail .box-content-product-detail .box-flash-sale .box-right { width: 182px; padding: 6px 12px 6px 0; height: 60px; } .page-product-detail .box-content-product-detail .box-product-deal .bg-gradient { background: #fecccc; margin-top: 6px; } .page-product-detail .box-content-product-detail .box-price-detail { position: relative; align-items: baseline; padding: 16px 16px 14px; border: 3px solid #d92a2b; color: #e31223; background: #fef1e7; gap: 20px; margin-bottom: 16px; } .page-product-detail .box-content-product-detail .box-price-detail .price-detail { font-size: 38px; line-height: 36px; color: #ff3f3f; } .page-product-detail .box-content-product-detail .box-price-detail .market-price-detail { color: #9e9e9e; font-size: 18px; line-height: 22px; text-decoration: line-through; } .page-product-detail .box-content-product-detail .box-price-detail .save-price-detail { padding: 4px 8px; background: linear-gradient(90deg, #f5763f, #d92a2b); color: #fff; border-radius: 5px; box-shadow: 1px 2px 6px rgba(255, 119, 37, 0.5); transform: translateY(-6px); } .page-product-detail .box-content-product-detail .box-price-detail .price-buildpc { position: absolute; top: 0; left: 0; font-size: 16px; font-weight: 600; padding: 6px 0 6px 20px; color: #fff; background: #d92a2b; border-top-left-radius: 5px; } .page-product-detail .box-content-product-detail .box-price-detail .price-buildpc::after { content: ''; position: absolute; top: 0; left: 100%; padding: 15px; background: #d92a2b; border-bottom-right-radius: 100px; } .page-product-detail .box-content-product-detail .box-price-detail .price-buildpc-space { width: 100%; height: 20px; } .page-product-detail .box-content-product-detail .box-offer-detail { background: url(https://nguyencongpc.vn/static/assets/nguyencong_2023/images/background_offer_detail.png) no-repeat; background-size: 100% 100%; min-height: 200px; padding: 4px; margin-bottom: 16px; } .page-product-detail .box-content-product-detail .box-offer-detail .title-offer-detail { padding: 6px 6px 12px; color: #fff; } .page-product-detail .box-content-product-detail .box-offer-detail .title-offer-detail p { margin-left: 8px; font-size: 17px; line-height: 22px; text-transform: uppercase; } .page-product-detail .box-content-product-detail .box-offer-detail .list-info-offter { background-color: #fff; border-radius: 0 0 10px 10px; padding: 12px 6px; min-height: 158px; font-size: 13px; line-height: 24px; } .page-product-detail .box-content-product-detail .product-buy-quantity { margin: 18px 0; font-size: 13px; } .page-product-detail .box-content-product-detail .cart-quantity-select { margin: 0 12px 0 32px; border-radius: 5px; border: 1px solid #d6d6d6; } .page-product-detail .box-content-product-detail .cart-quantity-select .js-quantity-change { padding: 10px 12px; text-decoration: none; font-size: 16px; text-align: center; } .page-product-detail .box-content-product-detail .cart-quantity-select input { border: none; width: 66px; outline: 0; text-align: center; color: #000; border-right: 1px solid #d6d6d6; border-left: 1px solid #d6d6d6; } .page-product-detail .box-content-product-detail .addCart { border-radius: 5px; border: 1px solid #0a76e4; padding: 10px 12px; color: #0a76e4; } .page-product-detail .box-content-product-detail .addCart:hover { background: #0f5b9a; color: #fff; } .page-product-detail .box-content-product-detail .addCart:hover i { -webkit-filter: brightness(10); filter: brightness(10); -webkit-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; transition: color 0.2s ease-out; } .page-product-detail .box-content-product-detail .detail-buy a { width: calc(50% - 6px); padding: 8px 12px; text-align: center; background: #0a76e4; border-radius: 10px; color: #fff; font-size: 13px; } .page-product-detail .box-content-product-detail .detail-buy a:first-child { background: #e31223; } .page-product-detail .box-content-product-detail .detail-buy a:hover { background: #007eff !important; } .page-product-detail .box-content-product-detail .detail-buy a:first-child:hover { background: #ff0015 !important; } .page-product-detail .box-content-product-detail .detail-buy a span { width: 100%; float: left; font-weight: 20px; text-transform: uppercase; font-weight: 700; font-size: 20px; line-height: 30px; } .page-product-detail .box-content-product-detail .box-right .box-config-group { background: #fff; border: 1px solid #d6d6d6; font-size: 13px; color: #000; padding: 12px 10px 16px; margin: 16px 0; } .page-product-detail .box-content-product-detail .box-right .box-config-group .title { font-size: 16px; line-height: 20px; color: #464646; margin-bottom: 10px; } .page-product-detail .box-content-product-detail .box-right .item-config { padding: 8px 12px; border: 1px solid #d9d9d9; text-align: center; overflow: hidden; cursor: pointer; display: block; } .page-product-detail .box-content-product-detail .box-right .item-config.current, .page-product-detail .box-content-product-detail .box-right .item-config:hover { border: 1px solid #0a76e4; } .page-product-detail .box-content-product-detail .box-right .item-config.current::before { position: absolute; content: '\f00c'; font-family: 'Font Awesome 5 Free'; left: 2px; top: -1px; color: #fff; font-size: 9px; z-index: 9; font-weight: 800; font-size: 12px; } .page-product-detail .box-content-product-detail .box-right .item-config.current::after { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 0; border-top: 0 solid transparent; border-bottom: 23px solid transparent; border-left: 23px solid #0a76e4; } .page-product-detail .box-content-product-detail .box-right .price-config { color: #ed1b24; margin-top: 6px; } .page-product-detail .box-content-product-detail .box-product-summary { border: 1px solid #d6d6d6; padding: 12px; margin: 16px 0; } .page-product-detail .box-content-product-detail .box-product-summary .title { font-size: 16px; line-height: 20px; margin-bottom: 10px; } .page-product-detail .box-content-product-detail .box-product-summary .list-product-summary li { position: relative; margin-left: 16px; font-size: 13px; line-height: 25px; } .page-product-detail .box-content-product-detail .box-product-summary .list-product-summary li::after { content: ''; background: #000; width: 4px; height: 4px; border-radius: 50%; position: absolute; left: -15px; top: 11px; } .page-product-detail .button-showmore { color: var(--swiper-theme-color); margin-top: 6px; font-size: 13px; margin-left: 10px; } .page-product-detail .box-content-product-detail .box-product-summary .list-product-summary li:nth-child(n + 4) { display: none; } .page-product-detail .box-content-product-detail .box-product-summary .list-product-summary.active li:nth-child(n + 4) { display: block; } .page-product-detail .box-content-product-detail .list-product-comboset { padding: 2px; margin-bottom: 16px; } .page-product-detail .box-content-product-detail .list-product-comboset .product-item { padding: 10px 8px; } .page-product-detail .box-content-product-detail .list-product-comboset .product-title { font-size: 13px; margin-bottom: 0; } .page-product-detail .box-content-product-detail .list-product-comboset .product-price-main { margin-top: 0; } .page-product-detail .box-content-product-detail .list-product-comboset .price { font-size: 16px; } .page-product-detail .box-content-product-detail .list-product-comboset .product-market-price { font-size: 11px; margin-right: 0; } .page-product-detail .box-content-product-detail .list-product-comboset .c-pro-change { border: 1px solid #0a76e4; color: #0a76e4; width: 100%; display: block; text-align: center; border-radius: 3px; padding: 3px 0; font-size: 13px; margin-top: 10px; cursor: pointer; } .page-product-detail .box-content-product-detail .list-product-comboset .c-pro-change:hover { background: #0a76e4; color: #fff; } .page-product-detail .box-content-product-detail .list-product-comboset .check-box-comboset { position: absolute; top: 10px; left: 10px; z-index: 9; } .page-product-detail .box-content-product-detail .save-price-combo { font-style: italic; color: #6f6f6f; } .page-product-detail .box-content-product-detail .buy_combo { width: 215px; background: #e31223; color: #fff; font-size: 16px; text-transform: uppercase; text-align: center; border-radius: 5px; padding: 11px 16px; } .page-product-detail .box-content-product-detail .buy_combo:hover { background: #ff0318; } .page-product-detail .box-content-product-detail .comboset-info .addCart { width: 100px; border: 1px solid #f80000; color: #f80000; text-align: center; padding: 10px; font-size: 12px; height: 40px; } .page-product-detail .box-content-product-detail .comboset-info .addCart:hover { background: #f80000; color: #fff; } .page-product-detail .box-content-product-detail .list-product-comboset .check-box-comboset input[type='checkbox']::before { content: ''; display: block; position: absolute; width: 16px; height: 16px; top: -2px; left: -4px; border: 2px solid #36ac4a; border-radius: 3px; background-color: #36ac4a; border-radius: 50%; } .page-product-detail .box-content-product-detail .list-product-comboset .check-box-comboset input[type='checkbox']:checked:after { content: ''; display: block; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 0; left: 3px; } .page-product-detail .box-content-product-detail .box-comboset .title-comboset { font-size: 16px; margin-bottom: 12px; } .page-product-detail .box-content-product-detail .box-product-has-product { border: 1px solid #d6d6d6; background: #fff; margin: 16px 0; overflow: hidden; } .page-product-detail .box-content-product-detail .box-product-has-product .title { text-transform: uppercase; font-size: 16px; line-height: 20px; background: #e31223; color: #fff; padding: 8px 16px; margin-bottom: 10px; } .page-product-detail .box-content-product-detail .box-product-has-product .list-showroom-detail { padding: 0 12px; font-size: 13px; } .page-product-detail .box-content-product-detail .box-product-has-product .list-showroom-detail a { margin-bottom: 8px; display: block; } .page-product-detail .box-content-product-detail .box-product-has-product .list-showroom-detail span { margin-left: 10px; } .page-product-detail .box-content-product-detail .box-product-has-product .list-showroom-detail .item { margin-bottom: 12px; } .page-product-detail .box-content-product-detail .box-product-policy-detal .title { font-size: 16px; text-transform: uppercase; margin-bottom: 12px; } .page-product-detail .box-content-product-detail .box-product-policy-detal .item { width: 50%; font-size: 13px; margin-bottom: 14px; } .page-product-detail .box-read-product-detail .box-left { width: 66.5%; } .page-product-detail .box-read-product-detail .box-right { width: 33.5%; } .page-product-detail .box-read-product-detail .box-descreption-detail { -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.25); border-radius: 12px; color: #000; margin-bottom: 12px; padding-bottom: 20px; } .page-product-detail .box-read-product-detail .box-descreption-detail .titlle-descreption { padding: 18px 12px; border-bottom: 1px solid #ebebeb; font-size: 20px; line-height: 26px; text-transform: uppercase; } .page-product-detail .box-read-product-detail .box-descreption-detail .content-descreption-detail { padding: 18px 12px; overflow: hidden; height: 500px; } .page-product-detail .box-read-product-detail .box-descreption-detail .content-descreption-detail img { display: block; width: auto; } .page-product-detail .box-read-product-detail .box-descreption-detail .content-descreption-detail.active { height: auto !important; } .page-product-detail .box-read-product-detail .box-descreption-detail .content-descreption-detail::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff)); background: -o-linear-gradient(transparent, #fff); background: linear-gradient(transparent, #fff); } .page-product-detail .box-read-product-detail .box-descreption-detail .content-descreption-detail.active::after { position: relative; } .page-product-detail .box-read-product-detail .box-question { -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.25); } .page-product-detail .box-read-product-detail .box-spec { -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.25); border-radius: 12px; padding: 18px 12px; color: #000; } .page-product-detail .box-read-product-detail .box-spec table tbody tr:nth-child(n + 9) { display: none; } .page-product-detail .box-read-product-detail .box-spec .title { font-size: 20px; line-height: 26px; margin-bottom: 14px; } .page-product-detail .box-read-product-detail .box-spec .content-spec table tr:nth-child(odd) { background: #f5f8fd; } .page-product-detail .box-read-product-detail .box-spec .content-spec table tr:nth-child(2n + 2) { background: #fff; } .page-product-detail .box-read-product-detail .box-spec .content-spec table td { padding: 16px 12px; } .fancybox-content .content-spec a:hover, .page-product-detail .box-read-product-detail .box-spec .content-spec table td a:hover { color: var(--color-primary) !important; } .page-product-detail .box-read-product-detail .box-spec .content-spec table td:first-child { font-weight: 700; } .content-spec { background: #f5f8fd; } .content-spec table tr:nth-child(2n) { background: #fff; } .content-spec table td { padding: 16px 12px; } .content-spec table td:first-child { font-weight: 700; } .box-top-centent-spec { background-color: #d70018; padding: 20px 16px; font-size: 18px; color: #fff; } .btn-conten-spec-delete { margin: 0 12px 20px; color: #fff; text-align: center; background-color: #c51f27; border-radius: 10px; padding: 10px 12px; text-align: center; font-size: 16px; } .btn-conten-spec-delete:hover { background-color: #9b191e; color: #fff; } .box-top-centent-spec .delelte-content-spec { width: 22px; height: 22px; background: #940606; border-radius: 50%; cursor: pointer; } .fancybox-slide--html { padding: 16px; } .fancybox-content .content-spec { margin: 25px 14px; max-height: -webkit-max-content; max-height: -moz-max-content; max-height: max-content; } .fancybox-content { padding: 0 !important; max-width: 800px; width: 100%; } .page-product-detail .review-info { border: 1px solid #dedede; background: #fff; } .page-product-detail .review-info .avgRate { border-right: 1px solid #dedede; width: 37%; color: #000; } .page-product-detail .review-info .avgRate span { font-size: 32px; line-height: 34px; margin-bottom: 12px; } .page-product-detail .review-info .box-avg-rate-count { width: calc(100% - 37%); padding: 16px 12px; } .page-product-detail .review-info .avg-rate-count { font-size: 12px; line-height: 18px; color: #000; padding: 0; } .page-product-detail .review-info .rate-number i { padding-left: 4px; color: #ff981f; } .page-product-detail .review-info .nhan-xet-bar { width: 72%; height: 8px; background: #dedede; border-radius: 5px; margin: 0 14px 0 20px; position: relative; } .page-product-detail .review-info .nhan-xet-bar .percent { position: absolute; left: 0; top: 0; bottom: 0; background: #ee1b25; border-radius: 5px; } .page-product-detail .review-info .total-avg-rate { width: 14%; } .page-product-detail .box-review .text-danh-gia { text-align: center; margin-top: 12px; } .page-product-detail .box-review .button-review a { line-height: 30px; color: #fff; padding: 5px 20px; background: #1781e0; border-radius: 8px; display: block; text-align: center; margin-top: 14px; width: 278px; } .page-product-detail .box-review .review_reply_content { border: 1px solid #dedede; outline: 0; padding: 15px; width: 100%; height: 122px; border-radius: 12px; resize: none; margin: 16px 0; } .page-product-detail .box-review .button-review a:hover { background: #0086ff; } .page-product-detail .box-review .infomation-customer tr { margin-bottom: 16px; } .page-product-detail .box-review .infomation-customer td:first-child { width: 100px; padding-left: 0 !important; } .page-product-detail .box-review .infomation-customer td { width: 100%; } .page-product-detail .box-review .form-control { display: block; width: 100%; height: 32px; background-color: #fff; border: 1px solid #dedede; border-radius: 5px; outline: 0; padding: 0 12px; } .page-product-detail .box-review .btn-review { background: var(--red); border-radius: 5px; padding: 10px 30px; color: #fff; width: 150px; display: block; text-align: center; } .page-product-detail .box-review .btn-review:hover { background: #ff0015; } .page-product-detail .box-read-product-detail .box-comment, .page-product-detail .box-read-product-detail .box-review { background: #fff; -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.25); border-radius: 12px; padding: 18px 13px 23px; margin-bottom: 12px; color: #000; } .page-product-detail .box-read-product-detail .box-comment { background: #f5f5f5; } .page-product-detail .box-read-product-detail .box-comment .comment_reply_content { background: #fff; padding: 16px; color: #444; line-height: 20px; outline: 0; resize: none; width: 100%; border: none; height: 90px; margin-bottom: 10px; } .page-product-detail .box-read-product-detail .box-comment .btn-send-form-comment { border-radius: 8px; background: #0a76e4; color: #fff; padding: 12px; height: -webkit-max-content; height: -moz-max-content; height: max-content; width: 85px; } .page-product-detail .box-read-product-detail .box-comment .btn-send-form-comment:hover { background: #007eff; } .page-product-detail .box-read-product-detail .item-comment { margin-bottom: 16px; } .page-product-detail .box-read-product-detail .avatar-user { background: #c8c8c8; width: 20px; height: 20px; border-radius: 3px; } .page-product-detail .box-read-product-detail .comment-name .note { border-radius: 3px; background: #0f5b99; margin-left: 14px; padding: 2px 4px; font-size: 12px; color: #fff; } .page-product-detail .box-read-product-detail .comment-form-right { color: #555; font-size: 12px; line-height: 18px; } .page-product-detail .box-read-product-detail .comment-content { padding: 14px 16px; background: #fff; color: #3a3a3a; min-height: 70px; margin-left: 20px; } .page-product-detail .box-read-product-detail .comment-content .item-img-review { width: 100px; margin: 0 10px 10px 0; } .page-product-detail .box-read-product-detail .box-review .comment-content { background: #f3f3f3; } .page-product-detail .box-read-product-detail .box-review .comment-content .text-review b { width: 70px; margin-right: 12px; } .page-product-detail .box-read-product-detail .reply-list-container { margin-left: 20px; } .page-product-detail .box-read-product-detail .info_feeback { position: absolute; right: 12px; bottom: 12px; color: #36ac4a; } .page-product-detail .box-read-product-detail .reply-form-group { border: 1px solid #d9d9d9; border-radius: 12px; overflow: hidden; margin: 15px 0 15px 12px; background: #fff; } .page-product-detail .box-read-product-detail .reply-form-group textarea { display: block; padding: 14px; resize: none; outline: 0; height: 122px; -webkit-box-shadow: none; box-shadow: none; border: 0; border-bottom: 1px solid #d9d9d9; width: 100%; } .page-product-detail .box-read-product-detail .form-input { padding: 12px; } .page-product-detail .box-read-product-detail .inputText { border: 1px solid #d9d9d9; height: 38px; padding: 0 0 0 10px; margin-right: 10px; min-width: 250px; border-radius: 5px; outline: 0; } .page-product-detail .box-read-product-detail .btn-send-comment { color: #fff; font-weight: 500; font-size: 14px; background: #007aff; border-radius: 5px; padding: 10px; border: none; cursor: pointer; } .page-product-detail .box-read-product-detail .avatar-admin { background: #000; } .page-product-detail .box-read-product-detail .btn-send-form-comment:hover { background: #007eff; } .page-product-detail .box-read-product-detail .send-comment-mobile { display: none; } .page-product-detail .box-artilce-col-right .incon-play-youtube { display: none; } .page-product-detail .box-artilce-col-right .icon-video-feature { display: block; } .page-product-detail .box-relative-product { margin-top: 30px; } #newCommentBox { overflow: hidden; position: fixed; left: 0; right: 0; bottom: 0; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 9; } #newCommentBox .comment-box-container { display: block; overflow: hidden; position: relative; width: 100%; max-width: 520px; margin: 10% auto auto; background: #fff; border-radius: 5px; } #newCommentBox .comment-box-container .title { display: block; overflow: hidden; padding: 10px; font-size: 17px; color: #161616; border-bottom: 1px solid #f2f2f2; font-weight: 700; } #newCommentBox .comment-box-container .back-btn { float: right; width: 30px; height: 30px; position: absolute; top: 10px; right: 5px; color: #161616; font-size: 18px; } #newCommentBox .comment-box-container .form-wrap { display: block; overflow: hidden; background: #fff; padding: 10px; } #newCommentBox .comment-box-container .sex label { margin-bottom: 0; margin-right: 30px; } #newCommentBox .comment-box-container .sex .radio { display: inline-block; } #newCommentBox .comment-box-container .sex .radio input { display: none; } #newCommentBox .comment-box-container .form-wrap input { display: block; padding: 8px; width: 100%; margin: 10px 0; height: 35px; border: 1px solid #dadada; background: #fff; border-radius: 4px; font-size: 14px; outline: 0; } #newCommentBox .comment-box-container .sex .radio .icon { height: 13px; width: 13px; display: inline-block; vertical-align: middle; margin-right: 4px; position: relative; margin-top: -3px; border-radius: 50% !important; background: #fff; border: 2px solid #e20505; overflow: hidden; } #newCommentBox .comment-box-container .sex .radio input:checked ~ .icon::before { background-color: #e20505; content: ''; display: block; width: 5px; height: 5px; border-radius: 100%; left: 2px; top: 2px; font-size: 11px; color: #fff; position: absolute; } #newCommentBox .comment-box-container .form-wrap input { display: block; padding: 8px; width: 100%; margin: 10px 0; height: 35px; border: 1px solid #dadada; background: #fff; border-radius: 4px; font-size: 14px; } #newCommentBox .comment-box-container .btn-send-form-cmt { display: block; width: 100%; margin: 0 auto 10px; padding: 8px; height: 40px; font-size: 14px; color: #fff; text-transform: uppercase; border: 1px solid #e20505; border-radius: 4px; background: #e20505; cursor: pointer; text-align: center; } .page-product-detail .box-read-product-detail .box-comment .title-comment, .page-product-detail .box-read-product-detail .box-review .title-review { font-size: 18px; line-height: 26px; margin-bottom: 12px; } .page-product-detail .box-history-product .box-list-history-product { margin-top: 6px; padding: 2px; } .popup-change-pro { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: rgba(0, 0, 0, 0.8); -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); opacity: 0; -webkit-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } .popup-change-pro.active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; z-index: 99999; -webkit-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } .popup-change-pro .popup-main { width: 900px; margin: auto; background-color: #fff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding-bottom: 10px; height: calc(100vh - 40px); } .popup-change-pro .popup-main .head { padding: 0 1%; height: 26px; overflow: hidden; margin-top: 10px; } .popup-change-pro .popup-main .head .title { font-weight: 700; font-size: 16px; float: left; } .popup-change-pro .popup-main .head .close { position: absolute; right: 10px; font-style: normal; cursor: pointer; width: 40px; height: 40px; font-size: 24px; line-height: 32px; float: right; border: solid 1px #e1e1e1; border-radius: 50%; text-align: center; } .popup-change-pro .popup-main .c-btn { cursor: pointer; display: block; text-transform: uppercase; font-size: 11px; color: #ed1b24; border: solid 1px #ed1b24; text-align: center; margin: auto; margin-top: 10px; padding: 6px 0; border-radius: 2px; } .popup-change-pro .list-product-change { height: calc(100vh - 77px); overflow: auto; } .js-load-change .c-pro-item { margin: 1%; width: 23%; border: solid 1px #eee; } .js-load-change .c-pro-item:nth-child(4n + 1) { clear: both; } .page-search { background: #fff; padding: 0 !important; } .page-search .box-filter-category { margin: 0 !important; padding: 0 !important; } .page-search .current-cate-title { display: inline-block; position: relative; margin: 0 0 12px 12px; } .page-search .current-cate-title .current-cate-text { display: inline-block; font-size: 24px; color: #0f5b99; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0; line-height: 28px; } .page-search .current-cate-title .current-cate-total { color: #999; } .page-search .current-cate-title::after { content: ''; position: absolute; border-bottom: 2px solid #0f5b99; width: 100%; left: 0; bottom: -2px; } .page-deal .box-product-deal { margin: 0 !important; } .page-deal .box-title-deal { background: url(https://nguyencongpc.vn/static/assets/nguyencong_2023/images/background-deal.png) no-repeat; background-size: 100% 100%; margin-top: 18px; padding: 12px 0 14px; font-size: 32px; color: #feea32; line-height: 38px; text-transform: uppercase; } .page-deal .box-list-item-deal { margin-top: 18px; } .page-deal .box-list-item-deal .product-item { width: calc(100% / 4 - 12px); } .page-deal .box-list-item-deal .product-item .icon-cart-deal { width: 32px; height: 32px; border-radius: 50%; background: #ebebeb; } .page-deal .box-list-item-deal .product-item .js-item-deal-time { font-size: 13px; padding: 2px 0; border-radius: 3px; border: 0.6px dashed #cb1c21; color: #cb1c21; text-align: center; margin-bottom: 8px; } .page-deal .box-list-item-deal .product-item .buy-now-deal { border-radius: 5px; background: #cb1c21; font-size: 16px; color: #fff; width: 100%; display: block; text-align: center; padding: 7px 0; } .page-deal .box-list-item-deal .product-item:first-child, .page-deal .box-list-item-deal .product-item:nth-child(2) { width: calc(100% / 2 - 6px); border-radius: 22px; background: #0f5b9a; padding: 10px 8px 28px; } .page-deal .box-list-item-deal .product-item:first-child .item-deal, .page-deal .box-list-item-deal .product-item:nth-child(2) .item-deal { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; border-radius: 22px; padding: 18px 14px; background: #fff; } .page-deal .box-list-item-deal .product-item:first-child .icon-cart-deal, .page-deal .box-list-item-deal .product-item:nth-child(2) .icon-cart-deal { display: none; } .page-deal .box-list-item-deal .product-item:first-child .product-image, .page-deal .box-list-item-deal .product-item:nth-child(2) .product-image { width: 50%; padding-bottom: 46%; } .page-deal .box-list-item-deal .product-item:first-child .text-deal-item, .page-deal .box-list-item-deal .product-item:nth-child(2) .text-deal-item { display: block !important; } .page-cart { background: #f0f0f0; padding: 20px 0 40px; } .page-cart .container-cart { max-width: 796px; padding: 0 12px; margin: 0 auto; background: #fff; } .page-cart .cart-header-title { margin: 0 auto 12px; padding: 12px; font-size: 15px; line-height: 18px; font-weight: 500; } .page-cart .cart-header-title .back-homepage:hover { color: var(--swiper-theme-color); } .page-cart .box-info-cart { padding: 12px 0; margin-bottom: 44px; } .page-cart .box-delete-all { margin: 0 12px 12px; } .page-cart .delete-cart-all { border-radius: 3px; border: 1px solid #d6d6d6; padding: 4px 10px; cursor: pointer; } .page-cart .delete-cart-all:hover { color: var(--swiper-theme-color); border: 1px solid var(--swiper-theme-color); } .page-cart .cart-item-info { padding: 16px 12px 12px; border-bottom: 1px solid #ebebeb; } .page-cart .cart-item-info .cart-item-left { width: 60%; } .page-cart .cart-item-info .cart-item-img { width: 120px; margin-right: 10px; } .page-cart .cart-item-info .cart-item-img .icon-deal-cart { width: 30px; position: absolute; left: -10px; top: 0; } .page-cart .cart-item-info .box-change-quantity { width: 100px; height: 32px; } .page-cart .cart-item-info .quantity-change { border: 1px solid #d6d6d6; padding: 10px 8px; height: 32px; cursor: pointer; color: #b8b8b8; } .page-cart .cart-item-info .quantity-change:hover { color: var(--swiper-theme-color); } .page-cart .cart-item-info .box-change-quantity input { width: 50px; height: 32px; padding: 0; text-align: center; outline: 0; font-size: 16px; border: none; border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; } .page-cart .cart-item-info .price-cart-item .price { color: #e31223; margin-bottom: 6px; } .page-cart .cart-item-info .price-cart-item .marketPrice { font-size: 13px; color: #9e9e9e; text-decoration: line-through; } .page-cart .cart-item-info .delete-item-cart { text-align: right; width: 24px; height: 24px; border-radius: 50%; background: #f1f1f1; } .page-cart .title-section-cart { font-size: 16px; line-height: 22px; text-transform: uppercase; color: var(--swiper-theme-color); margin-bottom: 12px; } .page-cart .box-cart-info-customer { margin: 20px 12px 16px; } .page-cart .box-cart-info-customer .list-info-customer input, .page-cart .box-cart-info-customer .list-info-customer select, .page-cart .box-cart-info-customer .list-info-customer textarea { width: 100%; border: 1px solid #d6d6d6; padding: 13px 12px; border-radius: 5px; color: #000; margin-bottom: 12px; outline: 0; } .page-cart .box-cart-info-customer .list-info-customer select { color: #b8b8b8; } .page-cart .box-cart-info-customer .list-info-customer input::-webkit-input-placeholder, .page-cart .box-cart-info-customer .list-info-customer textarea::-webkit-input-placeholder { color: #b8b8b8; } .page-cart .box-cart-info-customer .list-info-customer input::-moz-placeholder, .page-cart .box-cart-info-customer .list-info-customer textarea::-moz-placeholder { color: #b8b8b8; } .page-cart .box-cart-info-customer .list-info-customer input:-ms-input-placeholder, .page-cart .box-cart-info-customer .list-info-customer textarea:-ms-input-placeholder { color: #b8b8b8; } .page-cart .box-cart-info-customer .list-info-customer input::-ms-input-placeholder, .page-cart .box-cart-info-customer .list-info-customer textarea::-ms-input-placeholder { color: #b8b8b8; } .page-cart .box-cart-info-customer .list-info-customer input::placeholder, .page-cart .box-cart-info-customer .list-info-customer textarea::placeholder { color: #b8b8b8; } .page-cart .box-cart-info-customer .list-info-customer textarea { height: 80px; } .page-cart .box-cart-info-customer .list-info-customer .tax-title { margin-bottom: 14px; font-size: 13px; } .page-cart .box-cart-info-customer .list-info-customer .tax-title input { width: -webkit-max-content; width: -moz-max-content; width: max-content; margin-bottom: 0; } .page-cart .box-payment { padding: 0 12px; } .page-cart .box-payment .list-method-payment { margin-bottom: 16px; } .page-cart .box-payment .list-price { font-size: 16px; } .page-cart .box-payment .list-price .price-total2 { margin-top: 10px; } .page-cart .box-payment .has-vat { width: 100%; float: left; font-size: 16px; text-align: right; margin-top: 10px; margin-bottom: 16px; } .page-cart .list-btn-cart .js-send-cart:hover { background: #ff0015; } .page-cart .list-btn-cart .btn-tra-gop:hover { background: #c97e01 !important; } .page-cart .list-btn-cart .btn-tra-gop, .page-cart .list-btn-cart .list-print-cart a, .page-cart .list-btn-cart button { width: 100%; background: #e31223; border: none; outline: 0; color: #fff; text-transform: uppercase; font-size: 18px; line-height: 22px; padding: 11px 0; border-radius: 5px; margin-bottom: 12px; display: block; text-align: center; cursor: pointer; } .page-cart .list-btn-cart .list-print-cart a { background: #fff; border: 1px solid #0a76e4; color: #0a76e4; } .page-cart .list-btn-cart .list-print-cart a:hover { background: #0a76e4; color: #fff; } .page-cart .not-cart { margin: 0 auto; text-align: center; padding: 30px 0; padding: 0 8px; max-width: 1216px; 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-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 50px; } .page-cart .not-cart img { max-width: 100%; width: unset; } .page-cart .not-cart p { padding: 20px 0; font-weight: 500; } .page-cart .not-cart a { margin: 10px 0; padding: 10px; background: #e10034; display: block; width: 15%; margin: 0 auto; color: #fff; border-radius: 8px; text-transform: uppercase; } .page-cart .item-offer .title { font-size: 12px; color: #e31223; cursor: pointer; margin-bottom: 4px; } .page-cart .item-offer .title span { color: var(--swiper-theme-color); margin-left: 4px; } .page-cart .item-offer .item-offer-content { background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid #0d699e; -webkit-box-shadow: 0 0 11px 0 rgba(13, 105, 158, 0.2); box-shadow: 0 0 11px 0 rgba(13, 105, 158, 0.2); padding: 12px; position: absolute; top: 100%; z-index: 1; width: 420px; display: none; } .item-offer-content span, .page-cart .item-offer .item-offer-content p { display: block; position: relative; line-height: 1.9; margin: 0; } .page-cart .item-offer:hover .item-offer-content { display: block; } .send-cart-error, .send-cart-success { max-width: 824px; margin: auto; background: #fff; margin-top: 20px; } .send-cart-title { padding: 30px 10px; text-align: center; } .send-cart-title-name { font-weight: 600; color: var(--swiper-theme-color); font-size: 28px; margin-bottom: 8px; } .send-cart-title-descreption { font-weight: 300; font-size: 14px; line-height: 20px; text-align: center; } .red-text { color: var(--swiper-theme-color); } .send-cart-title-descreption a { font-weight: 700; text-decoration: none; } .send-cart-info { padding: 20px 15px; margin-top: 12px; background: #f2f2f2; font-weight: 300; } .send-cart-info p { margin-bottom: 16px; width: 100%; } .send-cart-info b { font-weight: 700; width: 200px; display: inline-block; } .send-cart-info span { width: calc(100% - 200px); } .send-cart-detail-product { margin-top: 15px; -webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%); border: 1px solid #dee2e6 !important; } .send-cart-product-title { padding: 20px 15px; font-size: 18px; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid #dee2e6; } .send-cart-product-info { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 15px; width: 100%; border-bottom: 1px solid #dee2e6; } .send-cart-item-left { width: 82px; margin-right: 8px; text-align: center; } .send-cart-item-left img { width: 100%; height: 100%; } .send-cart-item-center a { font-size: 14px; font-weight: 600; color: #222; text-decoration: none; } .send-cart-item-center { width: 362px; } .send-cart-item-right { width: calc(100% - 362px - 82px); text-align: right; line-height: 20px; } .new-price, .total-price { font-size: 18px; color: var(--swiper-theme-color); font-weight: 800; } .new-price { color: #000 !important; } .old-price { font-size: 16px; color: #888; text-decoration: line-through; } .number-item { font-weight: 700; font-size: 12px; } .total-item { color: var(--swiper-theme-color); font-size: 16px; font-weight: 800; } .send-cart-total { 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; padding: 15px; } .send-cart-total p:first-child { font-size: 16px; font-weight: 700; } .again-cart { display: block; text-decoration: none; padding: 22px 0 100px; text-align: center; color: var(--swiper-theme-color); font-weight: 600; font-size: 22px; text-transform: uppercase; } .send-cart-item-center a:hover { color: #d60000; } .send-cart-error-descreption { text-align: center; } .send-cart-error-title { color: var(--swiper-theme-color); font-size: 28px; font-weight: 700; margin: 15px 0; } .send-cart-error-descreption p:nth-child(3) { font-size: 15px; margin-bottom: 15px; } .send-cart-error-descreption p:last-child { font-size: 15px; margin-bottom: 48px; } .sprite-send-cart-face { background-position: -103px -96.5px !important; width: 30px; height: 30px; background-size: 155px 131.5px !important; margin: 0 auto; } .col-left-article { width: 66.5%; } .page-article .box-article-home-top .swiper-pagination { position: relative; bottom: 0; } .page-article .tabs-category-article { padding: 8px 0; gap: 60px; margin-bottom: 12px; } .page-article .tabs-category-article .item-tab-article h2 { font-size: 13px; text-transform: uppercase; color: #000; } .page-article a:hover { color: var(--color-primary); } .page-article .img-article { overflow: hidden; display: block; position: relative; width: 100%; } .page-article img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: 0.5s all; -o-transition: 0.5s all; transition: 0.5s all; } .page-article img:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .page-article .tabs-category-article a.active .title-cate-article, .page-article .tabs-category-article a:hover .title-cate-article { color: var(--swiper-theme-color); text-decoration: underline; font-weight: 600; } .border-box-article { -webkit-box-shadow: 0 1px 6px 0 rgba(155, 155, 155, 0.25); box-shadow: 0 1px 6px 0 rgba(155, 155, 155, 0.25); background: #fff; padding: 12px 0; } .page-article .box-new-article { padding: 15px 12px; } .page-article .box-new-article .box-left { width: 56%; } .page-article .box-new-article .box-left .item-article { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; } .page-article .box-new-article .box-left .item-article .img-article { padding-bottom: 67%; } .page-article .box-new-article .box-right { font-size: 14px; } .page-article .box-new-article .box-right h3 { font-size: 14px; } .page-article .box-new-article .box-right .img-article { width: 128px; padding-bottom: 24.5%; } .page-article .box-new-article .box-left .title-article { margin: 6px 0; display: block; } .page-article .box-new-article .item-article .title-article h3 { font-weight: 600; font-size: 16px; height: auto; } .page-article .box-new-article .box-right .item-article .title-article h3 { font-size: 14px; } .page-article .box-new-article .descreption-article { display: none; } .page-article .box-view-article .list-most-view-article { padding: 21px 16px 24px 13px; } .page-article .box-view-article .list-most-view-article li:first-child span { background: var(--color-primary); } .page-article .box-view-article .list-most-view-article li { counter-increment: my-awesome-counter; position: relative; } .page-article .box-view-article .list-most-view-article li::before { content: counter(my-awesome-counter); font-size: 24px; font-weight: 600; position: absolute; left: 12px; color: #fff; } .page-article .box-view-article .list-most-view-article li:first-child span { background: var(--swiper-theme-color); } .page-article .box-view-article .item-most-view-article span { width: 38px; height: 38px; background: #d6d6d6; border-radius: 50%; color: #fff; font-size: 24px; } .page-article .box-video-article { padding: 16px 12px; background: #2a2a2a; margin: 12px 0; color: #fff; } .page-article .box-video-article .title-video-article .title { font-size: 20px; line-height: 24px; } .page-article .box-video-article .title-video-article .follow-youtube { border-radius: 5px; background: red; padding: 6px 8px; } .page-article .box-video-article .title-video-article .follow-youtube:hover { background: #d90404; color: #fff; } .page-article .box-video-article .title-video-article .follow-youtube i { font-size: 26px; } .page-article .box-video-article .list-video-article { margin-top: 18px; } .page-article .box-video-article .list-video-article .box-left .item-article-video .img-article { padding-bottom: 72%; } .page-article .box-video-article .box-right .icon-play, .page-article .box-video-article .list-video-article .box-left .item-article-video .icon-play-small { display: none; } .page-article .box-video-article .box-right .icon-play-small { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: unset; min-height: unset; width: 26px; right: unset; bottom: unset; } .page-article .box-video-article .list-video-article .box-left .item-article-video .title-article-video { display: none; } .page-article .box-video-article .box-left { width: 36.6%; } .page-article .box-video-article .box-right { width: calc(100% - 36.6% - 12px); } .page-article .box-video-article .icon-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } .page-article .box-video-article .box-left img { height: 100%; -o-object-fit: cover; object-fit: cover; } .page-article .box-video-article .item-article-video { height: -webkit-max-content; height: -moz-max-content; height: max-content; width: 100%; } .page-article .box-video-article .box-right .img-article-video { width: 140px; display: block; padding-bottom: 24.5%; } .page-article .box-article-tech { height: -webkit-max-content; height: -moz-max-content; height: max-content; } .page-article .box-article-guide .list-article-col-right, .page-article .box-article-hot .list-article-hot, .page-article .box-article-tech .list-article-tech { padding: 14px 12px 0; color: #000; } .page-article .box-article-tech .list-article-tech .item-article { margin-bottom: 16px; } .page-article .box-article-tech .list-article-tech .item-article h3 { font-size: 18px; height: auto; } .page-article .box-article-tech .list-article-tech .img-article { width: 280px; padding-bottom: 21%; } .page-article .box-article-tech .list-article-tech .time-article { margin: 7px 0; } .page-article .box-article-tech .btn-article-col { width: 365px; margin: 0 auto; } .box-article-category .box-article-global { margin-bottom: 0; margin-top: 30px; } .box-article-category .box-article-global .item-article { width: calc(100% / 3 - 12px); } .box-article-category .box-article-global .btn-article-col { width: 280px; margin: 20px auto 30px; } .page-article .box-article-hot .list-article-hot .item-article:first-child { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: #000; } .page-article .box-article-hot .list-article-hot .item-article:first-child .img-article { padding-bottom: 62%; } .page-article .box-article-hot .list-article-hot .item-article:first-child h3 { font-size: 16px; font-weight: 600; height: auto; } .page-article .box-article-hot .list-article-hot .time-article { margin: 6px 0; } .page-article .box-article-hot .list-article-hot .item-article:nth-child(n + 2) { margin-top: 9px; } .page-article .box-article-hot .list-article-hot .item-article:nth-child(n + 2) .img-article { width: 133px; padding-bottom: 24%; } .page-article .box-article-hot .list-article-hot .item-article:nth-child(n + 2) .descreption-article { display: none; } .box-article-category .box-artice-review .item-article { width: 100%; } .page-article-category { padding-bottom: 30px; } .page-article-category .box-article-global .list-article-global .descreption-article, .page-article-category .box-article-news .descreption-article { display: none; } .page-article-category .box-article-global .list-article-global { padding: 0 12px; } .box-article-detail { padding: 12px 12px 30px; background: #fff; } .box-article-detail .article-detail-page { display: block !important; } .box-article-detail .article-detail-page .col-md-4, .box-article-detail .article-detail-page .col-md-8 { max-width: 800px; margin: 0 auto; padding: 0; } .box-article-detail .box-article-detail-title { width: 100%; margin-bottom: 20px; } .box-article-detail .box-article-detail-title h1 { width: 100%; font-size: 30px; font-weight: 700; line-height: 40px; } .box-article-detail .box-article-detail-title .title { width: 100%; float: left; font-size: 18px; color: #777; } .box-article-detail .box-article-detail-ct { width: 100%; float: left; margin-bottom: 50px; } .box-article-detail img:hover { -webkit-transform: unset !important; -ms-transform: unset !important; transform: unset !important; } .box-article-detail .box-article-detail-cmt { width: 100%; float: left; } .box-article-detail .box-article-detail-cmt iframe { width: 100% !important; } .box-article-detail .box-article-relay .article-list { width: 100%; gap: 20px 12px; } .box-article-detail .box-article-relay .article-list .item-article { width: calc(100% / 3 - 8px); } .box-article-detail .box-article-relay .article-list .item-article .img-article { padding-bottom: 60%; } .box-article-detail .box-article-relay .article-list .item-article .descreption-article { display: none; } .box-article-detail .box-article-relay .article-list .item-article .time-article { margin-top: 6px; } .box-article-detail .author-avatar img { width: 80px; } .box-article-detail .author-name { font-weight: 600; font-size: 16px; display: block; } .box-article-detail .title-ar { width: 100%; float: left; border-bottom: solid 1px #e1e1e1; position: relative; font-size: 24px; text-transform: uppercase; color: #000; font-weight: 700; margin-bottom: 20px; line-height: 34px; } .box-article-detail .title-ar::after { content: ''; width: 60px; height: 1px; float: left; background: #0f5b9a; position: absolute; left: 0; bottom: -1px; z-index: 1; } .box-article-detail .title-ar span { color: #0f5b9a; } .box-login { padding-bottom: 30px; } .box-login .col-left, .box-login .col-right { width: 50%; } .box-login .col-left tr td:first-child, .box-register tr td:first-child { width: 140px; } .box-login .col-left tr, .box-register tr { margin-bottom: 12px; } .box-login .col-left tr td input, .box-register tr td button, .box-register tr td input, .box-register tr td select, .btn-contact { width: 100%; padding: 8px 12px; border: 1px solid #ced4da; border-radius: 0.25rem; line-height: 16px; outline: 0; } .box-register .register-sex input { width: unset; } .box-login .btn-login, .btn-contact, .btn-customer { width: 150px !important; background: var(--color-primary); color: #fff; margin-right: 12px; cursor: pointer; } .box-login .btn-login:hover, .btn-customer:hover { background: var(--swiper-theme-color); } .box-login .item-social { width: 50%; } .social-login-btn { width: 100%; height: 41px; border-radius: 3px; margin-bottom: 5px; } .btn-google { background: #df4a32; } .btn-facebook { background: #3b5998; } .social-login-icon { height: 41px; width: 41px; background: rgba(0, 0, 0, 0.15); color: #fff; font-size: 16px; text-align: center; line-height: 41px; border-radius: 4px 0 0 4px; } .social-login-txt { color: #fff; font-weight: 600; margin: 0 auto; } .box-register h1 { font-size: 18px; font-weight: 500; line-height: 22px; margin-bottom: 30px; } .forgot-password-content { max-width: 800px; padding-top: 20px; margin: 0 auto; } .forgot-password-content h2 { font-size: 26px; font-weight: 600; margin-bottom: 16px; } .forgot-password-content p { font-size: 16px; margin-bottom: 20px; } .forgot-password-content table { width: 100%; } .forgot-password-content input { width: 100%; padding: 10px 8px; font-size: 18px; border-radius: 5px; outline: 0; border: 1px solid var(--color-primary); } .forgot-password-content td:first-child { font-size: 18px; width: 270px; } .btn-forgot-password { display: block; width: 50% !important; margin: 30px auto; height: 46px; border: 0; border-radius: 6px; background-color: var(--color-primary); font-size: 18px; font-weight: 600; color: #fff; margin-top: 30px; cursor: pointer; } .account { padding: 30px 0; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; font-size: 16px; } .account .col-left { border-right: 1px solid #f5f5f5; } .account .left-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 60px 20px 0; width: 220px; } .account .left-title span { font-size: 16px; font-weight: 400; } .account .left-title p { font-size: 18px; margin-top: 4px; } .account .title-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } .account .title-list a { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 14px; } .account .title-list a:hover { background-color: #f5f5f5; } .account .col-right { padding: 10px; } .account .col-right h2 { font-size: 22px; font-weight: 600; margin-bottom: 16px; } .info-page table { width: 520px; } .account .col-right .form-input { width: 100%; padding-left: 13px; border-radius: 5px; border: 1px solid #e1e1e1; height: 38px; margin-bottom: 8px; } .btn-change { padding: 10px 20px; border: none; background-color: var(--color-primary); color: #fff; border-radius: 5px; font-size: 16px; cursor: pointer; } .order-page table { font-size: 16px; } .order-page td { padding: 10px; border: 1px solid #ccc; } .red-bold { color: #d91605; font-weight: 600; } .box-contact .form-group { margin-bottom: 16px; } .box-contact .col-form-label { margin-bottom: 8px; display: block; } .box-contact .input-holder input { width: 100%; padding: 8px 12px; outline: 0; border: 1px solid #ced4da; color: #495057; border-radius: 5px; } .brand-page { padding: 20px 10px; margin-bottom: 30px; } .brand-page .featured-brand { width: 100%; float: left; margin-bottom: 30px; } .brand-page .featured-brand .title-n { width: 100%; float: left; font-size: 18px; text-transform: uppercase; font-weight: 700; margin-bottom: 20px; } .brand-page .featured-brand .list-n { width: 100%; float: left; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .brand-page .featured-brand .list-n li { width: 12.5%; float: left; text-align: center; margin-bottom: 10px; } .brand-page .featured-brand .list-n li img { max-height: 25px; } .brand-page .brand-list { margin-bottom: 30px; } .brand-page .brand-list .first-letter { float: left; margin-right: 30px; } .brand-page .brand-list .first-letter .title-n { float: left; font-size: 18px; text-transform: uppercase; font-weight: 700; line-height: 25px; } .brand-page .brand-list .list-letter { float: left; } .brand-page .brand-list .list-letter li { float: left; margin-right: 25px; font-size: 16px; line-height: 25px; } .brand-page .brand-item { margin-bottom: 20px; } .brand-page .brand-item .smallTitle { font-size: 18px; font-weight: 700; margin-bottom: 10px !important; line-height: 30px; border-bottom: solid 1px #ccc; } .brand-page .brand-item .list-unstyled { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .brand-page .brand-item .list-unstyled li { text-align: center; padding: 0 10px; margin-bottom: 20px; text-transform: capitalize; } .brand-page .brand-item .list-unstyled li img { max-height: 25px; width: auto; } .brand-page a { color: #222; } .brand-page a:hover { color: var(--color-primary); } .brand-detail-page .category-nav-list img { width: 40px; } .name-item-drive { width: 240px; padding: 0 8px !important; margin: 14px 0 !important; } .page-error .box-error-404 { gap: 30px; margin: 50px auto; } .page-error .box-img img { max-width: 500px; } .page-error .error-content h3 { color: #30425b; font-size: 48px; font-weight: 500; line-height: 57px; max-width: 460px; text-align: center; margin-bottom: 30px; } .page-error .list-contact .item-contact { margin: 0 10px; width: 130px; } .page-error .list-contact .item-contact p { color: #666; font-size: 12px; line-height: 17px; margin-bottom: 5px; text-align: center; } .page-error .list-contact .item-contact img { width: 75px; } .page-error .error-content .link { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 40px; } .page-error .error-content .link--blue { background-color: #2f80ed; } .page-error .error-content .link--yellow { background-color: #0f5b99; padding: 12px; } .page-error .error-content .link-tel { color: #000; font-size: 16px; font-weight: 700; } .error-content .txt { color: #30425b; font-size: 24px; line-height: 27px; margin-bottom: 15px; } #adv-popup .background { display: none; position: fixed; height: 100% !important; width: 100%; top: 0; left: 0; background: #000; z-index: 9999999; opacity: 0.8; } #adv-popup .banner { display: none; position: fixed; z-index: 99999991; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; left: 50%; } #adv-popup .close { font-size: 25px; right: 0; top: 0; color: red; font-weight: 700; position: absolute; opacity: 1; text-shadow: none; cursor: pointer; } #adv-popup .banner img { max-width: 100%; display: block; margin: auto; width: auto; height: auto; } .box-article-detail .box-article-detail-ct .swiper-slide { margin: 0 10px 10px 0; width: calc(100% / 3 - 10px); border: solid 1px #cacaca; border-radius: 8px; overflow: hidden; } #content-desc p { -webkit-margin-after: 1em; margin-block-end: 1em; } #content-desc h1, #content-desc h2, #content-desc h4, #content-desc h5, #content-desc h6 { -webkit-margin-after: 0.83em; margin-block-end: 0.83em; } #content-desc h3 { -webkit-margin-after: 1em; margin-block-end: 1em; } .build-pc .popup-select.active .fa-search { -webkit-filter: unset; filter: unset; } #fancybox-showroom { max-width: 1000px; } .popup-showrom-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .popup-showrom-container .group-title { border-bottom: 1px solid; padding: 0 10px; font-size: 16px; font-weight: 700; line-height: 44px; width: 100%; } .popup-showrom-container .item { padding: 15px; font-size: 16px; line-height: 1.6; width: calc(50% - 10px); margin-bottom: 20px; border-radius: 12px; background: -webkit-gradient(linear, left top, left bottom, from(#3343da), to(#85b6e3)); background: -o-linear-gradient(#3343da, #85b6e3); background: linear-gradient(#3343da, #85b6e3); color: #fff; } .popup-showrom-container .item .item-title { font-size: 18px; font-weight: 700; color: #fff; } .popup-showrom-container .item p { margin: 0 0 9px 0; } .popup-showrom-container .item iframe { display: block; min-height: 250px; } .global-menu-container { position: relative; width: 200px; margin-right: 20px; padding-bottom: 10px; } .global-menu-container .group-title { background: #fff; border-radius: 6px; padding: 0 12px; line-height: 32px; font-weight: 700; text-transform: uppercase; color: #0f5b99; cursor: pointer; } .global-menu-container .global-menu-holder { opacity: 0; visibility: visible; z-index: -1; position: absolute; -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); width: 200px; height: 464px; -webkit-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; top: calc(100% + 20px); } .global-menu-container .group-title i { -webkit-filter: inherit; filter: inherit; margin: 0 5px 0 0; } .global-menu-container:hover .global-menu-holder { opacity: 1; visibility: visible; top: 100%; z-index: 99; } .global-menu-holder .item:first-child .cat-1 { border-radius: 5px 5px 0 0; } .global-menu-holder .sub-menu-list { display: none; background: #fff; position: absolute; left: 200px; top: 0; height: 464px; overflow: auto; width: 1000px; -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); border-radius: 0 10px 10px 0; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 15px 10px 15px 15px; } .global-menu-holder .item .cat-1 { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 6px 10px; line-height: 24px; background: #fff; -webkit-transition: unset; -o-transition: unset; transition: unset; height: 100%; } .global-menu-holder .item .cat-1 img { margin-right: 10px; width: 20px; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .global-menu-holder .item .cat-1 .cat-title { width: calc(100% - 30px); display: block; font-size: 12px; } .global-menu-holder .item:last-child .cat-1 { border-radius: 0 0 5px 5px; } .global-menu-holder .item:hover .cat-1 { color: #fff; background: #0a76e4; } .global-menu-holder .item:hover .cat-1 img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .global-menu-holder .item:hover .sub-menu-list { display: -webkit-box; display: -ms-flexbox; display: flex; } .global-menu-holder .item { height: calc(100% / 12); } .global-menu-holder .sub-menu-list .sub-cat-2 { width: 25%; padding: 0 15px 20px 0; } .global-menu-holder .sub-menu-list a { display: table; margin: 0 0 10px; line-height: 20px; } .global-menu-holder .sub-menu-list .cat-2 { font-weight: 700; color: var(--swiper-theme-color); font-size: 14px; line-height: 22px; text-transform: uppercase; margin-bottom: 12px; } .global-menu-holder .sub-menu-list a:hover { color: #e31223; } .header { position: relative; } .header .banner-header-right { position: absolute; right: 0; } .header .banner-header-left { position: absolute; left: 0; } @media (max-width: 1400px) { .header .banner-header-right img, .header .banner-header-left img { width: 84px; } } .page-product-detail .box-right .content-spec table * { width: auto !important; word-break: normal; } .article-search-container { margin-bottom: 12px; padding: 0; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; border: 1px solid #e1e1e1; } .article-search-container input { height: 40px; padding: 0 10px; width: calc(100% - 40px); background: #fff; margin: 0; border: 0; outline: none; } .article-search-container button { height: 40px; width: 40px; text-align: center; border: 0; outline: none; cursor: pointer; background: #0f5b99; color: #fff; font-size: 16px; } #paging-comment a { border-radius: 50%; padding: 5px 12px; } #paging-comment a.active { background: #0a76e4; border: solid 1px #0a76e4; color: #fff; font-weight: 600; } #paging-comment .paging { display: flex; align-items: center; justify-content: center; } .btn-more { display: block; width: 200px; height: 40px; text-align: center; line-height: 40px; border: 1px solid #1781e0; border-radius: 5px; margin: 0 auto; color: #1781e0; } .btn-more:hover { background: #1781e0; color: #fff; } .box-review .item-comment:nth-child(n + 3) { display: none; } .overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); z-index: 99; display: none; } .overlay.active { display: block; } #popup-hotline .content-pop .item-people .phone { font-weight: 700; margin-right: 10px; color: #ffb233; width: 100px; display: inline-block; } .p-icon-holder * { position: absolute; height: auto; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; z-index: 1; } .icon-marketing * { position: absolute; height: auto; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; z-index: 1; }