@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('../dist/font-awesome/css/font-awesome.min.css');
@import url('../dist/bootstrap/css/bootstrap.min.css');
body { color: #000; font-family: 'DM Sans', sans-serif, Arial; font-weight: 400; overflow-x: hidden; }
a, a:hover { text-decoration: none; }
a:focus { outline: none; }
*:focus { outline: none; }
button:active, button:focus, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; }
.img-responsive, .navbar-brand > img { display: inline-block; }
img { display: inline-block; height: auto; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: #3C8EFD; font-family: 'DM Sans', sans-serif; font-weight: 700; }
h1 { font-size: 25px; }
p, li { color: #79828D; font: 400 15px/1.5 'DM Sans', sans-serif; overflow-wrap: break-word; word-wrap: break-word; }
.clearfix { clear: both; margin: 0px; padding: 0px; }
.center { text-align: center; }

@font-face { font-family: 'Bradley Hand ITC TT'; src: url('../fonts/BradleyHandITCTTBold.woff2') format('woff2'), url('../fonts/BradleyHandITCTTBold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; }

.register { background-color: #FDFEFF; }
.register section { display: grid; align-content: center; height: 80vh; padding-bottom: 1rem; }
.register h1 { color: #3C8EFD; text-transform: capitalize; }
.register p { margin: 0px auto 1rem; max-width: 380px; }
.register .form-label { color: #5D6D81; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.register .input-group-text {background-color: #fff;border-color: #82A5BF;color: #97A2AF;font: 400 15px 'DM Sans', sans-serif;border-top-right-radius: 0px;border-bottom-right-radius: 0px;}
.register .form-control, .register .form-select { border-color: #82A5BF; color: #0D2340; font: 400 14px 'DM Sans', sans-serif; line-height: 23px; }
.register .btn-primary {  background-color: #82A5BF; border-color: #82A5BF; font: 700 14px 'DM Sans', sans-serif; line-height: 26px; }

.register .form-check { padding-left: 2.5em; }
.register .form-check-input { border-color: #707070; height: 1.9rem; margin-left: -2.5em; width: 1.9rem; }
.register .form-check-input:checked { background-color: #fff; border-color: #707070; }
.register .form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%234D4E50'/%3e%3c/svg%3e"); background-size: 130% 130%; }
.register strong { color: #3C8EFD; float: right; font-family: 'Bradley Hand ITC TT', sans-serif; font-size: 16px; font-weight: bold; }

.hero { position: relative; }
.hero h1 { color: #fff; }
.hero img { height: 100vh; width: 100vw; }

.wrapper { background-color: #ffffff; display: flex; width: 100%; align-items: stretch; }

.container-fluid { min-height: 100vh; }

#sidebar { background: #C9D2D9; min-width: 206px; max-width: 206px; padding: 0px 25px; transition: all 0.3s; }
#sidebar.active { margin-left: -206px; }
#sidebar .sidebar-header { padding: 2rem 0px; }
#sidebar ul { list-style: none; margin: 0px 0px 30px; padding: 0px; }
#sidebar ul li { color: rgba(0, 0, 0, 50%); font: 500 14px 'Poppins', sans-serif; padding: 1rem 0px 2rem; }
#sidebar ul li a { color: #63686b; display: block; }
#sidebar ul li a svg { margin-right: 10px; opacity: 0.5; width: 24px; }
#sidebar ul li a.active { color: #E24E4E; }
#sidebar ul li a.active svg { fill: #E24E4E; opacity: 1; }

#sidebarCollapse { display: none; }
#sidebarCollapse .fa { font-size: 24px; vertical-align: middle; }

#content { min-height: 100vh; padding: 0px; transition: all 0.3s; width: 100%; }
#content h1 { color: #000; font: 500 24px 'Poppins', sans-serif; }
#content h1 span { color: rgba(0, 0, 0, 50%); font: 500 18px 'Poppins', sans-serif; }
#content h2 { color: #000; font: 500 23px 'Poppins', sans-serif; }
#content p { color:#000; font: 500 18px 'Poppins', sans-serif; }

.navbar { padding: 2rem 0rem 4rem; }
.navbar input[type="search"] { background-color: #D4D4D4; border: none; border-radius: 8px; font: 500 14px 'Poppins', sans-serif; line-height: 33px; width: 358px; }
.navbar h4 { color: #000; font: 500 18px 'Poppins', sans-serif; }
.navbar .navbar-nav .nav-link { color: rgba(0, 0, 0, 50%); font: 500 18px 'Poppins', sans-serif; padding: .5rem 1.1rem; text-transform: capitalize; }

.sort { color: #000; font-size: 18px; float: right; }
.sort .form-select { border: none; color: rgba(0, 0, 0, 50%); font: 500 18px 'Poppins', sans-serif; line-height: 23px; max-width: 120px; }
.sort .fa { color: #000; font-size: 22px; margin: 0px 10px; }

.prd img { border-radius: 8px; width: 100%; }

.overlay { background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(202,202,202,0.77) 50%, rgba(105,97,97,0.6) 100%); border-radius: 0px 0px 8px 8px; bottom: 1px; padding: 12px 12px; position: absolute; left: 0px; width: 100%; z-index: 1; }
.overlay p { color: #000; font: 500 18px 'Poppins', sans-serif; margin-bottom: .5rem; }

.btn { border-radius: 5px; font: 500 12px 'Poppins', sans-serif; }
.btn-outline-secondary { border-color: rgba(0, 0, 0, 25%); }
.btn-secondary { background-color: #82A5BF; border-color: #82A5BF; }

.ban { min-height: 100vh; }

.special { background: url("../images/scl_bg.jpg") no-repeat left top / cover; padding-top: 5rem !important; height: 100vh; min-height: 845px; }
.overcart { padding: 0px 12px 0px 0px; position: absolute; right: 0px; top: 2rem; width: 285px; z-index: 1;}
.qty { background: #fff url("../images/gem.png") no-repeat 10px center; border-color: #fff; border: 1px solid #eaeaea; color: #000; font: 500 18px 'Poppins', sans-serif; line-height: 31px; text-align: right; }
.lang { width: 84px; }
.lang .btn-light { background-color: #fff; border: 1px solid #eaeaea; border-radius: 30px; height: 45px; padding: 6px 5px; text-align: inherit; width: 100%; }
.lang span { background-color: #C4C4C4; border-radius: 100%; display: inline-block; color: #fff; line-height: 31px; margin-right: 10px; text-align: center; width: 31px; }
.lang .dropdown-toggle::after { border: none; }
.lang .dropdown-menu { min-width: 84px; padding: 0px 0px; right: 0; }
.lang .dropdown-item { padding: 2px 10px; }

#slidecart > .tns-item { height: 100%; }

.price { color: #000; font: 500 18px 'Poppins', sans-serif; }
.price span { color: rgba(0, 0, 0, 50%); font: 500 14px 'Poppins', sans-serif; margin-left: 5% }
.price span span { margin: 0px; text-decoration: line-through; }

.modal-backdrop { background-color: transparent; }
.modal-content { border-color: #707070; border-radius: 8px; box-shadow: 1px 2px 20px rgba(0, 0, 0, 30%); }
.modal-content .btn-close { background-size: 40%; border: 1px solid #333; border-radius: 50%; position: absolute; right: 5px; top: 5px; z-index: 1; }
.modal-body .prd p { color: #000; margin-top: 5px; }
.modal-body h3 { color: #000; font: 500 18px 'Poppins', sans-serif; }
.modal-body p { color: rgba(0, 0, 0, 50%); font: 500 15px 'Poppins', sans-serif; }

.quan { background: url("../images/scl_bg_01.jpg") no-repeat left top / cover; padding-top: 5rem !important; height: 100vh; min-height: 845px; }
.rgt { text-align: right; }
.btn-outline { border: 1px solid #1D1D1F; border-radius: 30px; color: #252525; display: inline-block; font: 400 15px 'Poppins', sans-serif; margin-top: 5%; padding : .5rem .5rem; text-align: center; width: 213px; }
.btn-outline:hover { background-color: #1D1D1F; color: #fff; }

.product-list { background-color: #C9D2D9; border: 1px solid #D6D6D6; font: 400 15px 'Roboto', sans-serif; clear: both; padding: 15px 20px; width: 100%; }
.product-list p { color: #252525 !important; font: 400 15px/2 'Roboto', sans-serif !important; }
.product-list .price { color: #252525; font: 900 15px 'Roboto', sans-serif;}
.product-list .price span { color: #252525; font: 400 15px 'Roboto', sans-serif; margin: 0px 10px 0px 0px; text-decoration: line-through; }
.product-list .remove { color: #E24E4E; text-decoration: underline; }

.btn-heckout { border-radius: 30px; font: 400 14px 'Roboto', sans-serif; line-height: 43px; width: 186px; }

.box { background-color: #C9D2D9; border: 1px solid #D6D6D6; clear: both; padding: 15px 12px; width: 100%; }
.box figure { display: grid; align-content: end; justify-content: end; height: 105px; width: 100%; }
.box h1 { color: #000; }
.box span, .box a { color: #000; font: 300 16px 'Poppins', sans-serif; }
.box a { text-decoration: underline; }
/*.box .txt-top{ margin-top: -19px; line-height: 28px !important; }*/

.walt { width: 188px; }

.bal { color: #000; font: 300 12px 'Poppins', sans-serif; }

textarea.form-control { background-color: rgba(201, 210, 217, 40%); border: 1px solid #D6D6D6; border-radius: 0px; min-height: 480px; }

.table tr th, .table tr td { color: #6A6A6A; font: 500 14px 'Poppins', sans-serif; }
.table tr th { background-color: #C9D2D9; }
.table tr td { background-color: rgba(201, 210, 217, 40%); border-top: 4px solid #fff; }

.page { color: #000; font-size: 18px; float: right; }
.page .fa { color: #000; font-size: 22px; margin: 0px 10px; }

.gem-topup .form-label { color: #5D6D81; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.gem-topup .form-control, .register .form-select { border-color: #82A5BF; color: #0D2340; font: 400 14px 'DM Sans', sans-serif; line-height: 23px; }
.gem-topup .btn-primary {  background-color: #82A5BF; border-color: #82A5BF; font: 700 14px 'DM Sans', sans-serif; line-height: 26px; }

.gem-topup .form-check { padding-left: 2.5em; }
.gem-topup .form-check-input { border-color: #707070; height: 1.9rem; margin-left: -2.5em; width: 1.9rem; }
.gem-topup .form-check-input:checked { background-color: #fff; border-color: #707070; }
.gem-topup .form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%234D4E50'/%3e%3c/svg%3e"); background-size: 130% 130%; }
.gem-topup strong { color: #3C8EFD; float: right; font-family: 'Bradley Hand ITC TT', sans-serif; font-size: 16px; font-weight: bold; }

/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
	.col { flex-basis: auto; }
	.register section { height: 100%; }
	.register .col { flex-basis: 0; }
	#sidebar { margin-left: -206px; padding: 0px 15px; }
    #sidebar.active { margin-left: 0; }
    #sidebarCollapse { display: block; margin: 5px 0px 0px; }
	#sidebar ul li { font-size: 15px; }
    #content { min-width: 320px; }
    .navbar { padding: 0.5rem 0rem 1rem; }
    .navbar input[type="search"] { width: 100%; }
    .navbar .d-flex { width: 100%; }
    .navbar .d-flex .me-3 { margin: 0px 0px 5px !important; }
    .navbar-light .navbar-toggler { border: none; }
    .navbar .navbar-nav .nav-link { padding: .5rem 0rem; }
    .overcart { position: relative; right: inherit; top: 10px; width: 100%; }
    .sort { margin-bottom: 5px; }
    #content .prd .col, .overcart .col, .special .col { flex-basis: 0; }
    .modal-body .col { width: 70%; }
    .btn-outline { margin: 0px 0px 5%; }
    .quan .col, .quantity .col { flex-basis: 0; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	#sidebar { min-width: 188px; max-width: 188px; margin-left: -188px; padding: 0px 15px; }
    #sidebar.active { margin-left: 0px; }
    #sidebarCollapse { display: block; margin: 5px 0px 0px; }
    #sidebar ul li { font-size: 15px; }
    #content h2 { font-size: 20px; }
    #content p { font-size: 16px; }
    .navbar { padding: 1rem 0rem 2rem; }
    .navbar .d-flex { width: 48%; }
    .navbar input[type="search"] { width: 100%; }
    .navbar-light .navbar-toggler { border: none; }
    .navbar .navbar-nav .nav-link { padding: .5rem 0rem; }
    .overcart { right: 0px; top: 1rem; width: 240px; }
    .btn { padding: .375rem .65rem; }
    .special, .quan { min-height: 100vh; }
    .product-list .gx-5 { --bs-gutter-x: 1.5rem; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	#sidebar { min-width: 188px; max-width: 188px; padding: 0px 15px; }
	#sidebar ul li { font-size: 16px; }
	#content h2 { font-size: 16px; }
	#content p { font-size: 14px; }
	.navbar input[type="search"] { width: 230px; }
	.navbar .navbar-nav .nav-link { padding: .5rem .5rem; }
	.qty { background-size: 24px; background-position: 5px center; }
	.lang span { margin-right: 5px; }
	.btn { font-size: 9px; padding: .375rem .375rem; }
	.price { font-size: 14px; }
	.price span { font-size: 11px; }
}

@media (min-width: 1600px) {
	.col-lg-4 { max-width: 25%; }
	.special, .quan { height: 100vh; }
}