/*create by designonshop.com*/
body { margin:0; padding:0; padding-top: 0;font-family:'Kanit'; font-size:16px; background-color:#f5f5f5; color:#525252;}
body.bgUser { background-color:#f4f4f4; }
/*body.bgUser { background-color:#f5f7fa; background: url('../../../images/user_bg.jpg') no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; }
body.bgUser:before { -webkit-filter: blur(5px);z-index:0; }*/
/*img { width: 100%;}*/
.none { display: none;}
a { color: #222; }
a:hover { text-decoration: none; color: #FF5722;}
a.orange { color: #FF5722; }
a.orange:hover { text-decoration: none; color: #222;}
.fix { clear:both; }
img.img-fluid-full{ width: 100%;}
.mt_xl { margin-bottom: 10px;}
.mt_sm { margin-bottom: 15px;}
.mt_md { margin-bottom: 20px;}
.mt_mdd { margin-bottom: 25px;}
.mtt_xll { margin-top: 5px;}
.mtt_xl { margin-top: 10px;}
.mtt_sm { margin-top: 15px;}
.mtt_md { margin-top: 20px;}
.mtt_mdd { margin-top: 25px;}
.mtb_sm { margin-top: 15px; margin-bottom: 15px;}
.mtb_md { margin-top: 25px; margin-bottom: 25px;}
.mtb_sm { margin-top: 30px; margin-bottom: 30px;}
.mtb_lg { margin-top: 40px; margin-bottom: 40px;}
.mtb_xl { margin-top: 50px; margin-bottom: 50px;}
.pd4 { padding: 10px;}
.font_sm { font-size: 13px;}
.font_smm { font-size: 14px;}
.font_md { font-size: 16px;}
.font_mdd { font-size: 18px;}
.font_lg { font-size: 20px;}
.font_xl { font-size: 30px;}
.font_tatoma { font-family:Tahoma, Geneva, sans-serif; }
.container-top {position:relative;z-index: 1030;}
.container-top.fixed-top {position:fixed;top: 0;right: 0;left: 0;}
/*.header_content_page_top {background: #e25f3f; padding-top: 3px; padding-bottom: 0; font: 14px / 20px "Tahoma", Helvetica, Arial, Verdana, sans-serif;}*/
.header_content_page_top {background: linear-gradient(90deg,#003b9e,#0d5bdb); padding-top: 3px; padding-bottom: 0; font: 14px;}
.header_content_page_top a { text-decoration:none;}
.header_content_page_top .nav-link-def a{ color: #fff;}
.header_content_page_top .nav-link-def a:hover { color: #FF5722;}
.header_content_page_top .nav-link-dropdown a{ color: #333;}
.header_content_page_top .nav-link-dropdown a:hover { background-color:none;}
.header_content_page_top .user_login_image { margin-top: -5px;}
.header_content_page_top .user_login_image img{width: 30px;}
.header_content_page_top2 { background-color: #fff;}
.header_content_page_top2 { width: 100%; margin-bottom: 10px; background: #fdfdfd; border-top: 3px solid #293744;border-bottom: 1px solid #dddddd; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.slide_full { background-color:#f2f2f2; min-height: 100px; margin-bottom: 15px;}
.slide_full img { width: 100%;}
.container_footer { background-color: #fff; padding: 15px 0; color: #555;}
.container_footer ul { list-style: none; margin: 0; padding: 0; }
.container_footer a { color: #555; font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 13px;}
.container_footer a:hover { color: #FF5722; }
.container_mt { margin-top: 25px; margin-bottom: 15px;}
.container_sm { margin-top: 20px; margin-bottom: 20px;}
.container_md { margin-top: 25px; margin-bottom: 25px;}
.navbar-brand img{ max-height: 150px;}
.imageMaxsize_smmm { max-width: 50px;}
.imageMaxsize_smm { max-width: 100px;}
.imageMaxsize_sm { max-width: 200px;}
/* FASTMALL MODERN UI */
.slide_full img{
border-radius:18px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}
/* product card */
.product-item{
padding:10px;
}
/* hover menu */
.header_content_page_top a:hover{
color:#FF5722 !important;
transition:.2s;
}
/* button */
.btn-outline-danger{
border-radius:10px;
border-color:#FF5722;
color:#FF5722;
}
button{
font-size:16px;
font-weight:bold;
background:#ff4d00;
color:#fff;
border-radius:10px;
padding:10px;
border:none;
}
/* product image hover */
.product-item img{
transition:.2s;
}
.fa{
margin-right:8px;
color:#ff4d00;
}
.nav-link i{
margin-right:6px;
color:#ff4d00;
font-size:14px;
}
.product-item:hover img{
transform:scale(1.03);
}
/* PRODUCT GRID */
.box-product,
.product-box,
.product-item{
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:0 2px 10px rgba(0,0,0,.05);
transition:.25s;
margin-bottom:15px;
}
.box-product:hover,
.product-box:hover,
.product-item:hover{
transform:translateY(-4px);
box-shadow:0 12px 28px rgba(0,0,0,.08);
}
/* product image */
.box-product img,
.product-box img,
.product-item img{
transition:.25s;
}
.box-product:hover img,
.product-box:hover img,
.product-item:hover img{
transform:scale(1.04);
}
/* section title */
.title_product,
.box-title{
font-weight:600;
color:#0D47A1;
}
/* menu */
.header_content_page_top2{
border-top:3px solid #0D47A1;
box-shadow:0 4px 10px rgba(0,0,0,.06);
}
/* search */
input[type=text]{
border-radius:10px;
}
.modal-center .modal-dialog {
-webkit-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%);
top: 20%;
margin: 0 auto;
}
.desktop { display: block;}
.mobile { display: none;}
.desktop414 { display: block;}
.mobile414 { display: none;}
input::-webkit-input-placeholder {color: #c9c9c9 !important;font-family:Tahoma, Geneva, sans-serif; font-size: 14px;}
input::-moz-placeholder {color: #c9c9c9 !important;font-family:Tahoma, Geneva, sans-serif;font-size: 14px;}
input:-moz-placeholder {color: #c9c9c9 !important;font-family:Tahoma, Geneva, sans-serif;font-size: 14px;}
input:-ms-input-placeholder {color: #c9c9c9 !important;font-family:Tahoma, Geneva, sans-serif;font-size: 14px;}
textarea::-webkit-input-placeholder {color: #c9c9c9 !important;font-family:Tahoma, Geneva, sans-serif; font-size: 14px;}
textarea::-moz-placeholder {color: #c9c9c9 !important;font-family:Tahoma, Geneva, sans-serif;font-size: 14px;}
textarea:-moz-placeholder {color: #c9c9c9 !important;font-family:Tahoma, Geneva, sans-serif;font-size: 14px;}
textarea:-ms-input-placeholder {color: #c9c9c9 !important;font-family:Tahoma, Geneva, sans-serif;font-size: 14px;}
.divider {overflow: visible;border-bottom: 1px solid #dddddd;text-align: center;height: 13px;margin-bottom: 25px;margin-top: 15px;}
.divider > span {background-color: #fff;font-size: 18px;line-height: 100%;text-transform: lowercase;padding: 0 10px;}
.input-group { width: 100%;}
.input-group>.form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group>.input-group-prepend,.btn-my { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn,label,select,input[type="checkbox"] { cursor: pointer;}
.form-control:focus {border-color:#898989;outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 rgba(102, 175, 233, .6);box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 rgba(102, 175, 233, .6);}
.breadcrumb_head {padding: 0;background-color: #fff;border-radius:0; font-size: 13px;}
.breadcrumb-row { background-color: transparent; margin-bottom: 0; border-radius: 0; font-family: Kanit, Verdana, Segoe, sans-serif; font-size: 13px; padding-left: 0; padding-right: 0;}
.breadcrumb-item-row+.breadcrumb-item-row::before {content: ">";}
.tab-content-border { border: 1px solid #dee2e6; border-top: 0;}
.card { }
.card p{ }
form.fmSubmitSO { width: 100% !important;}
.table-font { font-family:Tahoma, Geneva, sans-serif; font-size: 14px;}
.xxxxxxxx { background-color: rgb(38, 38, 38);background-image: url('../../bg-pattern-final.png'), linear-gradient(165deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 65%, rgba(38, 38, 38, 0.3) 65.1%, rgba(38, 38, 38, 0.3));}
.navbar-menu { padding-left: 0; padding-right: 0;}
.bg-inverse {background-color: #fff!important;}
.nav-link-padding {padding: .5em 5em;}
.dropdown-menu { border-radius: 0; }
.navbar-inverse .navbar-nav .nav-link {color: rgba(0, 2, 34,1);}
.dropdown-item { font: 14px / 20px "Kanit", Helvetica, Arial, Verdana, sans-serif; }
.dropdown-item:hover { background: transparent; }
/*.dropdown:hover > .dropdown-menu {display: block;}*/
.cartTop { font-size: 25px; position: relative; width: 50px; height: 50px;}
.cartTop a { color: #fff;}
.cartTop .counterNum { position: absolute; top: 10px; right: -10px; padding: 0 5px;background-color:#ffffff; border-radius: 25px; color: #ff0000;}
.cartTop div { font-size: 14px;}
.page-title-row { font-size: 18px; }
.page-title-row h1,.page-title-row h2,.page-title-row h3,.page-title-row h4{ margin-bottom: 0;}
.color-1 { color: #d0011b; }
.section_layout { background-color: #fff; }
.section_layout.pdall { padding: 10px;}
.section_layout .pdlr { padding-left: 10px; padding-right: 10px;}
.section_layout .page-title { font-size: 18px;display: -webkit-flex;display: -ms-flexbox;display: flex;width: 100%;-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-ms-flex-align: center;-webkit-align-items: center;-moz-align-items: center;-ms-align-items: center;-o-align-items: center;align-items: center;-webkit-justify-content: space-between;-ms-justify-content: space-between;justify-content: space-between;border-bottom: 2px solid #e25f3f;}
.section_layout .page-title h2 {line-height: 44px;font-weight: 400; font-size: 18px; margin-bottom: 0;}
.section_layout .page-title a { color: #222; }
.section_layout .page-title a:hover { color: #e25f3f; }
.section_layout .section_layout_content { }
.border-left-list {border-left: 1px solid #ebebeb!important;}
h1.product-name { margin:0; padding: 0; margin-bottom: 10px; font-size: 20px;}
.product-row { border-radius:0; position: relative; border: 0; border-bottom: 1px solid #ebebeb; border-right: 1px solid #ebebeb; }
.product-image { overflow: hidden; }
.product-image img { -moz-transition: all 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s; }
.product-image:hover img { -moz-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1); }
.product-top-image { border-radius:0; }
.product-body { padding: 10px; }
.product-title {margin-bottom: 2px; white-space: nowrap;text-overflow: ellipsis;max-height: 22px; overflow: hidden;}
.product-title a {line-height: 1.5em;font-weight: 400;display: inline-block;zoom: 1;font-size: 14px;color: #222;}
.product-title a:hover { color: #e25f3f;}
.product-price { font-size: 12px;background-color: transparent; }
.product-price-detail { font-size: 20px; }
.product-price .price_sale { color: #f60; padding-right: 5px;}
.product-price .price_compare { color: rgba(0,0,0,.54);font-weight: 300; }
.grid-row { border-radius:0; position: relative; border: 0; border-bottom: 1px solid #ebebeb; border-right: 1px solid #ebebeb; }
.grid-image { overflow: hidden; }
.grid-image img { -moz-transition: all 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s; }
.grid-image:hover img { -moz-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1); }
.grid-top-image { border-radius:0; }
.product-shop-image { }
.media-comment { }
.media-comment img { max-width: 80px;}
.media-body-comment { font-size: 14px;}
.supplier-row { background-color: #fff; padding: 10px; border-radius:10px;}
.supplier-row .icon-f img{ max-width: 140px;}
.supplier-row .supplier-name { }
.supplier-img-list img{ width: 100%;}
.media-supplier { }
.media-supplier img { max-width: 150px;}
.cart-but { width: 50px;}
.shop-row { background-color: #fff; padding: 10px; border-radius:10px;}
.shop-row a { font-size: 18px; color: #0050ff;}
.shop-row .shop-des { font-size: 13px;}
.shop-row .supplier-name { }
.shop-img-list img{ width: 100%;}
.media-shop { width: 100%; }
.media-shop img { max-width: 200px;}
.sidebar_item { }
.sidebar_item h5 { margin-bottom: 5px;}
.category-item { list-style: none; margin: 0; padding: 0;}
.category-item li.category-list { padding: 3px 0; padding-left: 7px; font-size: 14px;}
.shop_tmp_top{ background-color: #e25f3f; padding: 5px; color: #fff; font-size: 13px;}
.shop_tmp_top a { color: #fff;}
.shop_tmp_top a:hover { color: #e0e0e0;}
.shop-tmp-top-nav-link { padding-top: 3px; padding-bottom: 3px;}
.shop-tmp-top-nav-link:first-child { padding-left: 0;}
.shop-tmp-nav { }
/*เพิ่มวันที่ 20/11/61*/
.mr-auto .nav-item.show .nav-link, .mr-auto .nav-link.active {color: #e25f3f;background-color: #f5f5f500;border-color: #e25f3f #e25f3f #e25f3f;}
.navbar-toggler {padding: .25rem .75rem;font-size: 1.25rem;line-height: 1;background-color: #f7f4f412;border: 1px solid #2b2929;border-radius: .25rem;}
#wrap-menu-top {width: 100%;margin-bottom: 10px;background: #fdfdfd;border-top: 3px solid #2c3e50;border-bottom: 1px solid #dddddd;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
.bg-light {background-color: #fdfdfd!important;}
.item_grid a { text-decoration: none;}
.item_grid:hover { border: 1px solid #cecece; box-shadow: 0px 0px 5px #cecece;}
.item_grid .item_favorite {position: absolute; background-color: #000; padding:4px; color: #fff; opacity: .75; top:2px; right:2px;}
.item_grid .item_img { margin: auto; text-align: center;}
.item_grid .item_img img{ width: 100%; max-height: 100%;}
.item_grid .item_content { margin-top: 0; position: relative; padding: 5px;}
.item_grid .item_avatar {position: absolute; top:-25px; left:3px;}
.item_grid .item_avatar img { width: 50px; border: 2px solid #fff;}
.item_grid .item_avatar img.online { border: 2px solid #21BA45; }
.item_grid .item_subject { font-size: 14px; overflow:hidden; display:block;display:-ms-flexbox;display:-moz-box;display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:40px; margin-bottom: 10px;}
.item_grid .item_subject a { color:#525252; }
.item_grid .item_subject a:hover { color: #f27024;}
.item_grid .item_price { }
.item_grid .item_user {padding-left: 55px; font-size: 12px; color:#4c4849; margin: 5px 0; overflow:hidden;}
.item_grid .item_user .user { font-weight: bold;}
.item_grid .item_action { border-top: 1px solid #e0e0e0; padding-top:5px; text-align: center;}
.storename-content {width: 100%;max-width: 1200px;height: 60px;margin: 0 auto;position: relative;}
.wrapstorename {width: 100%;height: 100%;opacity: 0.95;background: #fdfdfd;z-index: 9998;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);position: fixed;top: 0;display: none;}
.img {width: 100%;height: auto;}
.menuprofilecog{width: 100%;min-height: 40px;overflow: hidden;list-style: none;padding: 0;margin: 0;display: block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing:border-box;}
.menuprofilecog li{width: 100%;padding: 7px 10px;font-size: 16px;color: #363636;display:block;cursor: pointer;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.menuprofilecog li.current{font-weight: 600;background:#cfcfcf;border-radius: 0px;}
.menuprofilecog li.current:hover{font-weight: 600;background:#cfcfcf;border-radius: 0px;}
.menuprofilecog li:hover{background:#ebebeb;border-radius: 0px;}
.shop-card-4, .w3-hover-shadow:hover { box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0), 0 4px 20px 0 rgba(0, 0, 0, 0.12);}
ul.wrap-dash-detail-new{box-shadow: none; margin-bottom: 0;display: inline-block;vertical-align: top;padding: 0px;}
.wrap-dash-detail-new li{padding: 0px 0px;word-wrap:break-word;border: 0;}
ul.wrap-dash-detail{box-shadow: none;margin-bottom: 0;}
.wrap-dash-detail li{padding: 0px 0px;border: 0;}
.upload-btn-wrapper {position: relative;overflow: hidden;display: inline-block;}
.btn-img {border: 2px solid gray;color: gray;background-color: white;padding: 5px 16px;border-radius: 8px;font-weight: bold;}
.upload-btn-wrapper input[type=file] {font-size: 100px;position: absolute;left: 0;top: 0;opacity: 0;}
.wrapstep{
width: 100%;
min-height: 30px;
padding-top:15px;
margin-bottom: 10px;
}
.headordertimeline{
width: 100%;
text-align: center;
}
ul.step-li{
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
ul.step-li li{
width: 24%;
min-height: 40px;
background: #fff;
border: 1px solid #e25f3f;
font-size: 13px;
text-align: center;
display: inline-block;
vertical-align: top;
padding-top: 10px;
padding-bottom: 5px;
color: #e25f3f;
position: relative;
}
ul.step-li li.cart-li{
background: #e25f3f;
color: #fff;
}
ul.step-li li.cart-li a{
color: #fff;
}
.icon-step-circle{
width: 30px;
height: 30px;
background: #fff;
font-size: 14px;
color: #d14643;
padding-top: 5px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
position: absolute;
top: 4px;
right: -18px;
z-index: 20;
border: 1px solid #e25f3f;
}
a.disabled {
pointer-events: none;
cursor: default;
}
ul.demo {
list-style-type: none;
margin: 0;
padding: 0;
margin-left: 25px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.hidden {
display: none;
}
/*.resize{ width: 200px; height: 200px; overflow: hidden; }
.resize img { width: 100%; }*/
.resize {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.resize img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.resize img.portrait {
width: 100%;
height: auto;
}
.resize2 {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.resize2 img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.resize3 {
position: relative;
width: 100%;
height: 120px;
overflow: hidden;
}
.resize3 img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.font-family { font-family:'Kanit';}
.boxSep{
background-color:#fff;
border: 1px solid #ddd;
margin:10px;
float:left;
margin-right:30px;
}
.scrollable-menu {
height: auto;
max-height: 350px;
overflow-x: hidden;
}
.page-item.active .page-link {
z-index: 1;
color: #fff;
background-color: #e25f3f;
border-color: #e25f3f;
}
.page-link {
position: relative;
display: block;
padding: .5rem .75rem;
margin-left: -1px;
line-height: 1.25;
color: #e25f3f;
background-color: #fff;
border: 1px solid #ecc7be;
}
.shop-row2 {
background-color: #fff;
padding: 10px;
border-radius: 10px;
}
/* FASTMALL MODERN UI */
body{
background:#f5f7fa;
}
/* search button */
.btn-warning{
background:#FF5722 !important;
border:none !important;
color:#fff !important;
}
/* navbar */
.header_content_page_top2{
border-top:3px solid #0D47A1;
box-shadow:0 4px 10px rgba(0,0,0,.08);
}
/* card */
.card,
.product-item{
background:#fff;
border-radius:14px;
border:none;
box-shadow:0 2px 10px rgba(0,0,0,.05);
transition:.2s;
}
/* hover card */
.card:hover,
.product-item:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,.08);
}
/* top header */
.header_content_page_top{
background:#0D47A1 !important;
}
/* search button */
.btn-warning{
background:#FF5722 !important;
border:none !important;
color:#fff !important;
}
/* menu link */
.header_content_page_top a{
color:#fff;
}
/* hover link */
a:hover{
color:#FF5722;
}
.card:hover,
.product-item:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,.08);
}
/* slide */
.slide_full img{
border-radius:16px;
}
/* PRODUCT MODERN CARD */
.box-product,
.product-item{
background:#fff;
border-radius:16px;
overflow:hidden;
padding:12px;
transition:.25s;
position:relative;
}
/* hover */
.box-product:hover,
.product-item:hover{
transform:translateY(-5px);
box-shadow:0 15px 30px rgba(0,0,0,.10);
}
/* image */
.box-product img,
.product-item img{
width:100%;
transition:.25s;
}
.box-product:hover img,
.product-item:hover img{
transform:scale(1.05);
}
/* product name */
.product_name,
.name_product{
font-size:14px;
font-weight:500;
color:#222;
line-height:1.5;
min-height:42px;
}
/* product price */
.price,
.product_price{
color:#FF5722;
font-size:20px;
font-weight:bold;
}
/* old price */
.price_old{
color:#999;
text-decoration:line-through;
font-size:12px;
}
/* section */
.title_product,
.box-title{
font-size:18px;
font-weight:700;
color:#0D47A1;
}
/* smooth */
*{
transition:.2s;
}
/* PRODUCT DETAIL PAGE */
.container{
animation:fadeIn .3s ease;
}
/* detail card */
.card,
.product-detail,
.box-detail{
background:#fff;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
overflow:hidden;
}
/* image */
.product-detail img,
.box-detail img{
transition:.3s;
}
.product-detail img:hover,
.box-detail img:hover{
transform:scale(1.04);
}
/* title */
h1,h2,h3,h4{
color:#222;
font-weight:700;
}
/* price */
.price,
.text-price{
color:#FF5722;
font-size:28px;
font-weight:700;
}
/* button */
.btn-primary{
background:#FF5722 !important;
border:none !important;
border-radius:12px;
padding:12px 20px;
font-weight:600;
}
.btn-primary:hover{
background:#f4511e !important;
}
/* qty */
input[type=number],
select{
border-radius:10px !important;
}
/* section */
.table,
.detail-box{
background:#fff;
border-radius:14px;
}
/* animation */
@keyframes fadeIn{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* PRODUCT DETAIL MODERN */
.container{
max-width:1280px;
}
/* product area */
.product-detail,
.box-detail{
padding:25px;
}
/* product image */
.product-detail img,
.box-detail img{
border-radius:16px;
}
/* product title */
h1,h2,h3,h4{
letter-spacing:-0.5px;
}
/* buy button */
.btn-primary{
width:100%;
font-size:18px;
box-shadow:0 10px 25px rgba(255,87,34,.25);
}
/* quantity */
input,
select{
height:42px !important;
}
/* detail tab */
.nav-tabs .nav-link{
border-radius:10px 10px 0 0;
}
/* footer */
.container_footer{
background:#fff;
margin-top:30px;
border-top:1px solid #eee;
}
/* MODERN PRODUCT GRID */
/* product list area */
.product-list,
.box-product-list{
display:flex;
flex-wrap:wrap;
gap:18px;
}
/* product card */
.box-product,
.product-item,
.product-box{
background:#fff;
border-radius:18px;
overflow:hidden;
position:relative;
transition:.25s;
padding:14px;
box-shadow:0 4px 14px rgba(0,0,0,.05);
}
/* hover */
.box-product:hover,
.product-item:hover,
.product-box:hover{
transform:translateY(-6px);
box-shadow:0 18px 35px rgba(0,0,0,.10);
}
/* image area */
.box-product img,
.product-item img,
.product-box img{
border-radius:14px;
transition:.25s;
background:#fff;
}
/* image hover */
.box-product:hover img,
.product-item:hover img,
.product-box:hover img{
transform:scale(1.05);
}
/* product title */
.product_name,
.name_product{
font-size:15px;
font-weight:600;
color:#222;
line-height:1.5;
margin-top:10px;
min-height:44px;
}
/* price */
.price,
.product_price{
color:#FF5722;
font-size:22px;
font-weight:700;
}
/* old price */
.price_old{
color:#999;
text-decoration:line-through;
font-size:13px;
}
/* badge */
.badge-sale{
position:absolute;
top:12px;
left:12px;
background:#FF5722;
color:#fff;
border-radius:50px;
padding:5px 10px;
font-size:12px;
font-weight:600;
}
/* section title */
.title_product,
.box-title{
font-size:20px;
font-weight:700;
color:#0D47A1;
margin-bottom:15px;
}
/* MODERN HEADER SEARCH */
.header_search{
width:100%;
max-width:700px;
margin:auto;
position:relative;
}
.header_search input{
width:100%;
height:64px;
border:none;
border-radius:50px;
padding:0 220px 0 30px;
font-size:18px;
background:#fff;
box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.header_search button{
position:absolute;
right:8px;
top:8px;
height:48px;
padding:0 40px;
border:none;
border-radius:50px;
background:#FF5722;
color:#fff;
font-size:18px;
font-weight:600;
}
.header_search button:hover{
background:#f4511e;
}
/* PREMIUM HEADER */
.header_content_page_top{
background:#0D47A1 !important;
padding:14px 0;
}
.logo img{
height: 300px;
width: auto;
object-fit: contain;
}
/* search area */
.search-box,
.header_search{
position:relative;
width:100%;
max-width:720px;
margin:auto;
}
/* search input */
.search-box input,
.header_search input{
width:100%;
height:62px;
border:none;
border-radius:60px;
background:#fff;
padding:0 210px 0 28px;
font-size:18px;
box-shadow:0 8px 24px rgba(0,0,0,.08);
}
/* search button */
.search-box button,
.header_search button,
.btn-search{
position:absolute;
right:8px;
top:7px;
height:48px;
border:none;
border-radius:50px;
background:#FF5722;
color:#fff;
padding:0 36px;
font-size:17px;
font-weight:600;
box-shadow:0 8px 20px rgba(255,87,34,.25);
}
/* hover */
.search-box button:hover,
.header_search button:hover,
.btn-search:hover{
background:#f4511e;
}
/* top menu */
.header_content_page_top a{
color:#fff !important;
font-weight:500;
}
/* white menu area */
.header_content_page_top2{
background:#fff;
border-radius:0 0 18px 18px;
box-shadow:0 6px 20px rgba(0,0,0,.05);
}
/* BIG SEARCH BAR */
.header_search,
.search-box{
position:relative;
width:100%;
max-width:760px;
margin:auto;
}
/* search input */
.header_search input,
.search-box input,
input[type=text]{
height:60px !important;
border-radius:60px !important;
border:none !important;
padding-left:28px !important;
font-size:17px !important;
box-shadow:0 8px 24px rgba(0,0,0,.08);
}
/* search button */
.btn-search,
.search-box button{
height:48px !important;
border-radius:50px !important;
padding:0 35px !important;
border:none !important;
background:#FF5722 !important;
color:#fff !important;
font-size:16px;
font-weight:600;
box-shadow:0 8px 20px rgba(255,87,34,.25);
}
/* top area */
.header_content_page_top{
padding:18px 0 !important;
}
/* logo */
.navbar-brand img{
max-height:62px;
}
/* HEADER FINAL TUNING */
/* top header */
.header_content_page_top{
padding:22px 0 !important;
}
/* logo */
.navbar-brand img{
max-height:250px !important;
}
/* search input */
.header_search input,
.search-box input,
input[type=text]{
height:68px !important;
font-size:18px !important;
padding-left:32px !important;
}
/* search button */
.btn-search,
.search-box button{
height:54px !important;
padding:0 42px !important;
font-size:18px !important;
top:7px;
right:7px;
}
/* cart icon */
.fa-shopping-cart,
.fa-cart-plus{
font-size:28px;
color:#fff;
}
/* white menu area */
.header_content_page_top2{
border-radius:0 0 24px 24px;
}
/* menu */
.header_content_page_top2 a{
font-weight:600;
}
/* SEARCH BAR PERFECT */
/* search container */
.search-box,
.header_search{
display:flex;
align-items:center;
position:relative;
}
/* search input */
.search-box input,
.header_search input,
input[type=text]{
height:72px !important;
border-radius:60px !important;
background:#fff !important;
padding-left:35px !important;
padding-right:170px !important;
font-size:18px !important;
border:none !important;
box-shadow:0 10px 30px rgba(0,0,0,.10);
}
/* button */
.search-box button,
.header_search button,
.btn-search{
position:absolute;
right:9px;
top:9px;
height:54px !important;
border-radius:50px !important;
padding:0 42px !important;
background:#FF5722 !important;
color:#fff !important;
border:none !important;
font-size:18px !important;
font-weight:700;
}
/* hover */
.search-box button:hover,
.header_search button:hover,
.btn-search:hover{
background:#f4511e !important;
transform:scale(1.02);
}
/* logo */
.navbar-brand{
margin-right:30px;
}
/* PREMIUM MARKETPLACE UI */
/* top header */
.header_content_page_top{
padding:28px 0 !important;
}
/* white menu area */
.header_content_page_top2{
padding:12px 0;
border-radius:0 0 26px 26px;
box-shadow:0 8px 24px rgba(0,0,0,.06);
}
/* menu */
.header_content_page_top2 a{
font-size:16px;
font-weight:600;
padding:12px 16px;
}
/* banner */
.slide_full,
.slide_full img{
border-radius:24px;
overflow:hidden;
}
.slide_full{
margin-top:18px;
box-shadow:0 14px 40px rgba(0,0,0,.08);
}
/* product section */
.title_product,
.box-title{
font-size:24px;
font-weight:700;
color:#0D47A1;
margin-bottom:20px;
}
/* product card */
.product-item,
.box-product{
border-radius:20px;
overflow:hidden;
background:#fff;
box-shadow:0 6px 18px rgba(0,0,0,.05);
}
/* hover */
.product-item:hover,
.box-product:hover{
transform:translateY(-6px);
box-shadow:0 18px 36px rgba(0,0,0,.10);
}
/* body */
body{
background:#f4f6fb;
}
/* FINAL HEADER PREMIUM */
/* logo */
.navbar-brand img{
max-height:78px !important;
}
/* top blue area */
.header_content_page_top{
padding:32px 0 !important;
}
/* search area */
.search-box,
.header_search{
max-width:820px;
}
/* search input */
.search-box input,
.header_search input,
input[type=text]{
height:76px !important;
border-radius:60px !important;
font-size:19px !important;
padding-left:36px !important;
padding-right:190px !important;
}
/* search button */
.btn-search,
.search-box button{
height:58px !important;
padding:0 46px !important;
border-radius:50px !important;
font-size:18px !important;
font-weight:700;
top:9px;
right:9px;
}
/* menu */
.header_content_page_top2 a{
font-size:17px;
font-weight:600;
}
/* cart */
.fa-shopping-cart{
font-size:30px;
}
/* white menu */
.header_content_page_top2{
padding:14px 0;
}
/* FINAL PRO HEADER */
/* top blue area */
.header_content_page_top{
background:linear-gradient(90deg,#0D47A1,#1565C0) !important;
padding:40px 0 !important;
}
/* container spacing */
.container-top{
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
/* logo */
.navbar-brand{
margin-right:50px;
}
.navbar-brand img{
max-height:150px !important;
}
/* search */
.search-box,
.header_search{
max-width:1200px;
}
/* input */
.search-box input,
.header_search input,
input[type=text]{
height:88px !important;
border-radius:90px !important;
padding-left:42px !important;
padding-right:220px !important;
font-size:21px !important;
box-shadow:0 16px 40px rgba(0,0,0,.15);
}
/* button */
.btn-search,
.search-box button{
height:66px !important;
padding:0 56px !important;
border-radius:60px !important;
top:11px;
right:11px;
font-size:20px !important;
font-weight:700;
background:#FF5722 !important;
box-shadow:0 12px 28px rgba(255,87,34,.35);
}
/* menu white area */
.header_content_page_top2{
padding:18px 0;
border-radius:0 0 32px 32px;
}
/* menu */
.header_content_page_top2 a{
font-size:17px;
font-weight:700;
padding:14px 18px;
}
/* body */
body{
background:#f2f5fb;
}
.slide_full{
box-shadow:0 20px 45px rgba(0,0,0,.12);
}
.product-item,
.box-product{
background:#fff;
border-radius:22px;
overflow:hidden;
box-shadow:0 8px 24px rgba(0,0,0,.06);
transition:.25s;
}
.product-item:hover,
.box-product:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,.12);
}
body{
background:linear-gradient(to bottom,#f2f5fb,#eef3fa);
}
/* DROPDOWN PREMIUM */
.dropdown-menu,
.submenu,
.menu-hover{
background:#fff !important;
border:none !important;
border-radius:18px !important;
box-shadow:0 18px 40px rgba(0,0,0,.12) !important;
padding:14px !important;
overflow:hidden;
}
/* menu item */
.dropdown-menu a,
.submenu a{
border-radius:12px;
padding:12px 16px;
transition:.2s;
}
/* hover */
.dropdown-menu a:hover,
.submenu a:hover{
background:#f4f7fc;
color:#0D47A1 !important;
}
/* MODERN CART PAGE */
/* cart area */
.cart-page,
.cart-box,
.box-cart{
background:#fff;
border-radius:24px;
padding:40px;
box-shadow:0 14px 40px rgba(0,0,0,.08);
margin-top:30px;
margin-bottom:40px;
}
/* title */
.cart-page h1,
.cart-page h2,
h1{
font-size:38px;
font-weight:800;
color:#0D47A1;
margin-bottom:25px;
}
/* empty cart */
.cart-empty{
text-align:center;
padding:80px 20px;
}
/* cart icon */
.cart-empty i{
font-size:90px;
color:#1565C0;
margin-bottom:20px;
}
/* empty text */
.cart-empty p{
font-size:20px;
color:#666;
margin-bottom:25px;
}
/* shopping button */
.cart-empty .btn,
.btn-shop{
background:#FF5722 !important;
border:none !important;
border-radius:50px !important;
padding:16px 40px !important;
font-size:18px !important;
font-weight:700;
color:#fff !important;
box-shadow:0 12px 28px rgba(255,87,34,.30);
}
/* hover */
.cart-empty .btn:hover,
.btn-shop:hover{
transform:translateY(-2px);
}
/* SEARCH PREMIUM */
/* input */
.search-box input,
.header_search input{
font-size:22px !important;
font-weight:600;
color:#222;
}
/* placeholder */
.search-box input::placeholder,
.header_search input::placeholder{
font-size:20px;
color:#999;
font-weight:500;
letter-spacing:.3px;
}
/* button */
.btn-search,
.search-box button{
font-size:20px !important;
font-weight:700;
}
/* PREMIUM PRODUCT CARD */
/* card */
.product-item,
.box-product,
.product-box{
background:#fff;
border-radius:24px;
overflow:hidden;
position:relative;
transition:.3s;
padding:16px;
margin-bottom:22px;
box-shadow:0 10px 28px rgba(0,0,0,.06);
}
/* hover */
.product-item:hover,
.box-product:hover,
.product-box:hover{
transform:translateY(-8px);
box-shadow:0 22px 48px rgba(0,0,0,.14);
}
/* image */
.product-item img,
.box-product img,
.product-box img{
border-radius:18px;
transition:.3s;
background:#fff;
}
/* image hover */
.product-item:hover img,
.box-product:hover img,
.product-box:hover img{
transform:scale(1.05);
}
/* title */
.product_name,
.name_product{
font-size:16px;
font-weight:700;
color:#222;
line-height:1.5;
margin-top:14px;
min-height:48px;
}
/* price */
.price,
.product_price{
color:#FF5722;
font-size:26px;
font-weight:800;
margin-top:10px;
}
/* old price */
.price_old{
color:#999;
font-size:14px;
text-decoration:line-through;
}
/* badge */
.badge-sale{
position:absolute;
top:16px;
left:16px;
background:#FF5722;
color:#fff;
border-radius:50px;
padding:6px 12px;
font-size:13px;
font-weight:700;
z-index:5;
}
/* button */
.btn-cart,
.btn-buy{
width:100%;
border:none;
border-radius:50px;
background:#0D47A1;
color:#fff;
padding:14px;
font-size:16px;
font-weight:700;
margin-top:14px;
transition:.25s;
}
/* hover button */
.btn-cart:hover,
.btn-buy:hover{
background:#FF5722;
transform:translateY(-2px);
}
/* PRODUCT DETAIL PREMIUM */
/* main detail box */
.product-detail,
.box-detail,
.detail-product{
background:#fff;
border-radius:28px;
padding:35px;
box-shadow:0 18px 44px rgba(0,0,0,.08);
margin-bottom:30px;
}
/* product image */
.product-detail img,
.detail-product img{
border-radius:24px;
transition:.3s;
}
/* hover image */
.product-detail img:hover,
.detail-product img:hover{
transform:scale(1.03);
}
/* product title */
.product-detail h1,
.detail-product h1{
font-size:34px;
font-weight:800;
color:#222;
margin-bottom:18px;
}
/* price */
.price,
.product_price{
font-size:36px;
font-weight:800;
color:#FF5722;
margin:20px 0;
}
/* select/input */
select,
input{
border-radius:16px !important;
height:52px !important;
border:1px solid #e4e7ef !important;
box-shadow:none !important;
}
/* button buy */
.btn-buy,
.btn-cart{
width:100%;
border:none;
border-radius:60px;
background:#FF5722;
color:#fff;
height:62px;
font-size:20px;
font-weight:700;
box-shadow:0 12px 30px rgba(255,87,34,.30);
}
/* hover */
.btn-buy:hover,
.btn-cart:hover{
transform:translateY(-2px);
}
/* detail tabs */
.nav-tabs .nav-link{
border-radius:16px 16px 0 0;
font-weight:700;
}
/* detail content */
.tab-content,
.detail-content{
background:#fff;
border-radius:0 0 24px 24px;
padding:28px;
box-shadow:0 10px 28px rgba(0,0,0,.06);
}
/* PREMIUM PRODUCT LAYOUT */
/* product wrapper */
.product-detail,
.detail-product,
.box-detail{
background:#fff;
border-radius:32px;
padding:40px;
box-shadow:0 24px 54px rgba(0,0,0,.08);
margin-bottom:35px;
}
/* image */
.product-detail img,
.detail-product img{
border-radius:28px;
background:#fff;
padding:12px;
transition:.3s;
}
/* hover image */
.product-detail img:hover,
.detail-product img:hover{
transform:scale(1.04);
}
/* title */
.product-detail h1,
.detail-product h1{
font-size:38px;
line-height:1.4;
font-weight:800;
color:#222;
margin-bottom:20px;
}
/* price */
.price,
.product_price{
font-size:42px;
font-weight:800;
color:#FF5722;
margin:22px 0;
}
/* detail text */
.product-detail p,
.detail-product p{
font-size:16px;
color:#666;
line-height:1.8;
}
/* input */
input,
select{
height:56px !important;
border-radius:18px !important;
border:1px solid #e5e8ef !important;
padding:0 18px !important;
}
/* button */
.btn-buy,
.btn-cart{
height:66px;
border-radius:60px;
background:#FF5722;
color:#fff;
font-size:20px;
font-weight:700;
border:none;
box-shadow:0 14px 32px rgba(255,87,34,.30);
}
/* hover */
.btn-buy:hover,
.btn-cart:hover{
transform:translateY(-2px);
}
/* detail content */
.tab-content,
.detail-content{
background:#fff;
border-radius:28px;
padding:36px;
box-shadow:0 14px 36px rgba(0,0,0,.06);
line-height:2;
}
/* CONTENT PREMIUM */
/* detail content box */
.tab-content,
.detail-content{
background:#fff;
border-radius:28px;
padding:45px;
box-shadow:0 18px 44px rgba(0,0,0,.06);
line-height:2;
margin-top:20px;
}
/* headings */
.tab-content h1,
.tab-content h2,
.tab-content h3,
.detail-content h1,
.detail-content h2{
color:#111;
font-weight:800;
line-height:1.5;
margin-bottom:20px;
}
/* paragraph */
.tab-content p,
.detail-content p{
color:#555;
font-size:17px;
line-height:2;
}
/* list */
.tab-content li,
.detail-content li{
margin-bottom:12px;
color:#444;
line-height:1.9;
}
/* tabs */
.nav-tabs{
border:none;
margin-bottom:0;
}
.nav-tabs .nav-link{
border:none;
background:#fff;
border-radius:18px 18px 0 0;
padding:16px 24px;
font-weight:700;
color:#333;
margin-right:6px;
box-shadow:0 8px 18px rgba(0,0,0,.04);
}
/* active */
.nav-tabs .nav-link.active{
background:#FF5722;
color:#fff;
}
/* PRODUCT IMAGE PREMIUM */
/* image box */
.product-image,
.box-image,
.img-product{
background:#fff;
border-radius:30px;
padding:25px;
box-shadow:0 20px 50px rgba(0,0,0,.08);
position:relative;
overflow:hidden;
}
/* image */
.product-image img,
.box-image img,
.img-product img{
width:100%;
border-radius:22px;
transition:.35s;
background:#fff;
}
/* hover */
.product-image:hover img,
.box-image:hover img,
.img-product:hover img{
transform:scale(1.05);
}
/* glow effect */
.product-image:before,
.box-image:before{
content:'';
position:absolute;
top:-40%;
left:-40%;
width:180px;
height:180px;
background:rgba(255,87,34,.08);
border-radius:50%;
filter:blur(30px);
}
/* PREMIUM PRODUCT GRID */
/* product card */
.product-item,
.box-product,
.item-product{
background:#fff;
border-radius:24px;
overflow:hidden;
padding:16px;
transition:.35s;
position:relative;
margin-bottom:28px;
box-shadow:0 10px 28px rgba(0,0,0,.05);
}
/* hover */
.product-item:hover,
.box-product:hover,
.item-product:hover{
transform:translateY(-10px);
box-shadow:0 24px 60px rgba(0,0,0,.14);
}
/* image */
.product-item img,
.box-product img,
.item-product img{
border-radius:20px;
transition:.35s;
background:#fff;
}
/* image hover */
.product-item:hover img,
.box-product:hover img{
transform:scale(1.06);
}
/* title */
.product-item .title,
.product_name,
.name_product{
font-size:16px;
font-weight:700;
line-height:1.6;
color:#222;
margin-top:14px;
min-height:54px;
}
/* price */
.price,
.product_price{
color:#FF5722;
font-size:24px;
font-weight:800;
margin-top:10px;
}
/* old price */
.old-price{
color:#999;
text-decoration:line-through;
font-size:13px;
}
/* badge sale */
.badge-sale{
position:absolute;
top:14px;
left:14px;
background:#FF5722;
color:#fff;
border-radius:50px;
padding:6px 12px;
font-size:12px;
font-weight:700;
}
/* cart button */
.btn-cart{
width:100%;
height:48px;
border:none;
border-radius:50px;
background:#0D47A1;
color:#fff;
font-weight:700;
margin-top:14px;
transition:.25s;
}
/* hover button */
.btn-cart:hover{
background:#FF5722;
}
/* WEBSITE FULL WIDTH */
/* main container */
.container{
max-width:1450px !important;
width:95% !important;
}
/* banner */
.slide_full img{
border-radius:28px;
}
/* product spacing */
.row{
margin-left:-12px;
margin-right:-12px;
}
.row > div{
padding-left:12px;
padding-right:12px;
}
/* FORCE FULL WIDTH */
.container,
.container-fluid,
.main-container,
.content,
.wrapper,
.wrap{
width:95% !important;
max-width:1500px !important;
}
/* product section */
.product_all,
.product-list,
.box-product-all{
width:100% !important;
}
/* banner */
.slide_full{
width:100% !important;
}
/* remove narrow layout */
.row{
margin-left:-10px !important;
margin-right:-10px !important;
}
.row > div{
padding-left:10px !important;
padding-right:10px !important;
}
/* MEGA MENU PREMIUM */
/* dropdown box */
.dropdown-menu{
border:none !important;
border-radius:26px !important;
padding:20px !important;
background:#fff !important;
box-shadow:0 22px 60px rgba(0,0,0,.12) !important;
min-width:300px;
}
/* menu item */
.dropdown-menu a{
display:flex;
align-items:center;
gap:12px;
padding:14px 18px !important;
border-radius:16px;
font-size:16px;
font-weight:600;
color:#222 !important;
transition:.25s;
}
/* hover */
.dropdown-menu a:hover{
background:#f4f7ff;
color:#0D47A1 !important;
transform:translateX(4px);
}
/* icon */
.dropdown-menu i{
color:#FF5722;
font-size:18px;
}
/* category button */
.category-menu,
.btn-category{
background:#fff;
border-radius:50px;
padding:12px 22px;
box-shadow:0 8px 24px rgba(0,0,0,.06);
}
/* LUXURY HEADER */
/* top header */
.container-top{
background:linear-gradient(90deg,#0D47A1,#1565C0);
padding-top:22px;
padding-bottom:22px;
box-shadow:0 12px 32px rgba(0,0,0,.12);
}
/* logo */
.navbar-brand img,
.logo img{
max-height:72px !important;
}
/* search box */
.search-box input,
.header_search input{
height:64px !important;
border-radius:60px !important;
padding-left:28px !important;
font-size:18px !important;
border:none !important;
box-shadow:0 10px 30px rgba(0,0,0,.10);
}
/* search button */
.search-box button,
.btn-search{
height:64px !important;
border-radius:60px !important;
padding:0 30px !important;
background:#FF5722 !important;
color:#fff !important;
font-size:18px;
font-weight:700;
border:none !important;
}
/* menu bar */
.header_content_page_top2{
border-radius:0 0 28px 28px;
padding-top:14px;
padding-bottom:14px;
box-shadow:0 14px 40px rgba(0,0,0,.08);
}
/* BIG MARKETPLACE HEADER */
/* top header */
.container-top{
padding-top:28px !important;
padding-bottom:28px !important;
}
/* logo area */
.navbar-brand,
.logo{
margin-right:35px;
}
/* search area */
.search-box,
.header_search{
width:720px !important;
max-width:100%;
}
/* search input */
.search-box input,
.header_search input{
width:100% !important;
height:68px !important;
font-size:20px !important;
padding-left:30px !important;
}
/* search button */
.search-box button,
.btn-search{
min-width:120px;
height:68px !important;
font-size:20px;
}
/* menu */
.header_content_page_top2{
min-height:74px;
}
/* ULTRA HEADER */
/* top area */
.container-top{
background:linear-gradient(90deg,#0D47A1,#1565C0);
position:relative;
overflow:hidden;
}
/* glow effect */
.container-top:before{
content:'';
position:absolute;
width:500px;
height:500px;
background:rgba(255,255,255,.06);
border-radius:50%;
top:-220px;
right:-120px;
filter:blur(10px);
}
/* logo */
.logo img,
.navbar-brand img{
filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));
}
/* search input */
.search-box input,
.header_search input{
background:#fff;
box-shadow:
0 14px 36px rgba(0,0,0,.12),
inset 0 1px 2px rgba(255,255,255,.7);
}
/* search button */
.search-box button,
.btn-search{
box-shadow:0 12px 28px rgba(255,87,34,.35);
}
/* nav bar */
.header_content_page_top2{
backdrop-filter:blur(10px);
background:rgba(255,255,255,.96);
}
/* LOGO BIGGER */
.logo img,
.navbar-brand img{
max-height:72px !important;
width:auto;
transition:.3s;
}
/* hover */
.logo img:hover,
.navbar-brand img:hover{
transform:scale(1.03);
}
/* MENU */
.header_content_page_top2 a{
font-size:15px;
font-weight:600;
transition:.25s;
position:relative;
}
/* hover line */
.header_content_page_top2 a:after{
content:'';
position:absolute;
left:0;
bottom:-8px;
width:0;
height:3px;
background:#ff5722;
border-radius:10px;
transition:.25s;
}
.header_content_page_top2 a:hover:after{
width:100%;
}
.header_content_page_top2 a:hover{
color:#ff5722 !important;
}
/* PREMIUM HEADER */
.header_content_page_top{
background:
linear-gradient(135deg,#0d47a1,#1565c0);
box-shadow:
0 8px 30px rgba(0,0,0,.12);
position:sticky;
top:0;
z-index:999;
}
/* glow */
.header_content_page_top:before{
content:'';
position:absolute;
right:-120px;
top:-120px;
width:320px;
height:320px;
background:
radial-gradient(circle,
rgba(255,255,255,.18),
transparent 70%);
pointer-events:none;
}
/* SEARCH PREMIUM */
.search_input,
input[type=text]{
border:none !important;
border-radius:50px !important;
height:58px !important;
padding-left:28px !important;
font-size:18px !important;
background:#fff !important;
box-shadow:
0 8px 25px rgba(0,0,0,.10);
}
/* placeholder */
.search_input::placeholder,
input[type=text]::placeholder{
color:#999 !important;
font-size:17px !important;
font-weight:500;
}
/* SEARCH BUTTON */
.btn-search,
.search_btn,
button[type=submit]{
border:none !important;
border-radius:50px !important;
background:
linear-gradient(135deg,#ff6a00,#ff5722);
color:#fff !important;
font-weight:700;
padding:0 30px !important;
height:58px !important;
box-shadow:
0 10px 20px rgba(255,87,34,.30);
transition:.25s;
}
/* hover */
.btn-search:hover,
.search_btn:hover,
button[type=submit]:hover{
transform:translateY(-2px);
box-shadow:
0 14px 25px rgba(255,87,34,.40);
}
/* SEARCH BIG */
.search_input,
input[type=text]{
height:64px !important;
font-size:18px !important;
}
/* button */
.search_btn,
button[type=submit]{
height:64px !important;
min-width:90px;
font-size:18px;
}
/* WHITE MENU BAR */
.header_content_page_top2{
background:
rgba(255,255,255,.92);
backdrop-filter:blur(12px);
box-shadow:
0 8px 25px rgba(0,0,0,.06);
border:none !important;
}
/* BANNER */
.slide_full img{
border-radius:28px;
box-shadow:
0 15px 35px rgba(0,0,0,.14);
}
/* PRODUCT CARD */
.product-item,
.card{
border-radius:24px !important;
overflow:hidden;
background:#fff;
transition:.25s;
box-shadow:
0 5px 20px rgba(0,0,0,.05);
}
/* hover */
.product-item:hover,
.card:hover{
transform:translateY(-8px);
box-shadow:
0 18px 40px rgba(0,0,0,.14);
}
/* FIX DROPDOWN OVER SLIDE */
.category_menu,
.submenu,
.dropdown-menu{
position:absolute !important;
z-index:99999 !important;
}
/* slide lower */
.slide_full,
.slide_full img,
.slider,
.banner{
position:relative;
z-index:1 !important;
}
.header_content_page_top2{
position:relative;
z-index:9999;
}
.dropdown-menu{
border:none !important;
border-radius:20px;
padding:14px;
box-shadow:
0 18px 40px rgba(0,0,0,.15);
}
/* PRODUCT HOVER */
.product-item,
.card{
transition:
transform .25s,
box-shadow .25s;
}
/* hover */
.product-item:hover,
.card:hover{
transform:
translateY(-8px);
box-shadow:
0 20px 40px rgba(0,0,0,.12);
}
/* PRODUCT IMAGE */
.product-item img,
.card img{
transition:
transform .35s;
}
/* hover zoom */
.product-item:hover img,
.card:hover img{
transform:scale(1.06);
}
/* PRICE */
.price,
.product-price{
color:#ff5722 !important;
font-size:22px;
font-weight:800;
}
/* ADD TO CART */
.btn-cart,
.btn-add-cart{
border:none !important;
border-radius:14px;
background:
linear-gradient(135deg,#ff6a00,#ff5722);
color:#fff !important;
font-weight:700;
box-shadow:
0 10px 20px rgba(255,87,34,.28);
transition:.25s;
}
/* hover */
.btn-cart:hover,
.btn-add-cart:hover{
transform:translateY(-2px);
box-shadow:
0 15px 28px rgba(255,87,34,.35);
}
/* PRODUCT CARD SIZE */
.product-item,
.card{
min-height:380px;
padding:14px;
border-radius:22px;
background:#fff;
overflow:hidden;
}
/* PRODUCT IMAGE */
.product-item img,
.card img{
width:100%;
height:220px;
object-fit:contain;
padding:10px;
}
/* PRODUCT TITLE */
.product-item .title,
.card-title{
font-size:15px;
font-weight:600;
line-height:1.5;
height:44px;
overflow:hidden;
color:#222;
}
/* PRICE STYLE */
.price,
.product-price{
font-size:28px;
font-weight:800;
color:#ff5722 !important;
}
/* old price */
del,
.old-price{
color:#999;
font-size:14px;
}
/* PRODUCT CARD PREMIUM */
.product-item,
.card{
background:#fff !important;
border-radius:24px !important;
overflow:hidden;
border:1px solid #f1f1f1;
box-shadow:
0 8px 24px rgba(0,0,0,.06);
transition:.25s;
position:relative;
}
/* hover */
.product-item:hover,
.card:hover{
transform:translateY(-8px);
box-shadow:
0 20px 40px rgba(0,0,0,.12);
}
/* BACKGROUND */
body{
background:
linear-gradient(to bottom,
#f4f6fb,
#eef3fa);
}
/* GRID SPACING */
.product-item,
.card{
margin-bottom:22px;
}
/* PRODUCT IMAGE */
.product-item img,
.card img{
transition:.35s;
}
/* hover */
.product-item:hover img,
.card:hover img{
transform:
scale(1.06)
rotate(-1deg);
}
/* FULL WIDTH LAYOUT */
.container,
.container-fluid{
max-width:1400px !important;
width:95% !important;
}
/* PAGE SPACING */
.container{
padding-left:20px !important;
padding-right:20px !important;
}
/* BANNER */
.slide_full img{
width:100% !important;
border-radius:24px;
object-fit:cover;
}
/* PRODUCT GRID */
.product-item{
width:calc(16.66% - 14px);
margin:7px;
}
/* FULL MARKETPLACE WIDTH */
body .container{
width:95% !important;
max-width:1500px !important;
}
/* BRAND SECTION */
.brand-area{
width:100% !important;
}
/* BRAND CARD */
.brand-item{
border-radius:20px;
background:#fff;
transition:0.3s;
box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.brand-item:hover{
transform:translateY(-5px);
box-shadow:0 10px 24px rgba(0,0,0,.15);
}
body{
background:#eef2f7 !important;
}
/* SECTION TITLE */
.box-title{
background:#fff;
padding:14px 18px;
border-radius:14px 14px 0 0;
border-bottom:2px solid #ff5a1f;
font-size:20px;
font-weight:700;
color:#222;
box-shadow:0 2px 8px rgba(0,0,0,.05);
display:flex;
align-items:center;
gap:10px;
}
.box-title span{
color:#ff5a1f;
}
🔥 สินค้าแนะนำ
.box-title{
background:linear-gradient(90deg,#ff6a00,#ff3d00);
color:#fff;
padding:14px 18px;
border-radius:14px 14px 0 0;
font-size:20px;
font-weight:700;
}
🔥 สินค้าแนะนำ
🆕 สินค้าใหม่
💥 โปรโมชั่นพิเศษ
🏷️ สินค้าลดราคา
/* SECTION HEADER */
.box-title{
background:#fff;
padding:14px 20px;
font-size:20px;
font-weight:700;
color:#222;
border-left:6px solid #ff5a1f;
border-radius:12px 12px 0 0;
box-shadow:0 3px 10px rgba(0,0,0,.05);
margin-bottom:10px;
}
.box-title{
background:linear-gradient(90deg,#ff6a00,#ff3d00);
color:#fff;
padding:14px 20px;
font-size:20px;
font-weight:700;
border-radius:12px 12px 0 0;
box-shadow:0 4px 14px rgba(255,90,31,.25);
}
/* SECTION HEADER */
.section-title{
display:flex;
justify-content:space-between;
align-items:center;
background:#fff;
padding:14px 20px;
border-radius:14px 14px 0 0;
border-left:6px solid #ff5a1f;
font-size:22px;
font-weight:700;
box-shadow:0 4px 10px rgba(0,0,0,.05);
margin-bottom:14px;
}
/* PRODUCT CARD */
.product-item{
background:#fff;
border-radius:20px;
transition:0.3s;
box-shadow:0 3px 10px rgba(0,0,0,.05);
overflow:hidden;
}
.product-item:hover{
transform:translateY(-6px);
box-shadow:0 14px 28px rgba(0,0,0,.12);
}
/* BRAND LOGO */
.brand-item img{
filter:grayscale(100%);
transition:0.3s;
}
.brand-item:hover img{
filter:none;
transform:scale(1.05);
}
/* FOOTER */
footer{
background:#0f172a;
color:#fff;
padding:50px 0 20px;
margin-top:60px;
}
footer h4{
color:#fff;
font-size:20px;
margin-bottom:18px;
font-weight:700;
}
footer a{
color:#cbd5e1;
text-decoration:none;
display:block;
margin-bottom:10px;
transition:0.3s;
}
footer a:hover{
color:#ff5a1f;
padding-left:5px;
}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.1);
margin-top:30px;
padding-top:20px;
text-align:center;
color:#94a3b8;
font-size:14px;
}
/* BRAND BOX */
.brand-item{
background:#fff;
border-radius:20px;
padding:30px;
display:flex;
align-items:center;
justify-content:center;
height:220px;
box-shadow:0 4px 12px rgba(0,0,0,.06);
transition:0.3s;
}
.brand-item:hover{
transform:translateY(-6px);
box-shadow:0 14px 28px rgba(0,0,0,.12);
}
.brand-item img{
max-width:140px;
transition:0.3s;
}
.brand-item:hover img{
transform:scale(1.08);
}
/* PRICING CARD */
.package-item{
border-radius:24px;
overflow:hidden;
background:#fff;
transition:0.35s;
box-shadow:0 10px 24px rgba(0,0,0,.08);
position:relative;
}
.package-item:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,.16);
}
/* PACKAGE TOP */
.package-top{
padding:40px 20px;
background:linear-gradient(135deg,#0f4c81,#1f6fb2);
color:#fff;
text-align:center;
}
/* FREE PACKAGE */
.package-free .package-top{
background:linear-gradient(135deg,#ff512f,#ff7b00);
}
/* PRICE */
.package-price{
font-size:42px;
font-weight:800;
margin-top:15px;
}
ยอดนิยม
/* BEST PACKAGE */
.best-package{
position:absolute;
top:18px;
right:-35px;
background:#ff3d00;
color:#fff;
padding:8px 40px;
transform:rotate(45deg);
font-size:13px;
font-weight:700;
}
/* PACKAGE WIDTH */
.package-area{
width:95% !important;
max-width:1400px !important;
margin:auto;
}
/* PACKAGE CARD SIZE */
.package-item{
min-height:520px;
padding-bottom:30px;
}
/* PACKAGE TEXT */
.package-item h3{
font-size:32px;
font-weight:800;
}
.package-item p{
font-size:18px;
line-height:1.8;
}
/* PACKAGE PRICE */
.package-price{
font-size:56px;
font-weight:900;
margin:20px 0;
}
/* PACKAGE BUTTON */
.package-btn{
height:60px;
font-size:20px;
font-weight:700;
border-radius:16px;
}
/* FEATURED PACKAGE */
.package-featured{
transform:scale(1.08);
z-index:5;
position:relative;
box-shadow:0 20px 40px rgba(0,0,0,.18);
}
/* FASTMALL COLORS */
--main-blue:#0f5cc0;
--main-blue2:#1b6fe5;
--main-orange:#ff6a00;
--main-orange2:#ff8a00;
/* PACKAGE TOP */
.package-top{
background:linear-gradient(135deg,#0f5cc0,#1b6fe5);
color:#fff;
}
/* FREE PACKAGE */
.package-free .package-top{
background:linear-gradient(135deg,#ff6a00,#ff8a00);
}
/* BUTTON */
.package-btn{
background:linear-gradient(90deg,#ff6a00,#ff8a00);
color:#fff;
border:none;
}
/* PREMIUM */
.package-featured .package-top{
background:linear-gradient(135deg,#0047ab,#0f5cc0);
}
/* GLOW */
.package-item{
box-shadow:0 10px 24px rgba(15,92,192,.12);
}
/* ===============================
FASTMALL PACKAGE STYLE
================================= */
.package-box {
border-radius: 22px;
overflow: hidden;
background: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
transition: all .3s ease;
position: relative;
border: 2px solid #f3f3f3;
}
.package-box:hover{
transform: translateY(-8px);
box-shadow: 0 18px 40px rgba(0,0,0,0.15);
}
/* ===============================
HEADER TOP
================================= */
.package-head{
padding: 35px 20px 60px;
text-align: center;
color: #fff;
position: relative;
}
/* ฟรี */
.package-free .package-head{
background: linear-gradient(135deg,#ff7a00,#ff4d00);
}
/* ปกติ */
.package-basic .package-head,
.package-silver .package-head,
.package-gold .package-head{
background: linear-gradient(135deg,#0b57d0,#0047b3);
}
/* PREMIUM */
.package-premium{
border: 2px solid #0b57d0;
box-shadow: 0 0 30px rgba(11,87,208,0.35);
}
.package-premium .package-head{
background: linear-gradient(135deg,#001b66,#0038b8);
}
/* ===============================
ICON
================================= */
.package-icon{
width: 85px;
height: 85px;
background: #fff;
border-radius: 50%;
position: absolute;
top: -42px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
font-size: 38px;
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
/* ===============================
TITLE
================================= */
.package-title{
font-size: 34px;
font-weight: 700;
margin-bottom: 10px;
}
.package-price{
font-size: 46px;
font-weight: bold;
}
.package-price span{
font-size: 22px;
font-weight: 500;
}
/* ===============================
CONTENT
================================= */
.package-content{
padding: 35px 30px;
}
.package-content ul{
padding: 0;
margin: 0;
list-style: none;
}
.package-content ul li{
padding: 12px 0;
font-size: 20px;
color: #333;
border-bottom: 1px solid #eee;
}
/* ===============================
BUTTON
================================= */
.package-btn{
display: block;
text-align: center;
margin-top: 25px;
padding: 18px;
border-radius: 14px;
text-decoration: none;
font-size: 22px;
font-weight: 700;
transition: .3s;
}
/* ปุ่มส้ม */
.package-free .package-btn,
.package-premium .package-btn{
background: linear-gradient(135deg,#ff7a00,#ff4d00);
color: #fff;
}
/* ปุ่มน้ำเงิน */
.package-basic .package-btn,
.package-silver .package-btn,
.package-gold .package-btn{
background: linear-gradient(135deg,#0b57d0,#0047b3);
color: #fff;
}
.package-btn:hover{
opacity: .9;
transform: scale(1.03);
}
/* ===============================
BADGE
================================= */
.package-badge{
position: absolute;
top: 18px;
right: -40px;
background: #ffb400;
color: #111;
font-weight: bold;
padding: 10px 50px;
transform: rotate(35deg);
font-size: 16px;
}
/* ===============================
RESPONSIVE
================================= */
@media(max-width:768px){
.package-title{
font-size: 26px;
}
.package-price{
font-size: 34px;
}
.package-content ul li{
font-size: 17px;
}
.package-btn{
font-size: 18px;
}
}
/* =========================
PACKAGE FASTMALL MODERN
========================= */
.princing-item{
background:#fff;
border-radius:24px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.35s;
border:2px solid #edf2ff;
margin-bottom:30px;
position:relative;
}
.princing-item:hover{
transform:translateY(-10px);
box-shadow:0 18px 40px rgba(0,0,0,.18);
}
/* HEADER */
.princing-item .pricing-divider{
background:linear-gradient(135deg,#0b57d0,#0047b3);
padding:35px 20px 70px;
text-align:center;
color:#fff;
position:relative;
}
/* FREE */
.princing-item.red .pricing-divider{
background:linear-gradient(135deg,#ff7a00,#ff4d00);
}
/* PREMIUM */
.princing-item.premium{
border:2px solid #0b57d0;
box-shadow:0 0 35px rgba(11,87,208,.35);
}
.princing-item.premium .pricing-divider{
background:linear-gradient(135deg,#001b66,#0038b8);
}
/* WAVE */
.princing-item .pricing-divider svg{
position:absolute;
bottom:-1px;
left:0;
}
/* TITLE */
.princing-item h3{
font-size:34px !important;
font-weight:700 !important;
margin-bottom:10px !important;
color:#fff !important;
}
/* PRICE */
.princing-item h5{
font-size:44px !important;
font-weight:bold !important;
color:#fff !important;
}
/* LIST */
.princing-item ul{
padding:30px;
margin:0;
}
.princing-item ul li{
list-style:none;
padding:12px 0;
border-bottom:1px solid #eee;
font-size:18px;
color:#444;
}
/* BUTTON */
.princing-item .btn{
background:linear-gradient(135deg,#ff7a00,#ff4d00);
border:none;
color:#fff;
font-size:20px;
font-weight:700;
border-radius:14px;
padding:14px 20px;
transition:.3s;
}
.princing-item .btn:hover{
transform:scale(1.05);
box-shadow:0 8px 20px rgba(255,102,0,.35);
}
/* MOBILE */
@media(max-width:768px){
.princing-item h3{
font-size:24px !important;
}
.princing-item h5{
font-size:34px !important;
}
}
.princing-item{
border-radius:24px;
}
.princing-item.premium {
transform: scale(1.03);
z-index: 5;
}
.princing-item.premium .pricing-divider {
background: linear-gradient(135deg,#0d47a1,#1565c0);
box-shadow: 0 0 25px rgba(21,101,192,.45);
border: 2px solid #42a5f5;
}
.princing-item {
transition: all .25s ease;
}
.princing-item:hover {
transform: translateY(-8px);
}
.princing-item .btn {
border-radius: 14px;
font-weight: 700;
letter-spacing: .3px;
transition: .25s;
}
.princing-item .btn:hover {
transform: scale(1.04);
box-shadow: 0 8px 20px rgba(255,106,0,.35);
}
/* =========================
PACKAGE MODERN STYLE
========================= */
.pricingTable{
background:#fff;
border-radius:24px;
overflow:hidden;
position:relative;
transition:.3s;
box-shadow:0 10px 30px rgba(0,0,0,.08);
border:2px solid #edf2ff;
}
.pricingTable:hover{
transform:translateY(-10px);
box-shadow:0 18px 40px rgba(0,0,0,.18);
}
/* TOP */
.pricingTable .pricingTable-header{
background:linear-gradient(135deg,#0b57d0,#0046b8);
color:#fff;
text-align:center;
padding:40px 20px 70px;
position:relative;
}
/* FREE */
.pricingTable.free .pricingTable-header{
background:linear-gradient(135deg,#ff7a00,#ff4d00);
}
/* PREMIUM */
.pricingTable.premium{
border:2px solid #0b57d0;
box-shadow:0 0 35px rgba(11,87,208,.35);
}
.pricingTable.premium .pricingTable-header{
background:linear-gradient(135deg,#001b66,#0038b8);
}
/* WAVE */
.pricingTable .pricingTable-header:after{
content:"";
position:absolute;
left:0;
bottom:-1px;
width:100%;
height:60px;
background:url('data:image/svg+xml;utf8,');
background-size:cover;
}
/* TITLE */
.pricingTable .title{
font-size:34px;
font-weight:700;
margin-bottom:10px;
}
/* PRICE */
.pricingTable .price-value{
font-size:48px;
font-weight:bold;
color:#fff;
}
/* BODY */
.pricing-content{
padding:35px 30px;
}
.pricing-content li{
list-style:none;
padding:12px 0;
border-bottom:1px solid #eee;
color:#444;
font-size:18px;
}
/* BUTTON */
.pricingTable .pricingTable-signup a{
display:block;
background:linear-gradient(135deg,#ff7a00,#ff4d00);
color:#fff;
text-align:center;
padding:16px;
border-radius:14px;
text-decoration:none;
font-size:20px;
font-weight:700;
transition:.3s;
margin:25px;
}
.pricingTable .pricingTable-signup a:hover{
transform:scale(1.04);
box-shadow:0 8px 20px rgba(255,102,0,.35);
}
/* BADGE */
.best-value{
position:absolute;
top:20px;
right:-45px;
background:#ffb400;
color:#111;
font-size:14px;
font-weight:bold;
padding:10px 50px;
transform:rotate(40deg);
}
/* MOBILE */
@media(max-width:768px){
.pricingTable{
margin-bottom:25px;
}
.pricingTable .title{
font-size:26px;
}
.pricingTable .price-value{
font-size:38px;
}
}
.princing-item.premium {
transform: scale(1.03);
z-index: 5;
}
.princing-item.premium .pricing-divider {
background: linear-gradient(135deg,#0d47a1,#1565c0);
box-shadow: 0 0 25px rgba(21,101,192,.45);
border: 2px solid #42a5f5;
}
.princing-item.premium {
margin-top: -12px;
}
.badge-premium{
background:#ff6a00;
color:#fff;
font-size:12px;
padding:4px 10px;
border-radius:20px;
margin-left:8px;
vertical-align:middle;
}
.badge-premium{
background:#ff6a00;
color:#fff;
font-size:12px;
padding:4px 10px;
border-radius:20px;
margin-left:8px;
vertical-align:middle;
font-weight:700;
box-shadow:0 4px 10px rgba(255,106,0,.35);
}
.princing-item:has(.badge-premium){
transform:scale(1.04);
z-index:5;
}
/scriptsJT/css/style_page.css
.fast-search-box{
width:100%;
position:relative;
}
.fast-search-input{
width:100%;
height:64px;
border:none;
border-radius:50px;
padding:0 220px 0 30px;
font-size:18px;
background:#fff;
box-shadow:0 5px 20px rgba(0,0,0,.08);
outline:none;
}
.fast-search-input:focus{
box-shadow:0 5px 25px rgba(255,107,0,.25);
}
.fast-search-btn{
position:absolute;
right:7px;
top:7px;
height:50px;
padding:0 35px;
border:none;
border-radius:40px;
font-size:18px;
font-weight:600;
color:#fff;
background:linear-gradient(90deg,#ff6b00,#ff8f00);
transition:.2s;
}
.fast-search-btn:hover{
transform:scale(1.03);
box-shadow:0 5px 15px rgba(255,107,0,.35);
}
.fast-search-btn i{
margin-right:8px;
}
/scriptsJT/css/style_page.css
.shop-manage-card{
border-radius:16px;
overflow:hidden;
margin-bottom:25px;
transition:.2s;
}
.shop-manage-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 30px rgba(0,0,0,.08)!important;
}
.shop-manage-card .card-title{
font-size:22px;
font-weight:700;
color:#0d47a1;
margin-bottom:20px;
}
.shop-manage-card b{
color:#444;
}
.shop-manage-card .badge-success{
background:#ff6b00!important;
font-size:14px;
padding:8px 14px;
border-radius:30px;
}
.shop-manage-card .font_smm div{
margin-bottom:8px;
}
/scriptsJT/css/style_page.css
/* =========================
FASTMALL HEADER
========================= */
.topHeader{
padding:18px 0;
background:linear-gradient(90deg,#003b95,#0052cc);
}
/* logo */
.navbar-brand img{
max-height:70px;
}
/* search */
.fast-search-box{
max-width:850px;
margin:auto;
}
.fast-search-input{
height:68px;
font-size:18px;
border-radius:60px;
padding-left:30px;
}
.fast-search-btn{
height:54px;
top:7px;
right:7px;
font-size:18px;
border-radius:50px;
padding:0 40px;
}
/* menu */
.menuMain{
background:#fff;
border-radius:18px 18px 0 0;
box-shadow:0 3px 15px rgba(0,0,0,.06);
}
.menuMain a{
font-weight:600;
transition:.2s;
}
.menuMain a:hover{
color:#ff6b00!important;
}
/* cart */
.cartTop a{
color:#fff;
font-size:28px;
}
.counterNum{
background:#ff6b00!important;
}
.topHeader{
max-width: 1400px;
}
.fast-search-box{
width: 100%;
position: relative;
}
.fast-search-input{
width: 100%;
height: 50px;
border-radius: 0px;
border: none;
padding: 0 140px 0 30px;
font-size: 19px;
outline: none;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.fast-search-btn{
position: absolute;
right: 7px;
top: 2px;
height: 60px;
padding: 0 30px;
border: none;
background: linear-gradient(45deg,#ff6a00,#ff8c32);
color: #fff;
font-weight: bold;
transition: .2s;
}
.fast-search-btn:hover{
transform: scale(1.03);
background: linear-gradient(45deg,#ff7b00,#ff9d4d);
}
.searchq::placeholder{
color: #999;
}
.header_content_page_top{
padding: 18px 0;
background: linear-gradient(90deg,#0047b3,#0059d6);
}
.navbar-brand img{
max-height: 70px;
}
.fast-search-input{
height: 60px;
font-size: 16px;
}
.fast-search-btn{
height: 48px;
top: 6px;
right: 6px;
padding: 0 35px;
font-size: 15px;
}
.menu_top{
border-radius: 20px 20px 0 0;
margin-top: -10px;
box-shadow: 0 5px 15px rgba(0,0,0,.08);
}
border-radius: 0px;
.fast-search-box{
position: relative;
width: 100%;
max-width: 900px;
margin: auto;
}
.fast-search-input{
width: 100%;
height: 60px;
top: 6px;
box-sizing: border-box;
border: none;
padding: 0 140px 0 30px;
font-size: 16px;
outline: none;
box-sizing: border-box;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.fast-search-btn{
position:absolute;
right:6px;
top:10%;
transform:translateY(-10%) scale(1.03);
box-shadow:0 5px 15px rgba(255,106,0,.35);;
height:42px;
line-height:42px;
padding:0 26px;
border-radius:50px;
border:none;
background:linear-gradient(45deg,#ff6a00,#ff8c32);
color:#fff;
font-weight:bold;
transition:.2s;
}
.fast-search-input{
padding-right: 150px;
}
.register-btn{
color:#0056d6 !important;
border-color:#0056d6 !important;
font-weight:bold;
}
.register-btn:hover{
background:#0056d6 !important;
color:#fff !important;
}
/* กล่องโลโก้ */
.navbar-brand{
display:flex;
align-items:center;
justify-content:flex-start;
padding-left:10px;
margin-top:-10px;
margin-bottom:-10px;
}
/* รูปโลโก้ */
.navbar-brand img{
height:200px; /* ขยายใหญ่ */
width:auto;
filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
transition:.3s;
}
/* hover */
.navbar-brand img:hover{
transform:scale(1.05);
.navbar-brand img{
height:90px;
width:auto;
filter: drop-shadow(0 5px 15px rgba(0,0,0,.4));
}
.fast-search-input{
width:100%;
height:60px;
border:none;
border-radius:60px;
padding:0 170px 0 30px;
font-size:16px;
box-shadow:0 5px 20px rgba(0,0,0,.12);
}
.searchSubmit{
position:relative;
}
.fast-search-btn{
position:absolute;
right:6px;
top:5px;
height:50px;
padding:0 35px;
border:none;
border-radius:50px;
background:linear-gradient(45deg,#ff6a00,#ff8c32);
color:#fff;
font-weight:bold;
box-shadow:0 6px 15px rgba(255,106,0,.35);
}
.navbar-brand img{
height:250px;
width:auto;
filter: drop-shadow(0 5px 15px rgba(0,0,0,.4));
}
.fast-search-box{
position:relative;
}
.navbar-brand img{
height:90px;
width:auto;
filter:drop-shadow(0 5px 15px rgba(0,0,0,.4));
}
.fast-search-input{
width:100%;
height:60px;
border:none;
border-radius:60px;
padding:0 170px 0 30px;
font-size:16px;
box-shadow:0 5px 20px rgba(0,0,0,.12);
}
.fast-search-btn{
position:absolute;
right:5px;
top:5px;
height:50px;
padding:0 35px;
border:none;
border-radius:50px;
background:linear-gradient(45deg,#ff6a00,#ff8c32);
color:#fff;
font-weight:bold;
box-shadow:0 5px 15px rgba(255,106,0,.35);
}
.fast-search-box{
position:relative;
width:100%;
}
.fast-search-input{
width:100%;
height:60px;
border:none;
border-radius:60px;
padding:0 170px 0 30px;
font-size:16px;
outline:none;
box-shadow:0 5px 20px rgba(0,0,0,.12);
}
.fast-search-btn{
position:absolute;
right:5px;
top:5px;
height:50px;
padding:0 35px;
border:none;
border-radius:50px;
background:linear-gradient(45deg,#ff6a00,#ff8c32);
color:#fff;
font-weight:bold;
box-shadow:0 5px 15px rgba(255,106,0,.35);
}
.navbar-brand img{
height:90px;
width:auto;
filter:drop-shadow(0 5px 15px rgba(0,0,0,.35));
}
/* กล่องโลโก้ */
.logoBox{
display:flex;
align-items:center;
}
/* ลิงก์โลโก้ */
.navbar-brand{
display:block;
width:100%;
}
/* รูปโลโก้ */
.navbar-brand img{
max-height:350px;
width:auto;
max-width:none;
object-fit:contain;
filter:drop-shadow(0 8px 20px rgba(0,0,0,.45));
transition:.3s;
}
/* hover */
.logoBox{
display:flex;
align-items:center;
height:100px;
}
.navbar-brand{
padding:0;
margin:0;
}
.mainLogo{
transition: all 0.3s ease;
cursor: pointer;
}
body{
font-size:16px;
font-family: 'Prompt', sans-serif;
}
.navbar a{
font-size:17px;
font-weight:500;
}
.price{
font-size:22px;
font-weight:bold;
color:#ff4d00;
}
button{
font-size:16px;
font-weight:bold;
}
.container{
max-width:1400px !important;
width:95%;
}
.mainLogo{
max-height:70px;
}
.product-box{
border-radius:15px;
transition:0.3s;
}
.product-box:hover{
transform:translateY(-5px);
box-shadow:0 5px 20px rgba(0,0,0,0.1);
}
.navbar{
box-shadow:0 3px 15px rgba(0,0,0,0.08);
}
.container{
max-width:1400px !important;
width:95%;
}
.mainLogo{
max-height:70px;
}
.product-box{
border-radius:15px;
transition:0.3s;
}
.product-box:hover{
transform:translateY(-5px);
box-shadow:0 5px 20px rgba(0,0,0,0.1);
}
.navbar{ box-shadow:0 3px 15px rgba(0,0,0,0.08); }
.product-item{
border-radius:15px;
background:#fff;
transition:0.3s;
padding:10px;
}
.product-item:hover{
transform:translateY(-5px);
box-shadow:0 5px 20px rgba(0,0,0,0.1);
}
.product-item img{
width:100%;
height:220px;
object-fit:cover;
}
.price{
font-size:24px;
font-weight:bold;
color:#ff4d00;
}
.searchBox input{
height:52px;
border-radius:15px;
font-size:16px;
}
.dropdown-menu{
border-radius:18px;
border:none;
box-shadow:0 10px 30px rgba(0,0,0,0.12);
padding:15px;
}
.dropdown-menu a{
padding:12px 15px;
border-radius:10px;
transition:0.2s;
}
.dropdown-menu a:hover{
background:#f5f7fb;
color:#ff4d00;
padding-left:20px;
}
background:#ff4d00;
color:#fff;
font-weight:bold;
border-radius:10px;
padding:10px;
}
.product-box{
width:19%;
}
.product:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,.15);
transition:.3s;
}
.price{
font-size:24px;
font-weight:bold;
color:#ff4d00;
}
.nav-link{
display:flex;
align-items:center;
gap:6px;
white-space:nowrap;
}
.nav-link i{
color:#ff4d00;
font-size:20px;
}
.navbar-nav{
display:flex !important;
flex-direction:row !important;
align-items:center;
gap:25px;
}
.navbar-nav .nav-item{
display:flex;
align-items:center;
}
.navbar-nav .nav-link{
display:flex;
align-items:center;
gap:6px;
}
.navbar-nav .nav-link{
transition:all 0.3s ease;
padding:10px 14px;
border-radius:10px;
}
.navbar-nav .nav-link:hover{
background:#fff3ed;
color:#ff4d00 !important;
transform:translateY(-2px);
}
.navbar-nav .nav-link i{
font-size:18px;
margin-right:6px;
}
.navbar-nav .active .nav-link{
color:#ff4d00 !important;
font-weight:bold;
position:relative;
}
.navbar-nav .active .nav-link:after{
content:'';
position:absolute;
bottom:-8px;
left:0;
width:100%;
height:3px;
background:#ff4d00;
border-radius:10px;
}
.navbar-nav .nav-link:hover{
background:#fff3ed;
color:#ff4d00 !important;
transform:translateY(-2px);
}
.navbar-nav .nav-link:hover{
background:#ff4d00;
color:#fff !important;
box-shadow:0 4px 12px rgba(255,77,0,0.35);
border-radius:999px;
}
.header_content_page_top2{
box-shadow:0 4px 20px rgba(0,0,0,0.08);
position:sticky;
top:0;
z-index:999;
}
.search input{
border-radius:50px;
padding-left:20px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
border:none;
}
.slide_full{
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}
.itemProduct{
transition:0.3s;
border-radius:16px;
}
.itemProduct:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}
.btn-outline-danger{
background:#ff4d00;
color:#fff !important;
border:none !important;
border-radius:50px;
padding:10px 24px;
font-weight:600;
box-shadow:0 4px 15px rgba(255,77,0,0.3);
}
body{
background:#f4f6f9;
}
background:#f7f8fc;
.dropdown-menu{
background:#fff;
border:none;
border-radius:18px;
padding:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.12);
min-width:230px;
margin-top:12px;
}
.dropdown-menu a{
display:block;
padding:12px 16px;
border-radius:12px;
font-size:15px;
font-weight:500;
color:#333;
transition:0.25s;
}
.dropdown-menu a:hover{
background:#fff2eb;
color:#ff4d00;
padding-left:22px;
}
.dropdown-toggle{
background:#ff4d00;
color:#fff !important;
padding:10px 18px;
border-radius:50px;
font-weight:600;
box-shadow:0 4px 15px rgba(255,77,0,0.3);
}
.dropdown-menu li{
list-style:none;
}
.dropdown-menu li a{
display:flex;
align-items:center;
gap:10px;
padding:12px 16px;
border-radius:12px;
transition:0.25s;
font-weight:500;
}
.dropdown-menu li a:hover{
background:#fff2eb;
color:#ff4d00 !important;
transform:translateX(5px);
}
.dropdown-toggle i{
margin-right:8px;
font-size:16px;
}
.dropdown-toggle{
background:#ff4d00 !important;
color:#fff !important;
padding:12px 20px;
border-radius:50px;
font-weight:600;
box-shadow:0 4px 15px rgba(255,77,0,0.3);
}
.dropdown-toggle i{
margin-right:8px;
}
.btn-outline-danger{
transition:0.3s;
border-radius:50px;
padding:10px 22px;
font-weight:600;
}
.btn-outline-danger:hover{
background:#ff4d00 !important;
color:#fff !important;
border-color:#ff4d00 !important;
box-shadow:0 6px 18px rgba(255,77,0,0.35);
transform:translateY(-2px);
}
.dropdown-menu li a{
font-size:15px;
font-weight:500;
line-height:1.8;
}
.dropdown-menu{
padding:18px;
}
.dropdown-menu .active{
background:#fff2eb;
border-radius:10px;
padding:10px;
}
.dropdown-menu li{
margin-bottom:4px;
}
.dropdown-menu li a:hover{
background:#fff2eb;
color:#ff4d00 !important;
border-radius:10px;
padding-left:18px;
}
.dropdown-menu i{
color:#ff4d00;
font-size:13px;
margin-right:8px;
}
.topHeader a i{
margin-right:6px;
font-size:13px;
}
.topHeader a{
transition:0.25s;
}
.topHeader a:hover{
color:#ffae00 !important;
}
.navbar-menu{
box-shadow:0 4px 15px rgba(0,0,0,0.08);
}
.nav-link{
transition:0.25s;
}
.nav-link:hover{
transform:translateY(-2px);
}
.searchBox input{
border-radius:50px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}
.mainLogo{
filter:drop-shadow(0 4px 10px rgba(255,80,0,0.4));
}
.itemProduct{
transition:0.3s;
}
.itemProduct:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}
.mainLogo{
transition:0.3s;
border-radius:12px;
}
.nav-link{
transition:0.3s;
border-radius:12px;
padding:10px 16px !important;
}
.nav-link i{
transition:0.3s;
}
.nav-link:hover{
background:#ff5a00;
color:#fff !important;
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(255,90,0,0.35);
}
.nav-link:hover i{
color:#fff !important;
}
/* ===== TOP MENU HELP LOGIN REGISTER ===== */
.nav-link-def .nav-link{
background: #ff6a00;
color: #fff !important;
padding: 8px 14px;
border-radius: 30px;
margin-left: 8px;
font-weight: #ff7f1f;
box-shadow: 0 4px 12px rgba(255,106,0,0.35);
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ICON */
.nav-link-def .nav-link i{
color:#fff !important;
font-size:14px;
}
/* HOVER */
.nav-link-def .nav-link:hover{
transform: translateY(-3px);
background:#ff7f1f;
color:#fff !important;
box-shadow: 0 8px 18px rgba(255,106,0,0.45);
}
/* ===== LOGO HOVER EFFECT ===== */
.mainLogo{
transition: all 0.3s ease;
cursor:pointer;
}
/* ชี้เม้าท์ */
.mainLogo:hover{
transform: translateY(-4px) scale(1.03);
filter: drop-shadow(0 0 8px rgba(255,255,255,0.7))
drop-shadow(0 0 12px rgba(255,120,0,0.5));
}
.navbar-brand{
background:none !important;
box-shadow:none !important;
border:none !important;
}
.mainLogo{
transition: transform 0.3s ease;
}
.mainLogo:hover{
transform: translateY(-5px) scale(1.05);
}
.navbar-brand,
.navbar-brand:hover,
.logoBox,
.logoBox:hover{
background: none !important;
box-shadow: none !important;
border: none !important;
}
.mainLogo{
transition: transform 0.3s ease;
}
.mainLogo:hover{
transform: translateY(-5px) scale(1.05);
}
.logoBox,
.logoBox:hover,
.navbar-brand,
.navbar-brand:hover{
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
}
.mainLogo{
transition: transform 0.25s ease;
}
.mainLogo:hover{
transform: translateY(-4px);
}
.itemProduct{
transition: all 0.3s ease;
border-radius:16px;
}
.itemProduct:hover{
transform: translateY(-8px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}
.btn-cart{
transition:0.3s;
border-radius:12px;
}
.btn-cart:hover{
transform:scale(1.05);
box-shadow:0 0 15px rgba(255,102,0,0.5);
}
.itemProduct{
background:#fff;
border-radius:18px;
border:2px solid transparent;
transition:all 0.3s ease;
overflow:hidden;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}
.itemProduct:hover{
transform:translateY(-8px);
border:2px solid #ff6600;
box-shadow:0 12px 25px rgba(255,102,0,0.18);
}
.itemProduct img{
transition:0.3s;
}
.itemProduct:hover img{
transform:scale(1.05);
}
/* กล่องค้นหา */
.fast-search-box{
max-width: 760px;
margin: auto;
}
/* ช่องพิมพ์ */
.fast-search-input{
height: 60px;
font-size: 15px;
border-radius: 40px;
padding-left: 20px;
}
/* ปุ่มค้นหา */
.fast-search-btn{
background:#ff6600;
border:none;
border-radius:40px;
padding:0 28px;
color:#fff;
font-weight:600;
font-size:13px; /* คำค้นหาเล็กลง */
transition:0.3s;
}
/* ไอค่อนแว่น */
.fast-search-btn i{
font-size:24px;
margin-right:5px;
}
/* hover */
.fast-search-btn:hover{
background:#ff7a1a;
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(255,102,0,0.35);
}
.fast-search-btn{
display:flex;
align-items:center;
justify-content:center;
gap:5px;
}
.register-btn{
transition:0.3s;
border-radius:30px;
}
/* hover */
.register-btn:hover{
background:#ff6600 !important;
color:#fff !important;
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(255,102,0,0.35);
}
/* icon */
.register-btn:hover i{
color:#fff !important;
}
.register-btn{
color:#000 !important;
border-radius:30px;
transition:0.3s;
padding:8px 14px;
}
/* icon ปกติ */
.register-btn i{
color:#000 !important;
}
/* hover */
.register-btn:hover{
background:#ff6600 !important;
color:#fff !important;
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(255,102,0,0.35);
}
/* icon hover */
.register-btn:hover i{
color:#fff !important;
}
/* ===== LOGO EFFECT ===== */
.mainLogo{
transition: all 0.3s ease;
cursor:pointer;
}
/* hover */
.mainLogo:hover{
transform: translateY(-4px) scale(1.04);
filter:
drop-shadow(0 0 6px rgba(255,255,255,0.8))
drop-shadow(0 0 12px rgba(255,180,80,0.45));
}
.navbar-brand:hover
/* ===== LOGO EFFECT ===== */
.logoBox,
.logoBox:hover,
.navbar-brand,
.navbar-brand:hover{
background:transparent !important;
box-shadow:none !important;
border:none !important;
}
/* logo */
.mainLogo{
transition:all 0.3s ease;
cursor:pointer;
}
/* hover */
.mainLogo:hover{
transform:translateY(-4px) scale(1.04);
filter:
drop-shadow(0 0 6px rgba(255,255,255,0.8))
drop-shadow(0 0 12px rgba(255,180,80,0.45));
}
.navbar-brand:hover{
background:#ff6600;
}
/* ===== TOP BUTTON ===== */
.topHeader .nav-link{
color:#111 !important;
padding:9px 16px !important;
border-radius:40px;
transition:all 0.28s ease;
font-weight:600;
display:flex;
align-items:center;
gap:6px;
}
/* icon */
.topHeader .nav-link i{
transition:0.28s;
font-size:15px;
}
/* hover */
.topHeader .nav-link:hover{
background:linear-gradient(
135deg,
#ff7a1a,
#ff5500
);
color:#fff !important;
transform:
translateY(-3px)
scale(1.03);
box-shadow:
0 8px 20px rgba(255,102,0,0.28);
}
/* icon hover */
.topHeader .nav-link:hover i{
color:#fff !important;
transform:scale(1.1);
}
/* ===== STARTUP STYLE BUTTON ===== */
.topHeader .nav-link{
color:#111 !important;
padding:10px 18px !important;
border-radius:50px;
transition:all 0.3s ease;
font-weight:600;
display:flex;
align-items:center;
gap:7px;
background:rgba(255,255,255,0.12);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.18);
}
/* icon */
.topHeader .nav-link i{
transition:0.3s;
}
/* hover */
.topHeader .nav-link:hover{
background:linear-gradient(
135deg,
#ff7a1a,
#ff5500
);
color:#fff !important;
transform:
translateY(-3px)
scale(1.04);
box-shadow:
0 10px 25px rgba(255,102,0,0.35);
border-color:transparent;
}
/* icon hover */
.topHeader .nav-link:hover i{
color:#fff !important;
transform:scale(1.12);
}
.header_content_page_top{
backdrop-filter:blur(12px);
}
.fast-search-input:focus{
border-color:#ff7a1a !important;
box-shadow:
0 0 0 4px rgba(255,122,26,0.15);
}
.navbar-nav .nav-link{
transition:all 0.25s ease;
}
.navbar-nav .nav-link:hover{
transform:translateY(-2px);
}
/* ===== PRODUCT CARD ===== */
.itemProduct{
background:#fff;
border-radius:20px;
overflow:hidden;
transition:all 0.32s ease;
border:1px solid rgba(0,0,0,0.05);
box-shadow:
0 4px 12px rgba(0,0,0,0.04);
position:relative;
}
/* hover */
.itemProduct:hover{
transform:
translateY(-8px)
scale(1.01);
border-color:
rgba(255,120,0,0.35);
box-shadow:
0 14px 28px rgba(255,120,0,0.14);
}
/* รูป */
.itemProduct img{
transition:0.35s ease;
}
/* hover */
.itemProduct:hover img{
transform:scale(1.06);
}
.btn-cart{
transition:0.28s ease;
border-radius:14px;
}
/* hover */
.btn-cart:hover{
transform:
translateY(-2px)
scale(1.04);
box-shadow:
0 6px 16px rgba(255,120,0,0.28);
}
.price{
font-size:24px;
font-weight:700;
color:#ff6600;
}
.badge-sale{
position:absolute;
top:12px;
left:12px;
background:#ff4d00;
color:#fff;
padding:5px 10px;
border-radius:30px;
font-size:12px;
font-weight:700;
}
/* หมวดสินค้าให้อยู่บนสุด */
.dropdown-menu{
z-index:99999 !important;
position:absolute !important;
}
/* slider ต่ำกว่า */
.slide_full{
position:relative;
z-index:1;
}
.header_content_page_top2{
position:relative;
z-index:9999;
}
/* กลุ่มปุ่มด้านบน */
.topHeader{
display:flex;
justify-content:flex-end;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.nav-link-def
/* TOP MENU */
/* TOP RIGHT MENU */
.nav-link-def{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
width:auto !important;
margin-left:auto !important;
}
.nav-link-def li{
list-style:none;
}
/* TOP HEADER FLEX */
.header_content_page_top .content{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}
/* right menu */
.shopping{
margin-left:auto;
}
/* responsive top menu */
@media(max-width:991px){
.nav-link-def{
justify-content:center;
}
.shopping{
width:100%;
margin-top:10px;
}
}
.navbar-brand img{
max-height:95px;
}
.nav-link-def{
display:flex;
flex-wrap:wrap;
}
/* =========================
MISTER FAST SHOPPING MALL
========================= */
body{
background:#f5f7fb;
font-family:'Prompt',sans-serif;
}
/* HEADER */
.header_content_page_top{
background:
linear-gradient(
90deg,
#061b44 0%,
#0b3b75 100%
);
padding:15px 0;
box-shadow:
0 5px 25px rgba(0,0,0,0.08);
}
/* LOGO */
.mainLogo{
max-height:65px;
transition:0.3s;
}
/* SEARCH */
.fast-search-box{
display:flex;
align-items:center;
background:white;
border-radius:60px;
overflow:hidden;
height:58px;
box-shadow:
0 5px 20px rgba(0,0,0,0.08);
}
.fast-search-input{
flex:1;
border:none;
height:58px;
padding:0 25px;
font-size:16px;
background:transparent;
outline:none;
}
.fast-search-btn{
height:58px;
padding:0 35px;
border:none;
background:#ffd400;
color:#061b44;
font-size:16px;
font-weight:700;
}
/* CART */
.cartTop{
width:58px;
height:58px;
border-radius:50%;
background:#ffd400;
display:flex;
align-items:center;
justify-content:center;
position:relative;
margin-left:auto;
box-shadow:
0 5px 20px rgba(0,0,0,0.08);
}
.cartTop i{
font-size:26px;
color:#061b44;
}
.counterNum{
position:absolute;
top:-5px;
right:-5px;
background:#ff1f3d;
color:white;
width:24px;
height:24px;
border-radius:50%;
font-size:12px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
}
/* MENU */
.header_content_page_top2{
background:white;
box-shadow:
0 5px 20px rgba(0,0,0,0.05);
}
.navbar-menu{
background:transparent !important;
padding:10px 0;
}
.navbar-menu .nav-link{
font-size:15px;
font-weight:600;
color:#222 !important;
padding:12px 18px !important;
border-radius:12px;
transition:0.3s;
}
.navbar-menu .nav-link:hover{
background:#f4f7fc;
color:#0b3b75 !important;
}
/* CATEGORY BUTTON */
.dropdown-toggle{
background:#ffd400;
color:#061b44 !important;
border-radius:14px;
font-weight:700 !important;
}
/* REGISTER BUTTON */
.register-btn{
background:#061b44;
color:white !important;
padding:12px 24px;
border-radius:50px;
font-weight:700;
}
/* DROPDOWN */
.dropdown-menu{
border:none;
border-radius:20px;
padding:15px;
box-shadow:
0 10px 30px rgba(0,0,0,0.08);
}
.dropdown-item2{
padding:10px 15px;
border-radius:12px;
transition:0.3s;
}
.dropdown-item2:hover{
background:#f5f7fb;
}
/* MOBILE */
@media(max-width:768px){
.fast-search-box{
margin-top:15px;
}
.mainLogo{
max-height:55px;
}
.navbar-menu .nav-link{
padding:10px 12px !important;
font-size:14px;
}
}