@font-face {
  font-family: 'Markazitext';
  font-style: normal;
  font-weight: normal;
  src: url('https://cdn.hstatic.net/files/1000098437/file/markazitext-variablefont_wght_1_.ttf');
}

@font-face {
  font-family: 'Equnda Slab';
  font-style: normal;
  font-weight: normal;
  src: url('https://cdn.hstatic.net/files/1000098437/file/epundaslab-variablefont_wght.ttf');
}

@font-face {
  font-family: 'UTM Impact';
  font-style: normal;
  font-weight: normal;
  src: url('https://file.hstatic.net/1000098437/file/utm-impact.ttf');
}


/* ================= GLOBAL RESET ================= */
* {
  margin: 0;
  padding: 0;
}

:focus {
  outline: 0;
}

/* General */
body {
  font-family: "Markazitext"
    , serif;
  font-size: 16px;
  height: 100%;
  background-color: #fff;
  zoom: 0.95;
  /* 110% zoom */
  animation: fade-in-move-down 1.7s;
}

input,
select {
  font-size: 12px;
}

input {
  padding: 1px;
}

input[type="submit"] {
  cursor: pointer;
  font-size: 12px;
  padding: 3px 5px;
}

p {
  line-height: 1.3;
}

a {
  font-weight: normal;
  text-decoration: none;
  color: #363636;
}

h2,
.TitleHeading {
  font-size: 1.3em;
}

h3 {
  font-size: 1.1em;
  padding: 8px 0 0 12px;
}

h4 {
  font-size: 1.1em;
  margin-bottom: 4px;
}

img,
img a {
  border: 0;
}

ul,
ol {
  margin: 0 0 10px 30px;
}

li {
  margin: 0;
  padding: 0;
}

blockquote {
  margin-left: 28px;
}

select option {
  padding: 0 10px;
}

hr {
  margin: 0;
  padding: 0;
  border: 0;
}

.slider {
  margin-bottom: 15px !important;
}

/* Common Style & Animations */
@keyframes colorchange {
  0% {
    color: #004688;
  }

  50% {
    color: #ff0000;
  }

  100% {
    color: #004688;
  }
}

@keyframes fade-in-move-down {
  0% {
    opacity: 0;
    transform: translateY(-5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.color-change-text {
  animation: colorChange 2s ease-in-out infinite;
}

.Clear,
.clear {
  clear: both;
}

.FloatRight {
  float: right;
  padding-top: 3px;
}

#CartHeader .FloatRight {
  float: right;
  margin-top: -3px;
  padding-top: 0;
}

.FloatLeft {
  float: left;
}

.ClearRight {
  clear: right;
}

.ClearLeft {
  clear: left;
}

.Warning {
  color: #FF0000;
}

.FloatRight input[type="submit"] {
  color: #000;
}

/** AJAX loading box **/
#AjaxLoading {
  display: none;
  text-align: center;
  background: #FCF5AA;
  width: 180px;
  z-index: 10000000000;
  padding: 5px 10px;
}

#AjaxLoading img {
  vertical-align: bottom;
  margin-right: 5px;
}

/* Custom main */
#Container {
  background-color: #fff;
  margin: 0 auto;
  padding: 0 5px;
}

.top {
  float: left;
  font-size: 12px;
  margin: 0;
}

.left {
  float: left;
  font-size: 12px;
  width: 197px;
  font-weight: bold;
}

.center {
  font-size: 12px;
  margin: 0 !important;
  padding: 0 !important;
}

.right {
  float: right;
  font-size: 12px;
  padding-bottom: 10px;
  width: 197px;
}

.bottom {
  float: left;
  width: 981px;
}

/* Header */
#FlashBanner {
  overflow: hidden;
}

#Header #Logo {
  float: left;
  padding-left: 0;
}

#LogoContainer {
  padding-top: 20px;
  white-space: nowrap;
}

.defaultContent.EmailSubscription-content {
  padding: 6px;
}

.phone-header {
  background-image: url("phone.png");
  background-position: right center;
  background-repeat: no-repeat;
  float: right;
  height: 44px;
  margin-top: 55px;
}

.seach-header {
  float: left;
  width: 436px;
  margin-top: 30px;
}

.phone-header span {
  text-align: center;
  display: block;
  font-size: 24px;
  color: #1ba6de;
  font-weight: bold;
  text-transform: uppercase !important;
  /* FIXED TYPO */
  float: left;
}

.phone-header a {
  display: inline-block;
  font-size: 24px;
  color: #004688;
  font-weight: bold;
  padding-left: 40px;
  transition: 0.2s ease-in-out;
  animation: colorchange 5s ease-out infinite;
}

.phone-header a:hover {
  text-decoration: none;
  background-image: linear-gradient(to right, #f9d423 0%, #ff4e50 100%);
  background-clip: text;
  color: transparent;
  animation: none;
  transform: scale(1.1);
}

#Header #Logo h1 {
  overflow: hidden;
}

#Header {
  height: 95px;
}

#Header #Logo h1 a {
  color: #1549a4;
  font-family: Verdana;
  font-size: 40px;
  font-style: italic;
  font-weight: bold;
  text-decoration: none;
}

#Header #Logo h1 a span {
  display: block;
  font-family: AvantGarde;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  margin-top: -5px;
}

/* Search form */
.pro-header {
  color: #696969;
  display: block;
  float: left;
  font-size: 14px;
  padding-left: 120px;
  margin-top: 5px;
  width: 450px;
  opacity: 0.8;
}

#SearchForm {
  float: left;
  padding-top: 27px;
}

#SearchForm .search-input {
  background-color: #BFDDED;
  background-image: url("textbox.jpg");
  background-position: left center;
  background-repeat: no-repeat;
  border: medium none;
  float: left;
  height: 33px;
  margin: 0 0 0 110px;
  padding: 0 15px;
  width: 280px;
}

#SearchForm .search-button {
  background: url("search.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: 0 none;
  cursor: pointer;
  float: left;
  height: 33px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  width: 34px;
}

#SearchForm .search-adv {
  float: left;
  height: 19px;
  margin-left: 5px;
  margin-top: 1px;
  width: 16px;
  display: none;
}

#SearchForm a {
  color: #FFFFFF;
  font-size: 12px;
}

#SearchForm .search-adv span {
  display: none;
}

/*-------------------------------------------------------------------------------------------------------*/
/* defaultTitle */
.defaultTitle,
#ProductByCategory h3 {
  background-image: url("bg-menu-center.jpg");
  background-position: center top;
  background-repeat: repeat;
  background-size: contain;
  display: block;
  padding: 6px;
  border: solid 1px #eaeaea;
  border-bottom: none;
  font-size: 18px;
  text-transform: uppercase;
}

#ProductByCategory h3 {
  font-size: 18px;
  padding-left: 15px;
  border-bottom: 2px solid #1549a4;
  margin-top: 20px;
}

.top .defaultTitle,
.bottom .defaultTitle {
  background-image: url("bg-header-top.jpg");
  background-position: center bottom;
  background-repeat: repeat-x;
  border-top: solid 3px #1549a4;
  border-radius: 0 0 4px 4px;
  background-color: #fefefe;
  height: 35px;
  line-height: 35px;
  padding: 0;
}

.top .defaultTitle span,
.top .defaultTitle h1,
.bottom .defaultTitle span,
.bottom .defaultTitle h1 {
  background-image: url("bg-right.jpg");
  background-repeat: no-repeat;
  background-position: right;
  background-color: #1549a4;
  display: inline-block;
  padding-right: 130px;
  color: #ffffff;
  font-size: 13px;
  text-transform: none;
  border-radius: 0 0 0 4px;
}

.top .defaultContent,
.bottom .defaultContent {
  border: none;
}

.left .defaultContent,
.right .defaultContent {
  border: none;
}

.left .defaultTitle span,
.left .defaultTitle h1,
.right .defaultTitle span,
.right .defaultTitle h1 {
  font-size: 20px;

  color: #ffffff;
  text-transform: uppercase;
}

.left .defaultTitle,
.right .defaultTitle {
  background-image: none;
  background-position: center top;
  background-repeat: repeat-x;

  background-color: #1da3cf;
  border: none;
  padding: 11px 0;
}

.DefaultModule.contact .defaultTitle {
  display: none;
}

.contact-title h2 {
  margin-top: 7px;
}

.center .defaultTitle {
  font-size: 24px;
  text-transform: uppercase;
  color: #1da3cf;
  border-bottom: solid 1px #1da3cf;
  font-weight: bold;
}

.center .defaultTitle span {
  padding-left: 5px;
}

.defaultContent {
  padding: 0 6px;
}

.left .defaultContent,
.right .defaultContent {
  border: solid 1px #e1e1e1;
  border-top: none;
}

.defaultFooter {
  height: 6px;
}

.defaultFooter div {
  height: 6px;
}

.defaultContent {
  color: #3B3B3B;
}

.DefaultModule {
  margin-bottom: 7px;
  border-radius: 6px;
  overflow: hidden;
}

/* mini-cart */
.mini-cart .product {
  clear: both;
  list-style: none outside none;
  padding: 7px 4px 7px 8px;
}

.mini-cart .non-product {
  font-style: italic;
  padding-bottom: 10px;
  padding-top: 5px;
}

.mini-cart .cartQty {
  padding: 5px 10px;
}

.mini-cart .action a:link,
.mini-cart .action a:visited {
  color: #363636;
  font-weight: bold;
  text-decoration: none;
}

.mini-cart .product .product-image {
  float: left;
  height: 52px;
  width: 52px;
}

.mini-cart .product .product-detail div {
  margin-bottom: 5px;
}

.mini-cart .product .product-detail a {
  color: #403D3B;
  font-weight: bold;
  text-decoration: none;
}

.mini-cart .product .product-detail .widget-btn {
  float: right;
  font-size: 12px;
  margin: 0 3px 1px 5px;
}

.mini-cart .cartQty a:link,
.mini-cart .cartQty a:visited {
  color: #363636;
  font-weight: bold;
  text-decoration: none;
}

.mini-cart .product .product-detail {
  height: auto;
  margin: 0 0 0 60px;
  min-height: 50px;
}

/* SideTopSeller */
.defaultTitle.newsLastest-Title span,
.defaultTitle.SideTopSeller-Title span {
  background: none repeat scroll 0 0 transparent;
}

.defaultFooter.newsLastest-footer div,
.defaultFooter.SideTopSeller-footer div {
  background: none repeat scroll 0 0 transparent;
}

.TopSellers .BlockContent .ProductList .ProductImage {
  height: 145px;
  position: relative;
  z-index: 1;
}

.TopSellers .BlockContent #productlist-left .ProductImage {
  height: auto;
}

.ProductList .ProductImage {
  background-color: #FFFFFF;
  height: 170px;
  line-height: 170px;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
}

.TopSellers .BlockContent .ProductList li {
  border-top: 1px dotted #275d9a;
  margin-bottom: 0;
  min-height: 0;
  width: 161px;
  background: none;
}

.TopSellers .BlockContent .ProductList .TopSellerNumber1 {
  background: url("1st.png") no-repeat scroll 0 0 transparent;
  color: #fff;
  display: block;
  float: left;
  font-size: 26px;
  font-weight: bold;
  height: 44px;
  left: 0;
  line-height: 44px;
  position: absolute;
  text-align: center;
  top: -2px;
  width: 42px;
  z-index: 2;
}

.ProductList em {
  color: #1278B6;
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
}

.TopSellers .BlockContent .ProductList .TopSellerNumber {
  background: url("nst.gif") no-repeat scroll 0 0 transparent;
  color: #FFFFFF;
  float: left;
  font-size: 12px;
  font-weight: bold;
  height: 15px;
  line-height: 15px;
  text-align: center;
  width: 15px;
}

.TopSellers .BlockContent .ProductList li.first {
  border: none;
}

.BlockContent .first .ProductPrice,
.BlockContent .first .ProductDetails {
  margin: 0;
  text-align: center;
}

.left .ProductDetails,
.right .ProductDetails,
.left .ProductPrice,
.right .ProductPrice {
  margin-left: 20px;
  font-weight: bold;
  font-style: normal;
}

/* menu-news */
#menu-news ul,
#menu-news ul li {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}

#menu-news ul li a:link,
#menu-news ul li a:visited {
  color: #3d3d3d;
  display: block;
  font-size: 12px;
  font-weight: bold;
  padding: 7px 0 7px 9px;
}

#menu-news ul ul li.level1 a:link,
#menu-news ul ul li.level1 a:visited {
  background: url("list_style1.gif") no-repeat scroll 10px 11px rgba(0, 0, 0, 0);
  color: #3d3d3d;
  display: block;
  font-size: 12px;
  font-weight: normal;
  padding: 5px 0 6px 22px;
}

#menu-news ul ul ul li.level2 a:link,
#menu-news ul ul ul li.level2 a:visited {
  background: url("list_style1.gif") no-repeat scroll 32px 10px transparent;
  color: #3d3d3d;
  display: block;
  font-size: 12px;
  font-weight: normal;
  padding: 5px 0 6px 45px;
}

#menu-news ul li.current a:link,
#menu-news ul li.current a:visited,
#menu-news ul ul li.current a:link,
#menu-news ul ul li.current a:visited,
#menu-news ul ul ul li.current a:link,
#menu-news ul ul ul li.current a:visited {
  color: #345bab;
}

/* newsLastest */
.newsLastest .newsLastest_Item {
  border-radius: 5px;
  width: 102%;
  clear: both;
  margin-bottom: 8px;
  /* FIXED ARG-BOTTOM */
  box-shadow: rgba(33, 35, 38, 0.1) 0 10px 10px -10px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

.newsLastest .newsLastest_Item:hover {
  box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
}

.left div.newsLastest div.newsLastest_Item div.newsLastest_Title,
.right div.newsLastest div.newsLastest_Item div.newsLastest_Title {
  float: left;
  text-align: left;
  width: 70%;
  margin-left: 8px;
  height: 110px;
  display: flex;
  justify-content: center;
}

div.newsLastest div.newsLastest_Item div.newsLastest_Image {
  float: left;
  width: 75px;
}

div.newsLastest div.newsLastest_Item div.newsLastest_Image img {
  width: 100%;
  border-radius: 3px;
}

.left div.newsLastest .newsLastest_Summary,
.right div.newsLastest .newsLastest_Summary {
  display: none;
}

.center div.newsLastest div.newsLastest_Item div.newsLastest_Title a:link,
.center .div.newsLastest div.newsLastest_Item div.newsLastest_Title a:visited {
  font-weight: bold;
}

.newsLastest_Item .newsLastest_Image p {
  margin-bottom: 0;
  padding-top: 5px;
}

.newsLastest_Title a {
  display: inline-flex;
  align-items: center;
}

.newsLastest_Item:hover a {
  text-decoration: none;
}

.newsLastest_Item .newsLastest_Title a span {
  line-height: 1.6;
  font-size: 17px;
  font-weight: 700;
  color: #333;
}

.newsLastest_Item:hover .newsLastest_Title a span {
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  color: #1278B6;
}

/* support-online */
.support-item .name {
  color: #3B3B3B;
}

/* survey */
.survey .survey-question {
  color: #403D3B;
  font-weight: bold;
  line-height: 1.5;
  text-align: justify;
}

.survey .survey-option table td {
  padding: 4px 2px;
}

.survey-result .survey-result-question {
  color: #4D4D4D;
  font-weight: bold;
  text-align: left;
}

.survey-result .survey-result-option table {
  border: medium none;
  border-collapse: collapse;
  width: 100%;
}

.survey-result .survey-result-option table td {
  padding: 2px;
}

.survey-result div {
  margin-bottom: 3px;
}

/* HomeFeaturedProducts */
.box-product-first:nth-child(4n + 4) {
  background-image: none;
}

.box-product-first {
  float: left;
  font-size: 12px;
  list-style: none outside none;
  min-height: 17em;
  overflow: hidden;
  padding: 9px;
  position: relative;
  width: 174px;
  text-align: center;
  height: 100% !important;
  background-image: url("boder-sp.jpg");
  background-repeat: no-repeat;
  background-position: right;
  height: 300px;
  margin-bottom: 15px;
  transition: 0.3s ease-in !important;
  border-radius: 10px;
}

.box-product-first:hover {
  box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
}

.box-product-first:last-of-type {
  background: none;
}

ul.ProductList {
  list-style: none outside none;
  margin: 0;
  padding: 0 0 10px;
}

.ProductList .ProductImage {
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  height: 170px;
  line-height: 170px;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 5px;
}

.center .ProductList .ProductDetails {
  max-height: 30px;
  min-height: 30px;
  overflow: hidden;
}

.center .ProductList .ProductDetails,
.center .ProductList .ProductPrice,
.center .ProductList .ProductRating,
.center .ProductList .ProductActionAdd,
.center .ProductList .ProductActionCall,
.center .ProductList .ProductCompareButton {
  text-align: center;
}

.box-product-first .ProductActionAdd a,
.ProductPrice a {
  background-repeat: repeat-x;
  background-position: top;

  background-color: #ff9429;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 13px;
  padding: 6px 15px;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
}

.ProductActionAdd a:hover {
  background: #1fcf0f;
  text-decoration: none;
}

.box-product-first .ProductImage {
  display: flex;
  align-items: center;
}

.box-product-first .ProductDetails a {
  color: #444;
  font-size: 16px;
  font-weight: bold;
}

.center .ProductList em {
  color: #3265c0;
  font-size: 13px;
  font-style: normal;
  font-weight: bold;
  padding-bottom: 2px;
}

.box-product-first .ProductPrice {
  padding-top: 5px;
}

.box-product-first .ProductActionAdd {
  margin-bottom: 5px;
  margin-top: 10px;
  text-align: center;
}

.box-product-first .disable {
  display: none;
}

.box-product-first strike {
  color: #353535;
  font-size: 13px;
}

.ViewMore a {
  color: #1278B6;
  float: right;
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
  padding-right: 10px;
}

.saleFlag,
.newFlag,
.outletFlag,
.kidsFlag,
.salePercentFlag {
  height: 48px;
  left: auto;
  line-height: 48px;
  position: absolute;
  text-align: center;
  top: 1px;
  width: 48px;
}

.iconSprite {
  background: url("saleflag.png") no-repeat scroll 0 0 transparent;
  display: block;
}

.salePercentFlag,
.newFlag,
.outletFlag,
.saleFlag {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

.center .defaultContent.BlockContent,
.center .ProductListContainer .defaultContent {
  padding: 0;
}

.ProductList .ProductRating {
  padding-bottom: 5px;
  padding-top: 5px;
}

.ProductRating.Rating0 .RatingImage,
.ProductRating.Rating-1 .RatingImage {
  width: 69px;
  height: 12px;
  background: url("IcoRating0.png") 0 0 no-repeat;
}

#ProductList ul {
  border-bottom: solid 1px #d4d4d4;
}

#ProductList ul:last-of-type {
  border: none;
}

.ProductRating.Rating1 .RatingImage {
  width: 69px;
  height: 12px;
  background: url("IcoRating1.png") 0 0 no-repeat;
}

.ProductRating.Rating2 .RatingImage {
  width: 69px;
  height: 12px;
  background: url("IcoRating2.png") 0 0 no-repeat;
}

.ProductRating.Rating3 .RatingImage {
  width: 69px;
  height: 12px;
  background: url("IcoRating3.png") 0 0 no-repeat;
}

.ProductRating.Rating4 .RatingImage {
  width: 69px;
  height: 12px;
  background: url("IcoRating4.png") 0 0 no-repeat;
}

.ProductRating.Rating5 .RatingImage {
  width: 69px;
  height: 12px;
  background: url("IcoRating5.png") 0 0 no-repeat;
}

.ProductList .ProductRating .RatingImage {
  margin: 0 auto;
}

.hidden {
  display: none;
}

#tooltip {
  position: absolute;
  z-index: 10102;
  border: 1px solid #111;
  background-color: #FFF;
  padding: 5px;
  border: solid 3px #cccccc;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: block;
  width: 350px;
}

.tooltip_name {
  font-size: 14px;
  font-weight: bold;
  color: #003399;
  padding: 5px 10px;
  width: 320px;
}

.tooltip_picture {
  text-align: center;
}

.tooltip_picture img {
  text-align: center;
}

.tooltip_description {
  text-align: justify;
}

ul.ProductList {
  position: relative;
  list-style: none outside none;
  margin: 0;
  padding: 0 0 5px;
  clear: both;
}

/* ProductList */
.views {
  margin-top: 5px;
  padding: 5px 5px 0;
}

.views img {
  width: 16px;
}

.SortBox {
  color: #004481;
  margin-right: 0;
  padding-top: 10px;
  margin-right: 8px;
}

/* fancybox-outer */
.popup-cart {
  width: 780px;
  height: 500px;
  overflow: auto;
  color: #444444;
}

.popup-cart a {
  color: #000;
  text-decoration: none;
}

.popup-cart a:hover {
  text-decoration: underline;
}

.popup-cart h2 {
  background-color: transparent;
  color: #af1515;
  font-size: 25px;
  font-weight: bold;
  margin: 6px 0;
  border: none;
  color: #000;
}

.popup-cart .fastCartTop {
  padding: 15px 5px;
}

.popup-cart .fastCartThumb,
.popup-cart .fastCartItemBox {
  float: left;
}

.popup-cart .fastCartItemBox {
  margin-left: 10px;
  max-width: 230px;
  padding: 10px 2px;
}

.popup-cart .fastCartItemBox div {
  margin-bottom: 4px;
}

.popup-cart .fastCartItemBox em.productPrice {
  color: #1278B6;
  font-style: normal;
  font-weight: bold;
}

.popup-cart .fastCartItemBox .quantity {
  color: #828DB3;
}

.popup-cart .fastCartSummaryBox {
  border: 1px solid #D3D3D3;
  color: #222222;
  float: right;
  max-height: 150px;
  max-width: 250px;
  padding: 10px;
  text-align: right;
}

.popup-cart .fastCartSummaryBox div {
  margin-bottom: 5px;
}

.popup-cart .fastCartSummaryBox .subtotal {
  clear: both;
  font-size: 13px;
  font-weight: bold;
}

.popup-cart .fastCartSummaryBox .productPrice {
  color: #1278B6;
  font-style: normal;
  font-weight: bold;
}

.popup-cart .fastCartSummaryBox .actionLink a {
  font-weight: bold;
  color: #345bab;
}

#fancybox-inner .ProductList li {
  width: 144px;
}

/* Account-Module */
.Block table.CartContents {
  border: 1px solid #eaeaea;
  margin: 10px 0;
  width: 100%;
}

.CartContents tr {
  color: #eaeaea;
}

.CartContents tr td {
  color: #222;
}

.Block table.CartContents th {
  border-bottom: 1px solid #eaeaea;
  color: #1278B6;
  padding: 6px 10px;
}

.Block table.CartContents td {
  padding: 6px 10px;
  vertical-align: top;
  border-bottom: 0 none;
}

#CartHeader h2 {
  margin-left: 10px;
}

/* ExpressCheckout */
.ExpressCheckoutBlock {
  padding-top: 6px;
}

.ExpressCheckoutBlock .ExpressCheckoutTitle {
  margin-bottom: 10px;
  padding: 6px;
  position: relative;
  background-color: #fff;
  border: solid 1px #1278B6;
}

.ExpressCheckoutBlock .current-step {
  background: none repeat scroll 0 0 #1278B6;
  border: 1px solid #1278B6;
  color: #FFFFFF;
}

.HorizontalFormContainer dt {
  clear: left;
  float: left;
  width: 90px;
  padding-top: 5px;
  text-align: right;
  margin-right: 4px;
}

.HorizontalFormContainer dd {
  margin-left: 100px;
  padding-top: 5px;
}

.NormalTextBox {
  border: 1px solid #CECECE;
  padding: 2px;
  font-size: 12px;
  width: 50px;
  text-align: center;
}

/* NewsListContainer */
table.newsList_Item td.newsList_Image {
  text-align: left;
  vertical-align: top;
  width: 130px;
}

.newsList_Content a {
  color: #004481;
}

table.newsList_Item a.newsList_Title:link,
table.newsList_Item a.newsList_Title:visited {
  font-weight: bold;
  text-decoration: none;
}

table.newsList_Item span.newsList_Date {
  color: #989898;
}

table.newsList_Item span.newsList_Summary {
  color: #3C3C3C;
  text-align: left;
}

table.newsList_Item td.newsList_Content {
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
  padding-left: 15px;
}

table.newsList_Item {
  border-collapse: collapse;
  width: 100%;
  margin: 11px 0;
}

div.newsList hr.newsList_Seperator {
  border-bottom: 1px dotted #004481;
  height: 1px;
}

div.newsList {
  padding: 0 7px;
}

/* NewsDetailContainer */
div.newsDetail_Header div.newsDetail_Date {
  margin-left: 2px;
  padding: 0 10px;
}

div.newsDetail_Content {
  color: #3C3C3C;
  padding: 5px 11px;
}

element.style {
  overflow: hidden;
}

.Block p {
  line-height: 1.3;
  margin-bottom: 8px;
}

div.newsDetail_OrtherNews div.newsDetail_OrtherNews_Label {
  border-top: 1px dashed #004481;
  color: #004481;
  font-size: 18px;
  font-style: italic;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-bottom: 5px;
  padding-top: 5px;
}

.newsDetail_OrtherNews {
  margin: 0 5px;
}

div.newsDetail_OrtherNews div.newsDetail_OtherNews_List a.newsDetail_OrtherNews_Link:link,
div.newsDetail_OrtherNews div.newsDetail_OtherNews_List a.newsDetail_OrtherNews_Link:visited {
  background: url("list_style1.gif") no-repeat scroll 0 5px transparent;
  color: #000000;
  padding-left: 10px;
}

div.newsDetail_OrtherNews div.newsDetail_OtherNews_List a.newsDetail_OrtherNews_Link:hover {
  color: #004481;
}

div.newsDetail_OrtherNews div.newsDetail_OtherNews_List div {
  padding: 3px 0;
}

/* ProductDetails */
#ProductDetails .ProductField .ProductRating {
  float: left;
}

#slideShow .prev,
#slideShow .next,
#slideShow .ProductTinyImageList {
  float: left;
}

#slideShow .prev,
#slideShow .next {
  margin-top: 25px;
}

#ProductDetails .ProductThumb {
  float: left;
  text-align: center;
  width: 345px !important;
  margin: 0 20px 0 10px;
  padding-top: 5px;
  border: solid 2px #eaeaea;
}

#ProductDetails .ProductThumb .ProductTinyImageLine {
  border-top: 1px solid #e1e1e1;
  margin: 5px auto 0;
  width: 93%;
}

#ProductDetails .ProductMain {
  float: left;
  width: 370px;
  color: #6F6B65;
}

em.ProductPrice {
  color: #6f6b65;
  font-style: normal;
  font-weight: bold;
}

#ProductDetails .listImages ul li {
  border: 1px solid gray;
  margin: 0 1px;
  padding: 2px;
}

#ProductDetails .ProductThumbImage {
  height: 220px;
  margin: auto;
  overflow: hidden;
  width: 220px;
}

.TabNav,
.TabNav li {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}

.TabNav li.Active a {
  top: 0;
  border: solid 1px #E2E2E2;
  border-bottom: solid 1px #fff;
  background-color: #fff;
  top: 1px;
}

.TabNav li {
  display: inline-block;
  padding: 9px 0 5px;
  float: left;
}

.TabNav {
  font-size: 12px;
  border: none;
  display: inline-block;
}

.TabNav li a {
  margin-right: 3px;
  margin-top: 3px;
  position: relative;
  text-decoration: none;
  top: 1px;
  border-bottom: transparent;
  padding: 9px 15px 5px;
  color: #414141;
  font-weight: bold;
}

#ProductDescription,
#ProductReviews .BlockContent,
#ProductVideos,
#ProductArticleReview,
#ProductRelatedProducts,
#ProductFeatures,
.ProductDescription {
  border: none;
  border: solid 1px #e2e2e2 !important;
  padding: 10px !important;
  margin: 0 0 10px !important;
}

#ProductRelatedProducts {
  padding: 0;
}

#ProductRelatedProducts .ProductList li {
  width: 173px;
}

.Block dt {
  clear: left;
  float: left;
  width: 160px;
}

.Block dd {
  margin-left: 170px;
  padding-top: 3px;
}

#BulkDiscount {
  clear: both;
}

#BulkDiscount #addToCart {
  padding: 0;
}

.BulkDiscount {
  background: #ff9429;
  border-radius: 5px;
  color: #ffffff;
  font-size: 16px;
  text-transform: uppercase;
  text-align: left;
  padding: 0 20px;
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
  height: 37px;
  line-height: 37px;
  clear: both;
}

.BulkDiscount:hover {
  background: #1fcf0f;
}

#BulkDiscount #addToCart:active {
  box-shadow: none;
}

#ProductDetails h1,
.center .defaultTitle.NewsDetailContainer h1 {
  color: #353535;
  font-size: 17px;
  font-weight: normal;
  padding: 9px 11px;
  text-transform: none;
}

.product-title.defaultTitle h1,
.center .product-title.defaultTitle h1,
.newsDetail_Header .defaultTitle h1.newsDetail_Title,
.center .newsDetail_Header .defaultTitle h1.newsDetail_Title {
  line-height: 18px;
}

.defaultTitle.newsDetail_Header {
  background: none;
  border: none;
  padding: 0;
  line-height: normal;
  height: auto;
  margin-bottom: 10px;
}

.defaultContent.newsDetail-content.newsList-content {
  border: 0;
}

.center .defaultTitle h1 {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
}

/* Product detail v2 */
#ProductDetails .product-title h1 {
  padding: 10px 0;
  font-size: 20px;
}

#ProductDetails .ProductThumb .ImageCarouselBox {
  bottom: 0;
  padding: 12px 0;
}

#ProductDetails .ProductDetailsGrid .SKU {
  border-bottom: solid 2px #d8d8d8;
  padding-bottom: 7px;
}

#ProductDetails .ProductDetailsGrid .ProductSKU {
  float: left;
  color: #353535;
  margin-right: 10px;
}

#ProductDetails .ProductDetailsGrid .ProductManufacture {
  float: left;
  padding-left: 10px;
  border-left: solid 1px #d8d8d8;
}

#ProductDetails .ProductDetailsGrid .RetailPriceValue {
  font-weight: bold;
  font-size: 16px;
}

#ProductDetails .ProductDetailsGrid .VariationProductPrice {
  color: #1549a4;
  font-size: 30px;
  font-weight: bold;
  margin-top: 5px;
}

#ProductDetails .ProductDetailsGrid .PromotionDescription {
  float: left;
  width: 250px;
  padding: 0 0 0 4px;
  color: #F00;
}

#ProductDetails .ProductDetailsGrid ul.ProductField {
  margin: 0;
  padding: 0;
}

#ProductDetails .ProductDetailsGrid ul.ProductField li {
  margin: 0 0 6px;
  padding: 0 0 0 13px;
  clear: both;
  list-style: none;
  display: inline-block;
  width: 100%;
  background-image: url("icon-detail.png");
  background-repeat: no-repeat;
  background-position: 0 5px;
}

#ProductDetails .ProductDetailsGrid ul.ProductField li .label {
  display: block;
  font-weight: bold;
  float: left;
  width: 115px;
}

#ProductDetails .ProductDetailsGrid .PaymentRow {
  float: left;
  margin: 7px 5px 5px 0 !important;
}

#ProductDetails .ProductDetailsGrid .ShortDescription {
  margin-top: 15px;
}

#ProductDetails .ProductDetailsGrid .ShortDescriptionTitle {
  border-bottom: solid 1px #d8d8d8;
  padding: 6px 0;
  font-weight: bold;
}

#ProductDetails .ProductDetailsGrid .ShortDescription p {
  padding: 6px 0;
}

#ProductDetails .ProductDetailsGrid .ProductOptionTitle {
  border-bottom: solid 1px #d8d8d8;
  padding: 2px 0;
  font-weight: bold;
}

#ProductDetails .ProductDetailsGrid .ProductOptionValue {
  padding: 7px 0 0;
}

#ProductDetails .ProductDetailsGrid .LabelQuantityInput {
  float: left;
  width: 65px;
  font-weight: bold;
  padding-top: 6px;
  margin-right: 10px;
}

#ProductDetails .ProductDetailsGrid .quantityInput {
  border: solid 1px #cacaca;
  padding: 6px 3px;
  font-size: 14px;
  width: 100px;
}

#ProductDetails .ProductDetailsGrid .ProductAddToCart {
  padding: 5px 0;
}

#BulkDiscount,
.ProductAddToCart {
  display: block;
}

.ProductDetailsGrid .Row {
  margin: 0 0 6px;
}

.ProductDetailsGrid .LabelProductSKU,
.ProductDetailsGrid .LabelManufacture,
.ProductDetailsGrid .LabelPrice {
  font-weight: bold;
}

#social {
  padding: 5px 0 10px;
  clear: both;
  margin-left: 20px;
}

#social .g-plusone,
#social .tweet-btn,
#social .pinterest {
  display: block;
  float: left;
  margin-right: 10px;
}

#social .facebook-like {
  display: block;
  float: left;
}

/* contact */
.contact-info div {
  margin-bottom: 8px;
}

.contact-info div div {
  margin: 0;
}

.contact-info .key {
  float: left;
  width: 100px;
  margin-bottom: 1px;
}

.contact-info .space {
  float: left;
  width: 10px;
}

.contact-info .value {
  float: left;
  width: 350px;
}

.contact-info {
  padding: 5px 10px 0;
}

/* Breadcrumb */
.breadcrumb {
  background: none !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
}

.breadcrumb li a {
  background: url("breadcrumbsep.gif") no-repeat scroll right center transparent;
  color: #323232;
  font-weight: normal;
  padding-right: 12px;
}

.breadcrumb li:hover a {
  text-decoration: none;
  cursor: pointer;
}

.breadcrumb li {
  color: #216cf6;
}

.breadcrumb ul,
.Breadcrumb li {
  list-style: none outside none;
  margin: 0 0 10px;
}

.breadcrumb li {
  display: inline;
  padding-left: 0;
}

/* Footer */
.bg-footer {
  width: 100%;
  background-image: url("bg-footer.jpg");
  background-repeat: repeat-x;
  background-position: top;
  background-color: #fff;
}

#Footer {
  clear: both;
  margin: 0 auto;
  padding-top: 10px;
  background-color: #1d1d1d;
}

#FooterContainer {
  font-size: 16px;
  padding: 20px 0 0;
  text-align: left;
}

#Powerby {
  background-color: #f1f1f1;
  color: #3d3d3d;
  float: left;
  font-size: 12px;
  padding: 5px 0;
  text-align: center;
  width: 100%;
}

#FooterContainer p {
  color: #fff;
}

#Powerby a strong {
  color: #3d3d3d;
}

.footer-info ul {
  float: left;
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 100%;
}

.footer-info {
  font-family: "Markazitext"
    , serif;
}

.oswald-<footerfont> {
  font-family: "Markazitext"
    , serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.footer-info ul li {
  list-style: none;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 14px;
  color: #fff;
}

.footer-info ul li span {
  font-size: 18px;
}

.footer-info ul .footer-title span {
  font-size: 20px !important;
}

.footer-info ul .footer-email span,
.footer-info ul .footer-hotline span {
  color: transparent !important;
  background-clip: text !important;
  font-size: 22px !important;
}

.footer-info ul .footer-email span {
  background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 80%, #625EB1 100%);
}

.footer-info ul .footer-hotline span {
  background-image: linear-gradient(to top, #ff0000 0%, #ff0000 50%, #ffb199 100%);
}

.footer-info ul li a {
  font-weight: 300;
  font-size: 18px;
  font-weight: normal;
  color: #fff;
}

.footer-info .location {
  background-image: url("footer-location.png");
  background-repeat: no-repeat;
  background-position: left;
  display: block;
  padding-left: 19px;
}

.footer-info .phone {
  background-image: url("footer-phone.png");
  background-repeat: no-repeat;
  background-position: left;
  display: inline-block;
  padding-left: 19px;
  font-weight: normal;
  margin-right: 30px;
  color: #3d3d3d;
}

.footer-info .email {
  background-image: url("footer-mail.png");
  background-repeat: no-repeat;
  background-position: left;
  display: inline-block;
  padding-left: 19px;
}

/* Account-Module */
.NewsDetailContainer,
.ProductDetailContainer,
.Account-Module {
  margin-bottom: 9px;
}

#CartHeader h2 {
  margin-left: 10px;
}

.Block h2 {
  background: none repeat scroll 0 0 transparent;
  border: medium none;
  color: #004481;
  font-size: 12px;
  text-transform: none;
}

#CartHeader {
  background-image: url("bg-menu-center.jpg");
  background-position: center top;
  background-repeat: repeat-x;
  display: block;
  padding: 6px 0;
  border: solid 1px #eaeaea;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  border-bottom: 2px solid #1549a4;
  font-size: 18px;
}

#CartHeader h2 {
  font-size: 18px;
}

#CartContainer {
  margin-top: 5px;
}

.ExpressCheckout {
  padding: 10px;
}

.CreateAccount {
  border-right: 1px solid #CCCCCC;
  float: left;
  padding-left: 5px;
  padding-right: 5px;
  width: 255px;
}

.defaultContent.LoginForm-content.BlockContent {
  padding: 10px;
}

.defaultContent.LoginForm-content.BlockContent p.ErrorMessage {
  margin: 0;
}

.AccountLogin {
  float: left;
  padding-left: 5px;
  width: 255px;
}

.HorizontalFormContainer dd {
  margin-left: 100px;
  padding-top: 6px;
}

.HorizontalFormContainer dt {
  clear: left;
  float: left;
  margin-right: 4px;
  padding-top: 7px;
  text-align: right;
  width: 100px;
}

.Block h3 {
  color: #004481;
}

.FormAccountLogin h2 {
  padding: 5px 10px;
}

.Account-Module .defaultFooter {
  display: none;
}

.MyAccountTitle {
  background: none;
}

.defaultContent.BlockContent.MyAccountContent {
  padding: 0 10px 10px;
}

.MyAccount .my-message {
  background: url("message48x48.png") no-repeat scroll 0 5px transparent;
}

.MyAccount .order-status {
  background: url("order48x48.png") no-repeat scroll 0 5px transparent;
}

.MyAccount .account-address {
  background: url("address48x48.png") no-repeat scroll 0 10px transparent;
}

.MyAccount .account-info {
  background: url("myaccount48x48.png") no-repeat scroll 0 10px transparent;
}

.MyAccount .product-recent {
  background: url("report48x48.png") no-repeat scroll 0 5px transparent;
}

.MyAccount,
.MyAccount li {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}

.MyAccount li {
  border-bottom: 1px dotted #B0BEC7;
  padding: 5px 0 8px 45px;
  list-style: none;
}

#MyAccount li {
  list-style: none;
}

#MyAccount li h3 {
  padding-left: 0;
}

.MyAccountContent ul {
  margin-left: 0;
}

.MyAccountContent .AccountOrderStatusList li {
  border-bottom: solid 1px #d6d6d6;
}

.MyAccountContent .AccountOrderStatusList .OrderItemList li {
  border: none;
}

.MyAccount a span {
  color: #004481;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
}

.Block ul li {
  margin-top: 5px;
}

.AccountOrderStatusList li,
ul.ShippingAddressList,
ul.ShippingAddressList li {
  list-style: none;
}

.InfoMessage {
  background-color: #F4F4F4;
  background-position: 7px 5px;
  background-repeat: no-repeat;
  color: #333333;
  margin: 5px 0;
  padding: 8px 8px 8px 30px;
}

ul.ShippingAddressList {
  margin: 0;
  padding: 0;
}

ul.ShippingAddressList li {
  float: left;
  width: 33%;
}

/* listing-type-list */
.listing-type-list .listing-item {
  margin: 0;
  padding: 5px;
}

.listing-type-list .product-image {
  float: left;
  text-align: center;
  width: 150px;
}

.listing-type-list .product-shop {
  float: right;
  width: 540px;
}

.listing-type-list .product-shop h3 {
  color: #666666;
  font-size: 12px;
  line-height: 1.3em;
  margin-bottom: 0.4em;
  padding: 0;
}

.listing-type-list .product-shop h3 a {
  color: #216cf6;
  font-size: 13px;
  font-weight: bold;
}

.listing-type-list .product-shop .price strike {
  color: #353535;
  font-size: 13px;
}

.listing-type-list .product-shop .price em {
  color: #3265c0;
  font-size: 13px;
  font-style: normal;
  font-weight: bold;
  padding-bottom: 2px;
}

.listing-type-list .product-shop .price .ProductActionAdd a {
  background-color: #ffb419;
  background-image: url("bg-cart.jpg");
  background-position: center top;
  background-repeat: repeat-x;
  border-radius: 4px;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 15px;
  text-align: center;
  text-shadow: 2px 2px 1px #ad933a;
  text-transform: uppercase;
}

.listing-type-list .product-shop .price .ProductActionAdd {
  margin-bottom: 5px;
  margin-top: 8px;
}

.listing-type-list .saleFlag1 {
  color: #FFFFFF;
  font-weight: bold;
  height: 48px;
  left: auto;
  margin-left: 100px;
  position: absolute;
  text-align: center;
  width: 48px;
  line-height: 48px;
}

.ISSelect {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 1px solid #7F9DB9;
  overflow: auto;
  padding: 0 10px;
}

.ISSelect li {
  border-bottom: 1px solid #FFFFFF;
  border-top: 1px solid #FFFFFF;
  cursor: default;
  padding-bottom: 2px;
  padding-left: 4px;
  padding-top: 2px;
}

.ISSelect ul,
.ISSelect li {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}

.brands-border {
  overflow: hidden;
}

.HorizontalFormContainer dd input[type="checkbox"] {
  margin-top: 3px;
  padding: 0;
}

.CartContents td,
.CartContents th {
  padding: 5px 10px;
}

.CartContents {
  border: solid 1px #1278B6;
}

/* ComparisonTable */
#CompareContent .defaultContent.CompareContent-Content {
  padding: 0 10px;
}

.ProductCompareButton {
  margin-top: 6px;
  text-align: left;
  padding-left: 4px;
}

.CompareButton {
  clear: both;
  margin-top: 12px;
  padding: 4px;
  text-align: right;
}

table.ComparisonTable {
  width: 100%;
  border-collapse: collapse;
}

table.ComparisonTable th.StaticCompareFieldTop {
  width: 15%;
}

table.ComparisonTable th.CompareFieldTop {
  font-weight: bold;
  text-align: center;
  padding: 5px 4px;
}

table.ComparisonTable td {
  font-size: 12px;
  vertical-align: top;
  padding: 5px 4px;
}

table.ComparisonTable td.CompareFieldName {
  border-left: none;
  border-bottom: 1px solid #EFF8FA;
  font-weight: bold;
  color: #535353;
}

table.ComparisonTable .CompareCenter {
  text-align: center;
  border-bottom: 1px solid #EFF8FA;
  border-right: none;
}

table.ComparisonTable .CompareLeft {
  text-align: left;
  border-bottom: 1px solid #EFF8FA;
  border-right: none;
}

a.compare {
  font-weight: bold;
}

.compare-button {
  float: right;
  height: 20px;
  line-height: 20px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #004481;
  border-radius: 4px 4px 4px 4px;
  color: #fff;
}

.compare-button a {
  color: #fff;
  font-weight: bold;
  padding: 0 5px;
}

/* EmailSubscription */
.EmailSubscription-content #subscribe_form label {
  display: block;
  margin-bottom: 5px;
}

.EmailSubscription-content #subscribe_form .Textbox {
  display: block;
  margin-bottom: 10px;
  width: 178px;
  border: 1px solid #004481;
  height: 20px;
}

.defaultTitle.AccountOrderTitle h1 {
  font-size: 18px;
}

.PageNavigation {
  float: right;
  text-align: right;
  width: 100%;
}

.EmailSubscription-content #subscribe_form .Button {
  float: right;
  background-color: #004481;
  border-radius: 4px 4px 4px 4px;
  color: #FFFFFF;
  font-size: 12px;
  padding: 3px 8px;
  text-align: center;
  text-transform: none;
  border: none;
}

.coupon-code {
  text-align: right;
  margin-bottom: 10px;
}

.Notice-Info {
  background: url("SuccessMessage.gif") no-repeat scroll 5px 8px #E8FFDF;
  color: #555555;
  margin-bottom: 10px;
  padding: 8px 6px 8px 28px;
}

.Notice-Warning,
.Notice-Exception,
.Notice-Fatal {
  background: url("ErrorMessage.gif") no-repeat scroll 5px 8px #FFECEC;
  color: #555555;
  margin-bottom: 10px;
  padding: 8px 6px 8px 28px;
}

/* Product Options */
.ProductOptionList .ProductOptionRow {
  clear: left;
  margin-top: 6px;
}

.ProductOptionList .ProductOptionLabel {
  display: inline;
  float: left;
  font-weight: bold;
  text-align: right;
  margin: 0 0 6px -140px;
  padding-top: 1px;
  position: relative;
  width: 130px;
}

.ProductOptionList .required {
  color: red;
}

.productOptionPickListSwatch li {
  display: inline;
}

.productOptionViewRectangle ul,
.productOptionViewRectangle li,
.productOptionPickListSwatch ul,
.productOptionPickListSwatch li,
.productOptionViewRadio ul,
.productOptionViewRadio li {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

.productOptionViewRectangle li {
  display: inline;
}

.productOptionViewRectangle .option label {
  border: 1px solid #999999;
}

.productOptionViewRectangle .selectedValue label {
  border-color: #075899;
  border-width: 2px;
  padding: 1px 4px;
}

.productOptionViewRectangle label {
  display: inline-block;
  margin: 0 0 5px;
  padding: 2px 5px;
}

.productOptionViewRectangle label,
.productOptionPickListSwatch label {
  cursor: pointer;
  position: relative;
}

.productOptionViewRectangle input,
.productOptionPickListSwatch input {
  left: -10000px;
  float: none;
  height: 0;
  overflow: hidden;
  position: absolute;
  z-index: -10000;
}

.productOptionPickListSwatch .textureContainer,
.productOptionPickListSwatch .swatchColours {
  border: 1px solid #999999;
  display: inline-block;
  margin-bottom: 5px;
  padding: 1px;
  position: relative;
}

.productOptionPickListSwatch .thumbnail,
.productOptionPickListSwatch .swatchColour {
  display: inline-block;
  height: 32px;
  width: 32px;
}

.productOptionPickListSwatch .swatch .name {
  display: none;
}

.productOptionPickListSwatch .selectedValue .textureContainer,
.productOptionPickListSwatch .selectedValue .swatchColours {
  border-color: #075899;
  border-width: 2px;
  padding: 0;
}

.OutOfStockMessage {
  color: Red;
  margin: 10px 0 0 130px;
}

.checkout-page {
  background-color: #FFFFFF;
  border-radius: 7px;
  padding-top: 10px;
}

#CartHeader .FloatRight {
  margin-right: 9px;
}

.productOptionPickListSwatch li,
.productOptionPickListSwatch ul {
  margin: 0;
  list-style: none;
}

.productOptionPickListSwatch li {
  margin-bottom: 2px;
}

.comparison table .property-column {
  padding-top: 6px !important;
}

.TextHTML-content {
  padding-top: 10px;
}

.fancybox-opened,
.fancybox-overlay {
  z-index: 999999 !important;
}

.defaultContent.contact-content {
  border: none;
}

.feature-name span {
  display: inline-block !important;
  background: none !important;
  padding: 0 !important;
}

.feature-name {
  background: url("list_style1.gif") no-repeat scroll 10px 11px rgba(0, 0, 0, 0) !important;
  padding: 5px 0 6px 22px !important;
}

.filter-content ul li.level1:hover a {
  margin: 0 !important;
}

/************ UPDATE (DO NOT REMOVE - OVERRIDES) **************/
.SideTopSeller-content .BlockContent ul.ProductList li {
  width: 100%;
  padding: 10px 0;
}

.SideTopSeller-content .BlockContent ul.ProductList li:hover {
  cursor: pointer;
}

#main-slider {
  padding: 0;
  width: 100%;
  margin-bottom: 15px;
}

.main-right {
  width: 74.5% !important;
  border-radius: 5px;
  float: right !important;
  overflow: hidden;
}

#menu-mobile {
  display: none;
}

#main-content-left {
  padding: 0;
}

.cate-menu,
.TopSellers,
.newsLastest {
  box-shadow: rgba(60, 64, 67, 0.3) 0 1px 2px 0, rgba(60, 64, 67, 0.15) 0 2px 6px 2px;
}

.ProductDetails {
  text-align: center;
}

.special-price {
  text-align: center;
  height: 30px;
}

.special-price .price em {
  font-size: 18px !important;
}

.ProductImage {
  text-align: center;
}

.ProductImage img {
  display: block;
}

#FooterContainer .box-footer {
  min-height: 280px;
  margin-right: 10px;
}

.box-footer .logo-footer img {
  width: 150px !important;
}

.face-content {
  margin-bottom: 60px;
}

#main-slider-mobile {
  display: none;
}

#BulkDiscount a:hover {
  color: white;
  text-decoration: underline;
}

@media screen and (min-width: 990px) {

  #Container,
  #FooterContainer {
    font-family: "Markazi Text"
      , serif;
  }
}

@media screen and (max-width: 990px) {
  #SearchForm .search-input {}

  .pro-header {
    padding: 10px 60px 0;
    display: none;
  }

  .box-product-first:nth-child(2n + 2) {
    background-image: none;
  }
}

@media screen and (min-width: 768px) and(max-width: 990px) {
  .phone-header {
    background: none;
    text-align: right;
    margin: 0;
  }

  .phone-header span {
    display: inline-block;
  }

  .phone-header a {
    font-size: 16px;
  }

  #SearchForm {
    float: right;
  }
}

@media screen and (max-width: 768px) {

  .sidebar-left-blog-article,
  .sidebar-right-blog {
    display: none;
  }

  #FooterContainer .box-footer {
    min-height: 100% !important;
    padding-left: 10px;
  }

  .box-footer-1,
  .box-footer-2 {
    display: none;
  }

  .sidebar-right-blog {
    padding-right: 15px !important;
  }

  .wrap-article .sidebar-right-blog {
    display: inline-block;
    width: 100%;
  }

  .wrap-products .detail-content-left {
    margin-bottom: 0;
  }

  #main-content-left {
    display: none;
  }

  .wrap-products #main-slider-mobile,
  .wrap-products #main-content-left {
    display: none;
  }

  #cate-menu {
    display: none;
  }

  .newsLastest.DefaultModule {
    display: none;
  }

  #main-slider {
    display: none;
  }

  #main-slider-mobile {
    display: block;
    margin-bottom: 10px;
  }

  #TopMenu ul {
    display: none;
  }

  /* Fix mobile layout - product grid */
  .box-product-first {
    text-align: center;
    width: 48% !important;
    float: left !important;
    margin: 1% !important;
    padding: 8px !important;
    min-height: auto !important;
    background-image: none !important;
  }

  .box-product-first:nth-child(2n + 2) {
    background-image: none !important;
  }

  /* Fix mobile layout - main-right full width */
  .main-right {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .content-product-list {
    width: 100% !important;
    padding: 0 5px !important;
    box-sizing: border-box;
  }

  /* --- NAVIGATION MODULE - MOBILE MENU --- */
  #menu-mobile {
    display: inline-block;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
    transition: top 0.3s ease;
  }

  /* Khi scroll - mobile menu cách top 8px */
  #menu-mobile.is-sticky {
    top: 8px;
  }

  /* Menu vẫn sticky khi expand - chỉ thay đổi style */
  #menu-mobile.menu-expanded {
    top: 0;
  }

  #menu-mobile.menu-expanded.is-sticky {
    top: 8px;
  }

  #menu-mobile .navbar-default {
    background: linear-gradient(135deg, #0d7ea3 0%, #1da3cf 50%, #4fc3e8 100%);
    margin-bottom: 0;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(29, 163, 207, 0.4), 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.1, 0.1, 0.1, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
  }

  /* Shimmer overlay effect */
  #menu-mobile .navbar-default::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: menuShimmer 3s infinite;
    pointer-events: none;
  }

  @keyframes menuShimmer {
    0% {
      left: -100%;
    }

    50%,
    100% {
      left: 100%;
    }
  }

  #menu-mobile.is-sticky .navbar-default {
    box-shadow: 0 8px 30px rgba(29, 163, 207, 0.5), 0 4px 15px rgba(0, 0, 0, 0.15);
    transform: scale(0.98);
  }

  /* Khi expand - sync border-radius với button */
  #menu-mobile.menu-expanded .navbar-default {
    border-radius: 30px;
    background: linear-gradient(135deg, #4fc3e8 0%, #1da3cf 50%, #0d7ea3 100%);
  }

  #menu-mobile.menu-expanded .navbar-default .navbar-toggle {
    border-radius: 30px;
  }

  /* Smooth transition cho collapse */
  #menu-mobile .navbar-collapse {
    transition: height 0.35s ease;
  }

  /* Navbar header - position relative để chứa button absolute */
  #menu-mobile .navbar-default .navbar-header {
    position: relative;
    width: 100%;
    padding: 4px 0px;
  }

  /* MENU text - nổi bật trong khung border */
  #menu-mobile .navbar-default .navbar-brand {
    color: white;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.8),
      0 0 20px rgba(255, 255, 255, 0.5),
      0 2px 4px rgba(0, 0, 0, 0.3);
    animation: menuTextGlow 2s ease-in-out infinite;
    margin: 0;
    display: block;
    text-align: center;
    width: 100%;
    /* padding: 10px; */
    position: relative;
    z-index: 5;
  }

  .container .navbar-header {
    margin: 0 !important;
  }

  @keyframes menuTextGlow {

    0%,
    100% {
      text-shadow:
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3);
    }

    50% {
      text-shadow:
        0 0 15px rgba(255, 255, 255, 1),
        0 0 30px rgba(255, 255, 255, 0.7),
        0 0 40px rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3);
    }
  }
  
  /* Toggle button - sync border-radius với navbar */
  #menu-mobile .navbar-default .navbar-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 10;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    padding: 0;
    margin: 0;
    transition: width 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-radius 0.3s ease;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: right;
    float: none;
  }

  #menu-mobile .navbar-default .navbar-toggle:hover,
  #menu-mobile .navbar-default .navbar-toggle:focus {
    background: rgba(255, 255, 255, 0.25);
    border-color: white;
    width: calc(100% + 2px);
    margin-left: -1px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    border-radius: 30px!important;
  }

  /* Hide default icon-bars */
  #menu-mobile .navbar-default .navbar-toggle .icon-bar {
    display: none !important;
  }

  /* FontAwesome icon styling - căn giữa trong button */
  #menu-mobile .navbar-default .navbar-toggle .menu-icon {
    color: white;
    font-size: 18px;
    transition: all 0.3s ease;
    margin-right: 18px;
  }

  /* Down arrow icon - collapsed state - animation khi load và khi collapse */
  #menu-mobile .navbar-default .navbar-toggle .menu-icon.fa-chevron-down {
    display: block;
    animation: bounceDownInitial 1s ease 0.5s, bounceDownLoop 2s ease-in-out 1.5s infinite;
  }

  #menu-mobile .navbar-default .navbar-toggle .menu-icon.fa-xmark {
    display: none;
  }

  /* When expanded - show X, hide arrow */
  #menu-mobile.menu-expanded .navbar-default .navbar-toggle .menu-icon.fa-chevron-down {
    display: none;
    animation: none;
  }

  #menu-mobile.menu-expanded .navbar-default .navbar-toggle .menu-icon.fa-xmark {
    display: block;
    animation: rotateIn 0.3s ease forwards;
  }

  /* Khi collapse - chevron xuất hiện với animation */
  #menu-mobile:not(.menu-expanded) .navbar-default .navbar-toggle .menu-icon.fa-chevron-down {
    animation: rotateBack 0.3s ease forwards, bounceDownLoop 2s ease-in-out 0.5s infinite;
  }

  /* Arrow animation khi hover - dừng loop, chạy bounce nhanh */
  #menu-mobile .navbar-default .navbar-toggle:hover .menu-icon.fa-chevron-down {
    animation: bounceDownHover 0.5s ease infinite !important;
  }

  /* Animation: bounce nhẹ khi mới load */
  @keyframes bounceDownInitial {
    0% { transform: translateY(-5px); opacity: 0; }
    50% { transform: translateY(3px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
  }

  /* Animation: bounce loop nhẹ nhàng */
  @keyframes bounceDownLoop {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2px); }
  }

  /* Animation: bounce khi hover */
  @keyframes bounceDownHover {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
  }

  /* Animation: X xoay vào */
  @keyframes rotateIn {
    from { transform: rotate(-90deg); opacity: 0; }
    to { transform: rotate(0); opacity: 1; }
  }

  /* Animation: chevron xoay trở lại từ X */
  @keyframes rotateBack {
    from { transform: rotate(90deg); opacity: 0; }
    to { transform: rotate(0); opacity: 1; }
  }

  #menu-mobile .navbar-default .navbar-nav>li>a {
    color: white;
    font-size: 20px;
  }

  #menu-mobile .navbar-default .navbar-nav>.open>a,
  #menu-mobile .navbar-default .navbar-nav>.open>a:hover,
  #menu-mobile .navbar-default .navbar-nav>.open>a:focus {
    color: #0E489A;
    background-color: #ffffff;
    transition: background-color 0.3s ease-out;
  }

  #menu-mobile li.dropdown.open {
    background-color: #ffffff;
  }

  #menu-mobile .navbar-default .navbar-nav .open .dropdown-menu>li {
    border: 0.7px solid #ccc;
    border-radius: 10px 10px;
    margin: 1px;
  }

  #menu-mobile .navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: #000000;
    font-size: 16px;
  }

  #Menu {
    display: none;
  }

  #LogoContainer a {
    display: inline-block;
  }

  #LogoContainer {
    text-align: center;
  }

  #Header .seach-header {
    text-align: center;
  }

  #Header .seach-header #SearchForm {
    display: inline-block;
    float: none;
    padding-top: 20px;
  }

  #Header .seach-header #SearchFormContainer input {
    margin: 0;
  }

  .phone-header {
    background: none;
    text-align: center;
    margin-bottom: 40px;
    margin-top: 10px;
  }

  .phone-header span,
  .phone-header a {
    display: block;
    padding: 0;
    float: none;
    margin: 5px 0 0;
  }
}

@media screen and (max-width: 380px) {
  #Footer #FooterContainer .box-footer {
    width: 100% !important;
    min-height: 0 !important;
  }
}

/* ============================================================================
   NAVIGATION MODULE - SECTION 1: TOP BAR
   ============================================================================ */

.bg_topmenu {
  background-position: center top;
  background-repeat: no-repeat;
  height: 26px;
  margin: 0 auto;
  width: 981px;
  display: none;
  background-color: #055496;
}

#TopMenu {
  float: right;
  height: 26px;
  padding: 0;
}

#TopMenu li {
  background-image: url("icon_top.gif");
  background-position: left center;
  background-repeat: no-repeat;
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  line-height: 26px;
  display: none;
}

#TopMenu li.CartLink.topMenu_Cart {
  display: inherit;
  background-image: url('https://cdn.hstatic.net/files/1000098437/file/shopping-cart.svg');
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
  width: 122px;
  height: 28px;
  margin-right: 9px;
}

#TopMenu li.CartLink.topMenu_Cart img {
  scale: 1;
}

#TopMenu li.CartLink.topMenu_Cart a {
  padding: 0 0 0 38px;
}

.guide-btn {
  float: right;
  background: #363636;
  background-repeat: repeat-x;
  background-position: bottom;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  border-radius: 4px;
  color: #fff;
  padding: 0 8px;
}

.guide-btn:hover {
  text-decoration: none;
  background: #559cef;
  color: white;
}

#TopMenu li a,
#TopMenu li div {
  color: #5b5b5b;
  display: block;
  font-size: 18px;
  padding: 0 15px 0 8px;
  text-decoration: none;
}

#TopMenu li.languageFlag a {
  padding: 7px 3px;
}

#TopMenu ul {
  float: left;
  margin: 0;
}

/* ============================================================================
   NAVIGATION MODULE - SECTION 2: MAIN MENU
   ============================================================================ */

#Menu {
  clear: both;
  height: auto;
  padding: 0;
  font-family: 'Markazitext';
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background: transparent;
  transition: top 0.3s ease;
}

/* Khi scroll xuống - menu cách top 10px */
#Menu.is-sticky {
  top: 10px;
}

/* Blur overlay phía trên menu khi scroll - khít với thanh menu */
.menu-blur-overlay {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1161px;
  max-width: calc(100% - 20px);
  height: 30px;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.6) 70%,
      transparent 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0 0 12px 12px;
  z-index: 98;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu-blur-overlay.active {
  opacity: 1;
}

@media (max-width:768px) {
  .menu-blur-overlay {
    height: 10px;


  }
}

#nav li {
  position: relative;
  text-align: left;
}

#nav li.over {
  z-index: 999;
}

#nav a,
#nav a:hover {
  display: block;
  text-decoration: none;
}

#nav span {
  display: block;
  cursor: pointer;
  white-space: nowrap;
}

#nav li ul span {
  white-space: normal;
}

#nav li {
  float: left;
}

#nav a {
  float: left;
  padding: 5px 12px 6px 8px;
  color: #a7c6dd;
  font-weight: bold;
}

#nav li.first a {}

#nav ul li,
#nav ul li.current {
  float: none;
  margin: 0;
  padding-bottom: 1px;
}

#nav ul li.over {
  float: none;
  margin: 0;
  padding-bottom: 1px;
}

#nav ul li ul li.level2 {
  float: none;
  margin: 0;
}

#nav ul li span {
  font-weight: normal;
}

#nav ul a,
#nav ul a:hover {
  float: none;
  padding: 0;
}

#nav ul li.first a,
#nav ul li.first a:hover {
  border-top: none;
}

#nav ul li a {
  font-weight: normal;
}

#nav ul ul li {
  padding: 0 10px;
}

#nav ul ul li.first {
  border-top: none;
}

#nav ul li a,
#nav ul li a:hover {
  color: #2f2f2f;
}

#nav ul span,
#nav ul li.last li span {
  padding: 5px 0;
}

#nav ul ul {
  top: 5px;
}

#nav,
#nav ul,
#nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav a:link,
#nav a:visited {
  color: #fff;
  font: 12px / 42px arial;
  padding: 0 16px;
  margin-right: 14px;
  background-image: url("menu_separator.jpg");
  background-position: right;
  background-repeat: no-repeat;
}

#nav li.level0.current a,
#nav li.level0.over a {
  color: #ffdc19;
  background-image: url("menu_separator-hover.jpg");
}

#nav li.level0.current ul li a,
#nav li.level0.over ul li a {
  background-image: none;
  margin: 0;
}

#nav .level1 a {
  background: none;
}

#nav ul li a {
  color: #050000;
  font-weight: normal;
  font-size: 12px;
}

#nav ul.level0 {
  background: url("icon-menu1.png") no-repeat scroll 20px 0 rgba(0, 0, 0, 0);
  padding-top: 6px;
}

#nav ul.level1 {
  background: url("icon-menu2.png") no-repeat scroll 1px 6px rgba(0, 0, 0, 0);
  padding: 0 0 0 6px;
}

#nav ul.level0 li {
  margin: 0 0 3px;
  padding: 0;
}

#nav ul.level0 li.level1 a {
  padding: 3px 0;
  margin-bottom: 3px;
  text-transform: none;
  color: #fff;
  font-size: 12px;
}

#nav li ul li.level1.first a {
  border: none;
}

#nav li ul li.level1 ul li.level2 a {
  padding: 3px 0;
  text-transform: none;
  color: #DEFF88;
  background: no-repeat scroll 11px 12px transparent;
}

#nav li ul li.level1 ul li.level2:hover a {
  background-color: #ffd700;
}

#nav li ul li.level1 ul li.level2.first a {
  border: none;
}

#nav ul.level0 li a span {
  margin: 0;
  color: #fff;
  line-height: 14px;
  padding-left: 14px;
}

#nav ul.level1 li a {
  color: #000000;
  padding: 0;
}

#nav ul.level1 li a span {
  color: #000000;
}

#nav ul.level0 li.over li a span {
  color: #fff;
}

#nav ul.level0 li.over li a:hover,
#nav ul.level0 li.over a {
  background-color: #ffd700;
  color: #000;
}

#nav ul.level0 li.over li a:hover span,
#nav ul.level0 li.over a span {
  color: #000;
}

#nav ul.level1 li a:hover span {
  color: #000;
}

#nav ul {
  background: transparent;
  border: 0;
  top: 42px;
  width: 160px;
}

#nav ul ul {
  background: transparent;
  top: 0;
}

#nav li.over>ul {
  left: 0;
}

#nav li.over>ul li.over>ul {
  left: 160px;
}

.dropdown-menu-sub {
  position: absolute;
  top: 100%;
  display: none;
  background: white;
  min-width: 300px !important;
  margin-left: 0;
  list-style: none;
  z-index: 9999;
  padding: 0 5px 0 10px;
}

.dropdown-li.active {
  background: white;
}

.dropdown-li.active>a {
  color: #ff2020 !important;
}

.dropdown-li:hover .dropdown-menu-sub {
  display: block;
}

.dropdown-menu-sub li a {
  padding: 8px 5px 8px 15px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 100%;
}

/* ============================================================================
   NAVIGATION MODULE - SECTION 3: SIDEBAR CATEGORY MENU
   ============================================================================ */

#cate-menu {
  font-family: 'Markazitext';
}

#cate-menu ul,
#cate-menu ul li {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}

#cate-menu ul li a:link,
#cate-menu ul li a:visited,
#cate-menu ul ul li.level1 a:link,
#cate-menu ul ul li.level1 a:visited,
#cate-menu ul ul ul li.level2 a:link,
#cate-menu ul ul ul li.level2 a:visited {
  background: none;
  padding: 0;
}

#cate-menu ul li a:link,
#cate-menu ul li a:visited {
  color: #3D3D3D;
  display: block;
  font-size: 18px;
  font-weight: 400;
  padding: 7px 0 7px 9px;
}

#cate-menu ul li a {
  font-size: 15px;
}

#cate-menu ul ul li.level1 a:link span,
#cate-menu ul ul li.level1 a:visited span {
  background: url("list_style1.gif") no-repeat scroll 10px 11px rgba(0, 0, 0, 0);
  color: #3D3D3D;
  display: block;
  font-size: 16px;
  font-weight: normal;
  padding: 5px 0 6px 22px;
}

#cate-menu ul ul ul li.level2 a:link span,
#cate-menu ul ul ul li.level2 a:visited span {
  background: url("list_style1.gif") no-repeat scroll 32px 10px transparent;
  color: #3d3d3d;
  display: block;
  font-size: 14px;
  font-weight: normal;
  padding: 5px 0 6px 45px;
}

#cate-menu ul ul ul li.level2 a:link,
#cate-menu ul ul ul li.level2 a:visited {
  margin-left: -6px;
}

.defaultContent li.level0,
.defaultContent li.level1,
.defaultContent li.level2 {
  border-top: 1px solid #e3e3e3;
}

#cate-menu ul ul li.current a:link,
#cate-menu ul ul li.current a:visited,
#cate-menu ul ul ul li.current a:link,
#cate-menu ul ul ul li.current a:visited,
#cate-menu ul ul li:hover a:link,
#cate-menu ul ul li:hover a:visited,
#cate-menu ul ul ul li:hover a:link,
#cate-menu ul ul ul li:hover a:visited {
  color: #345bab;
  background-image: url("list_style.gif");
  background-repeat: no-repeat;
  background-position: left;
  margin-left: -6px;
  padding-left: 6px;
}

#cate-menu ul ul ul li.current a:link,
#cate-menu ul ul ul li.current a:visited,
#cate-menu ul ul ul li:hover a:link,
#cate-menu ul ul ul li:hover a:visited {
  padding-left: 0;
}

#cate-menu ul li.current a:link span,
#cate-menu ul li.current a:visited span,
#cate-menu ul ul li.current a:link span,
#cate-menu ul ul li.current a:visited span,
#cate-menu ul ul ul li.current a:link span,
#cate-menu ul ul ul li.current a:visited span,
#cate-menu ul li:hover a:link span,
#cate-menu ul li:hover a:visited span,
#cate-menu ul ul li:hover a:link span,
#cate-menu ul ul li:hover a:visited span,
#cate-menu ul ul ul li:hover a:link span,
#cate-menu ul ul ul li:hover a:visited span {
  color: #345bab;
}

#SideTopSeller .ProductDetails a {
  display: inline-block;
  margin-bottom: 5px;
  color: #216CF6;
  font-weight: bold;
  font-size: 16px !important;
  text-decoration: none;
  transition: all 0.3s ease-out;
}

#SideTopSeller .ProductList li:hover a {
  background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
  background-clip: text;
  color: transparent;
}

#cate-menu .defaultTitle span,
#SideTopSeller .defaultTitle span,
.newsLastest .defaultTitle span {
  padding-left: 15px;
}

.defaultContent li.level0.first {
  border: medium none;
}

/* ============================================================================
   NAVIGATION MODULE - SECTION 4: VERTICAL MENU
   ============================================================================ */

#vertical-menu {
  width: 100%;
}

#vertical-menu ul {
  margin: 0;
  padding: 0;
}

#vertical-menu ul li {
  list-style: none;
  margin: 0;
  z-index: 999;
}

#vertical-menu ul li:hover {
  position: relative;
}

#vertical-menu ul li a {
  color: #3d3d3d;
  display: block;
  font-size: 14px;
  font-weight: bold;
  padding: 7px 0 7px 9px;
}

#vertical-menu ul li a:hover {
  color: #345bab;
}

#vertical-menu ul li.current a {
  color: #345bab;
}

#vertical-menu ul ul {
  display: none;
  left: 184px;
  position: absolute;
  top: 0;
  background: url("icon-menu2.png") no-repeat scroll 1px 7px rgba(0, 0, 0, 0);
  padding-left: 6px;
}

#vertical-menu ul ul li {
  border: none;
  z-index: 999;
  background-color: #074791;
  margin-bottom: 3px;
}

#vertical-menu ul ul li a {
  font-size: 12px;
  color: #fff;
  text-transform: none;
}

#vertical-menu ul ul li.first {
  border-top: none;
}

#vertical-menu ul li:hover ul {
  display: block;
}

#vertical-menu ul ul li a,
#vertical-menu ul ul li.level1 a {
  background: none;
  border-bottom: none;
  color: #fff;
  display: block;
  font-weight: normal;
  margin: 0;
  padding: 7px 0 7px 14px;
}

#vertical-menu ul ul li a:hover {
  background-color: #ffd700;
  color: #000;
  padding: 7px 0 7px 14px;
  border-bottom: none;
  margin: 0;
}

#vertical-menu ul ul li.level1 ul li.level2 a {
  background: none;
  color: #fff;
  padding: 7px 0 7px 14px;
  border-bottom: none;
  font-weight: normal;
  margin: 0;
}

#vertical-menu ul ul li.level1 ul li.level2 a:hover {
  background-color: #ffd700;
  color: #000;
  padding: 7px 0 7px 14px;
  border-bottom: none;
  margin: 0;
}

#vertical-menu ul ul li.first a {
  border: none;
}

#vertical-menu ul ul li {
  width: 160px;
  float: left;
  display: inline;
}

#vertical-menu li:hover ul li ul {
  display: none;
}

#vertical-menu ul ul li ul {
  left: 160px;
  z-index: 999;
}

#vertical-menu ul ul li:hover ul {
  display: block;
}

/* ============================================================================
   NAVIGATION MODULE - SECTION 5: MENU EFFECTS (Water Fill, Hover)
   ============================================================================ */
#menu-container .nav.navbar-nav {
  background: #1da3cf;
  border-radius: 30px;
  padding: 0 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Khi scroll - thanh menu bo tròn và có shadow đẹp hơn */
#Menu.is-sticky #menu-container .nav.navbar-nav {
  border-radius: 30px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

#menu-container .navbar-nav>li {
  margin: 10px 2px;
  border-radius: 18px;
}

#menu-container .navbar-nav>li:last-child {
  margin-right: 0;
}

#menu-container .navbar-nav>li a {
  color: #fcffff;
}

#menu-container .navbar-nav>li>ul>li a {
  color: black;
  font-size: 18px;
}

#menu-container .navbar-nav>li>ul {
  border-radius: 6px;
  border: 1px solid #d8d8d8;
  transition: all 0.3 ease-in-out;
}

#menu-container .navbar-nav>li>ul>li {
  border-bottom: 1px dashed #f0f0f0;
  border-radius: 30px;
  transition: all 0.2s ease-in-out;
}

#menu-container .navbar-nav>li>ul>li:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
}

#menu-container .navbar-nav>li>ul>li:last-child {
  border-bottom: none;
}

#menu-container .nav>li>a {
  position: relative;
  /* Để định vị các lớp hiệu ứng bên trong */
  overflow: hidden;
  /* Ẩn phần nước lan ra ngoài khung */
  z-index: 1;
  /* Đưa nội dung chữ lên lớp trên cùng */
  background-color: transparent !important;
  /* Tắt màu nền mặc định cũ */

  /* Transition cho Font chữ */
  transition: font-size 0.25s ease-out, color 0.25s ease-out;
}

/* 2. Lớp "Dòng nước" (Water Fill) - ::before */
#menu-container .nav>li>a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  /* Bắt đầu từ tâm, hình tròn nhỏ */
  width: 150%;
  padding-bottom: 150%;
  /* Mẹo tạo hình tròn tỉ lệ 1:1 dựa trên width */
  border-radius: 50%;

  /* Màu nền khi hover (Màu trắng như bạn yêu cầu) */
  background-color: #ffffff;

  /* Trạng thái ban đầu: Thu nhỏ về 0 và nằm giữa */
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.5;
  z-index: -1;
  /* Nằm dưới chữ */

  /* Animation lan tỏa */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Lớp "Viền Gradient" (Outline) - ::after */
#menu-container .nav>li>a::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Phủ kín thẻ a */
  border-radius: 4px;
  /* Bo góc trùng với nút */
  padding: 2px;
  /* Độ dày của viền */


  /* Kỹ thuật Masking: Chỉ hiện viền, đục thủng ở giữa */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  /* Trạng thái ban đầu: Ẩn */
  opacity: 0;
  z-index: -1;
  /* Nằm dưới chữ nhưng trên background gốc */

  /* Animation: Hiện ra sau khi nước đã lan xong */
  transition: opacity 0.2s ease;
  transition-delay: 0s;
  /* Mặc định không delay khi chuột rời đi */
}

/* A. Kích hoạt dòng nước */
#menu-container .nav>li>a:hover::before,
#menu-container .nav>li>a:focus::before {
  transform: translate(-50%, -50%) scale(1);
  /* Lan đầy khung */
  opacity: 1;
}

/* B. Kích hoạt viền Gradient (Có Delay) */
#menu-container .nav>li>a:hover::after,
#menu-container .nav>li>a:focus::after {
  opacity: 1;
  transition-delay: 0.3s;
  /* QUAN TRỌNG: Chờ 0.3s (nước lan xong) mới hiện viền */
}

#menu-container .nav>li>a:hover,
#menu-container .nav>li>a:focus {
  /* Tăng kích thước font thêm ~2px */
  /* Lưu ý: Font gốc web bạn là 14px thì set 16px, nếu 16px thì set 18px */
  /* Tôi dùng scale để mượt hơn, tránh vỡ layout menu */
  transform: scale(1.1);

  /* Màu chữ khi hover (Lấy từ setting của bạn) */
  color: #ff0000;

  /* Bóng chữ nhẹ để nổi trên nền trắng */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.child-sub-dropdown {
  list-style: none;
  position: absolute;
  background: #fff;
  top: -3px;
  left: 218px;
  width: 250px;
  border: 1px solid #d8d8d8;
  visibility: hidden;
  z-index: 1000;
  opacity: 0;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.2s ease 0s;
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  -o-transform: translateY(-8px);
  border-radius: 8px;
}

.child-sub:hover .child-sub-dropdown {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
}

.child-sub-dropdown li {
  border-radius: 30px;
  box-sizing: border-box;
  border-bottom: 1px dashed #f0f0f0;
}

.child-sub-dropdown li:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
}

.child-sub-dropdown li:hover>a {
  color: #1da3cf !important;
}

.child-sub-dropdown>li>a {
  color: #333333 !important;
}

#cphMain_ctl00_ContentPane {
  display: inline-block;
}

#slider_img .owl-controls {
  position: absolute;
  bottom: 0;
  left: 45%;
}

#slider_img .owl-controls .owl-page.active span {
  background: #e35415;
}

#slider_img .owl-controls .owl-page span {
  background: #0c6ac9;
}

/************** PRODUCT DETAIL ************/
#product-details-bottom {
  margin-bottom: 40px;
}

#product-details-bottom .defaultContent.BlockContent {
  display: inline-block;
}

.title-product-detail {
  font-size: 20px;
}

.VariationManufacture {
  color: #888;
}

.ProductManufacture {
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 5px;
}

.price {
  color: #ff0000;
  font-size: 13px;
}

.VariationProductPrice.price {
  font-size: 28px;
}

.ProductField {
  margin-left: 15px;
}

.ProductField .label {
  color: #333;
  font-size: 13px;
}

.LabelQuantityInput {
  width: 35%;
  float: left;
}

.detail-des-left .tab-content {
  padding: 30px 15px;
  border: 1px solid #f0f0f0;
}

/************** PRODUCT *********/
#product-top-sub-left ul.slides li img {
  width: 100%;
}

#wrap-detail #detail-breadcrumb {
  display: inline-block;
  list-style: none;
  margin-top: 15px;
}

#wrap-detail #detail-breadcrumb li {
  float: left;
  margin: 0 5px 0 0;
  color: #505050;
  text-transform: uppercase;
}

#wrap-detail .detail-des-left {
  margin-bottom: 10px;
}

#wrap-detail .detail-content-right {
  margin-top: 15px;
}

#wrap-detail .detail-content-right #info-price {
  text-transform: uppercase;
  font-size: 20px;
  color: #adadad;
  margin-top: 0;
}

#wrap-detail .detail-content-right .price {
  color: #ff0000;
  font-weight: bold;
}

#wrap-detail .bt-buy {
  background: #ff5301;
  text-align: center;
  display: inline-block;
  padding: 5px 10px;
  color: white;
  font-weight: bold;
}

#wrap-detail .bt-buy span {
  width: 100%;
  display: inline-block;
  font-weight: normal;
}

#wrap-detail .bt-buy:hover {
  text-decoration: none;
}

#wrap-detail .bt-cart {
  display: inline-block;
  background: #1a1819;
  width: 100%;
  margin-top: 10px;
  padding: 15px 10px;
  color: white;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
}

#wrap-detail #title-product-left {
  color: #539c43;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
}

#wrap-detail #title-why {
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 16px;
  margin-top: 10px;
}

#wrap-detail #list-why {
  display: inline-block;
}

#wrap-detail #list-why li {
  background: url('icon-why.png') no-repeat center left;
  padding-left: 20px;
  margin-bottom: 5px;
}

#wrap-detail #title-free {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
}

#wrap-detail #list-cart {
  display: inline-block;
}

#wrap-detail #list-cart li {
  float: left;
  margin-right: 10px;
}

#wrap-detail #detail-banner-bottom {
  margin-top: 40px;
}

#wrap-detail .detail-content-right p {
  margin-bottom: 5px;
}

#wrap-detail #detail-tab-left {
  width: 100%;
  margin-bottom: 10px;
  margin-left: 0;
}

#wrap-detail #detail-tab-left li {
  display: inline;
  margin-right: 20px;
  text-transform: uppercase;
  padding: 10px 5px;
  border: 1px solid #f0f0f0;
}

#wrap-detail #detail-tab-left li a {
  color: #959595;
  font-weight: bold;
  font-size: 13px;
}

#wrap-detail #detail-tab-left li:hover a {
  text-decoration: none;
}

#wrap-detail #detail-tab-left li.active a {
  color: #000;
  font-weight: bold;
}

#detail-banner-bottom {
  clear: both;
}

#wrap-detail #product-top-sub-left {
  position: relative;
}

#wrap-detail #product-top-sub-left #carousel ul.slides li {
  display: block !important;
  border: 1px solid #f0f0f0;
  margin-bottom: 3px;
}

#wrap-detail #product-top-sub-left #carousel {
  left: 0;
  float: left;
}

#wrap-detail .box-detail-tab {
  padding: 0;
}

/*********** DETAIL DES *************/
#wrap-detail #detail-des {
  clear: both;
  padding-top: 30px;
}

#detail-tab-right {
  padding-bottom: 20px;
}

#detail-tab-right h3 {
  color: #000;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: bold;
  border-bottom: 3px solid #000;
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

#detail-tab-right li {
  border-bottom: 1px solid #f0f0f0;
}

/************* UPDATE **************/
.btn:focus,
.btn:active:focus,
.btn.active:focus,
a:focus {
  outline: none !important;
  outline-offset: none !important;
}

#wrap-number-quantily {
  width: 100%;
}

#wrap-number-quantily #quantity {
  width: 55px;
  text-align: center;
  border-radius: 5px;
}

#click-sub-menu-left .rote {
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}

#click-sub-menu-left .icon-right {
  margin-left: 10px;
}

.cate-menu-content li:hover a {
  text-decoration: none;
}

.detail-content-left {
  padding: 0 !important;
}

.detail-content-left .slider,
.detail-content-left .carousel {
  margin-left: 0;
  margin-right: 0;
}

#addToCart.btn.disabled {
  display: none;
}

#addToCart {
  background: none;
}

.selector-wrapper label {
  width: 100%;
}

.single-option-selector {
  background: url("select-detail.png") no-repeat scroll right center #F7F7F7;
  border: 1px solid #DBDBDB;
  color: #595959;
  height: 34px;
  padding: 6px 27px 6px 8px;
  text-indent: 0.01px;
  text-overflow: "";
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  margin-bottom: 10px;
}

.VariationProductPrice .price-detail del {
  font-size: 14px;
}

/* READ MORE START */

/* 1. Khung nút chính (Container) */
.read-more {
  position: relative;
  /* Chuẩn bị tọa độ cho lớp hiệu ứng */
  width: 70%;
  max-width: 400px;
  /* Giới hạn độ rộng để không bị bè ra trên màn hình to */
  margin: 20px auto;
  /* Căn giữa và tạo khoảng cách trên dưới */

  /* Thiết kế hình khối viên thuốc (Pill Shape) */
  border-radius: 50px;
  background-color: #1549a4;
  /* Xanh chủ đạo VinTechCo (thay cho màu đỏ cũ) */
  box-shadow: 0 4px 15px rgba(21, 73, 164, 0.3);
  /* Bóng đổ xanh nhẹ tạo chiều sâu */

  overflow: hidden;
  /* Cắt bỏ phần màu tràn ra ngoài góc bo */
  z-index: 1;
  /* Đưa nút lên lớp hiển thị */
  transition: all 0.3s ease;

  /* Căn chỉnh nội dung bên trong */
  text-align: center;
  padding: 0;
  /* Padding sẽ được xử lý ở thẻ a để tăng diện tích click */
  border: 0.5px solid #ccc;
  /* Giữ layout không bị giật khi thêm border */
}

/* 2. Nội dung chữ (Link) */
.read-more-product {
  display: block;
  /* Biến thẻ a thành khối để click được toàn bộ nút */
  padding: 12px 30px;
  /* Padding thực tế của nút */

  /* Typography chuẩn Enterprise */
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff !important;
  /* Luôn màu trắng */
  text-decoration: none !important;

  position: relative;
  z-index: 2;
  /* Chữ phải nằm trên lớp màu gradient */
  transition: letter-spacing 0.3s ease;
  /* Hiệu ứng giãn chữ nhẹ khi hover */
}

/* 3. LỚP HIỆU ỨNG TRÀN MÀU (CLAY SPREAD LAYER) */
.read-more::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  /* Đặt ở chính giữa chiều ngang */
  transform: translateX(-50%);
  /* Căn chỉnh chính xác tâm */

  width: 0%;
  /* Ban đầu thu nhỏ bằng 0 */
  height: 100%;

  /* Gradient 4 màu: Vàng -> Đỏ -> Xanh Lá -> Xanh Dương */
  background: linear-gradient(90deg,
      #00d2ff 0%,
      /* Xanh sáng (Cyan) */
      #3a7bd5 50%,
      /* Xanh dương trung tính */
      #005c97 100%
      /* Xanh đậm */
    );

  z-index: -1;
  /* Nằm dưới chữ */
  border-radius: 50px;
  /* Bo tròn theo nút cha */

  /* Animation vật lý: Bắt đầu nhanh, kết thúc chậm (như ấn tay vào đất sét) */
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0.9;
  /* Hơi trong suốt nhẹ để màu quyện đẹp hơn */
}

/* --- TRẠNG THÁI TƯƠNG TÁC (Desktop Hover + Mobile Touch) --- */

.read-more:hover,
.read-more:active {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  /* Bóng đổ đậm hơn khi nhấn */
  transform: translateY(-2px);
  /* Nhấc nút lên nhẹ */
}

/* Kích hoạt hiệu ứng tràn màu */
.read-more:hover::before,
.read-more:active::before {
  width: 102%;
  /* Mở rộng ra 102% để lấp đầy hoàn toàn */
}

/* Hiệu ứng giãn chữ nhẹ */
.read-more:hover .read-more-product {
  letter-spacing: 2px;
  /* Chữ giãn ra tạo cảm giác thoáng đạt */
}

/* Responsive Mobile */
@media screen and (max-width: 768px) {
  .read-more {
    width: 85%;
    /* Rộng hơn trên điện thoại để dễ bấm */
  }

  .read-more-product {
    font-size: 16px;
    padding: 10px 20px;
  }
}



/* READ MORE END */

.defaultTitle.TitleContent.titlecollection {
  width: 100%;
  display: inline-block;
  border-bottom: 2px solid #1549a4;
}

.defaultTitle.TitleContent.titlecollection .browse-tags span {
  font-size: 13px;
  font-weight: normal;
  margin-right: 5px;
}

.defaultTitle.TitleContent.titlecollection .browse-tags span.custom-dropdown {
  padding-left: 0;
}

.pagination-list li {
  border: 1px solid #e1e1e1;
  display: inline-block;
  margin: 1px;
  border-radius: 2px;
}

.pagination-list li a {
  color: #04478E;
  text-decoration: none;
}

.pagination-list li.current {
  background: #04478E;
  color: white;
}

.pagination-list li.current a {
  color: white;
}

.pagination-list li a {
  padding: 5px 10px;
  display: inline-block;
}

.pagination-list li a:hover {
  background: #04478E;
  color: white;
}

.content-product-list,
.defaultContent.BlockContent {
  border-right: 1px solid #f0f0f0;
  border-left: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
  display: inline-block;
  border-radius: 8px;
  width: 100%;
}

#layout-page-search .content-product-list {
  width: 100%;
  border: none;
}




.list-menu-login {
  display: none;
  margin: 0 5px 0 0;
  list-style: none;
}

.list-menu-login li {
  float: left;
  margin-right: 5px;
  margin-left: 10px;
  margin-bottom: 0;
  padding: 15px 0 12px;
}

.list-menu-login i {
  color: #ffffff;
}

.list-menu-login li a {
  color: #ffffff;
}
#layout-page-main {
  padding-left:10px;
}
#layout-page-login,
#layout-page-register,
#customer-activate {
  width: 270px;
  margin: 0 auto;
}

#layout-page-login .input-group,
#layout-page-register .input-group,
#customer-activate .input-group {
  margin-bottom: 10px;
  width: 270px;
}

#layout-page-login .input-group span,
#layout-page-register .input-group span {
  width: 40px;
}

#layout-page-login .action_bottom input,
#layout-page-register .action_bottom input,
#customer-activate .action_bottom input {
  margin-bottom: 10px;
  background: #1549a4;
  color: white;
  padding: 10px;
}

#layout-page-login .action_bottom:hover input,
#customer-activate .action_bottom:hover input {
  text-decoration: none;
  background: #04478E;
}

.title-customers,
.title-register {
  text-transform: uppercase;
  font-size: 24px;
  text-align: center;
  margin-bottom: 10px;
}

#customer_orders {
  margin-top: 10px;
}

#customer_user table,
#address_tables table,
#layout-page-card table {
  margin-top: 10px;
  margin-bottom: 10px;
}

#layout-page-card .cart-buttons #checkout {
  background-image: url('back-arrow.png');
  background-repeat: no-repeat;
  background-position: 15px 10px;
  padding: 12px;
  background-color: #444;
  border-radius: 6px;
  display: inline-block;
  color: #FFF;
  box-sizing: border-box;
  text-transform: none;
  text-align: center;
  width: 180px;
  font-size: 14px;
  border: none;
  margin-bottom: 5px;
}

#layout-page-card .cart-buttons #checkout:hover {
  background: black;
  color: white;
  background-image: url('back-arrow.png');
  background-repeat: no-repeat;
  background-position: 15px 10px;
}

#layout-page-card .cart-buttons #update-cart {
  background-color: #1549a4;
  padding: 12px;
  border-radius: 6px;
  display: inline-block;
  color: #FFF;
  box-sizing: border-box;
  text-transform: none;
  text-align: center;
  width: 180px;
  font-size: 14px;
  border: none;
  margin-bottom: 5px;
}

#layout-page-card .cart-buttons #update-cart:hover {
  background: #04478e;
  color: white;
}

#customer_orders table tr th,
#customer_orders table tr td,
#customer_user table tr th,
#customer_user table tr td,
#address_tables table tr th,
#address_tables table tr td,
#layout-page-card table tr th,
#layout-page-card table tr td,
#order_payment table tr th,
#order_payment table tr td,
#order_shipping table tr th,
#order_shipping table tr td,
#order_details table tr th,
#order_details table tr td {
  padding: 10px 5px;
  border-right: 1px solid #f0f0f0;
  text-align: center;
}

#customer_orders table tr,
#customer_user table tr,
#address_tables table tr,
#layout-page-card table tr,
#order_payment table tr,
#order_shipping tr,
#order_details table tr {
  border: 1px solid #f0f0f0;
}

#layout-page-card .inner-left {
  padding: 0 !important;
}

#layout-page-card .inner-left #note {
  padding: 10px;
  border: 1px solid #ddd;
}

#layout-page-card table tr td input.item-quantity {
  width: 50px;
}

#layout-page-card table tr .price {
  color: black;
}

ul li.level0 ul.sub-menu-left {
  display: none;
}

ul li.level0.open ul.sub-menu-left {
  display: block;
}

.customer_address.edit_address .input-group .input-group-addon {
  width: 40px;
}

.customer_address.edit_address .input-group {
  margin-bottom: 5px;
}

.customer_address.edit_address .action_bottom {
  margin-bottom: 10px;
}

.customer_address.edit_address .action_bottom .btn {
  background: #333;
  color: white;
  padding: 10px;
}

.customer_address.edit_address .action_bottom .btn:hover {
  background: black;
}

.newsLastest_Image,
.newsLastest_Title {
  padding: 0 !important;
}

.newsLastest_Image a div img {
  width: 100%;
}

.header-menu-top {
  /* PHASE 1: Foundation - Tách menu + Gradient background + Border radius */

  /* Step 1.1: Margin tách khỏi menu */
  margin-top: 12px;
  margin-bottom: 10px;

  /* Step 1.2: Gradient background thay thế ảnh tĩnh */
  background: linear-gradient(90deg, #667eea 0%, #764ba2 25%, #f093fb 75%, #f5576c 100%);
  background-size: 200% 100%;

  /* Step 1.3: Border radius đều 4 góc */
  border-radius: 8px;

  /* PHASE 2: Visual Enhancement */
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);

  /* Layout */
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Position for pseudo-elements (shimmer, hot badge) */
  position: relative;
  overflow: hidden;

  /* Text base */
  line-height: 26px;
  color: #ffffff;
}

.header-menu-top .clear {
  display: none;
}

/* PHASE 3: Shimmer Effect Layer */
.header-menu-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.2) 50%,
      transparent 100%);
  animation: news-shimmer 3s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

/* PHASE 4: Hot Badge - Đặt sau title */
/* 1. Khung chứa chính (Wrapper) */
.header-menu-top .box-left-blog {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  max-width: 100%;
  height: auto;
  min-height: 28px;
  margin-left: 0;
  /* Bỏ margin-left để tránh rãnh đỏ */
  position: relative;
  z-index: 2;
}


/* 2. Badge "TIN TỨC" (Thẻ P) */
.header-menu-top .blog-artical {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Không bị co lại khi màn hình nhỏ */

  margin: 0 10px 0 0 !important;
  padding: 0 12px !important;
  height: 26px;
  /* Chiều cao cố định cho badge */

  font-family: "Markazitext"
    , serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;

  /* Gradient Đỏ Cam */
  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(255, 75, 43, 0.4);
  position: relative;
  z-index: 2;
  transition: all 0.35s ease-in;
  animation: badge-pulse 2s infinite;
}

.header-menu-top .blog-artical:hover {
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(135deg, #c6dbef 0%, #4292c6 100%);
}

/* Icon tia sét (FontAwesome) */
.header-menu-top .blog-artical::before {
  content: "\f0e7";
  font-family: "FontAwesome";
  font-weight: 900;
  margin-right: 6px;
  font-size: 16px;
  color: #fff;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  animation: flash-icon 1s infinite alternate;
}

/* 3. Link chứa tiêu đề bài viết (Thẻ A) - PHASE 2: Simplified */
.header-menu-top .box-left-blog .blog-title {
  flex-grow: 1;

  font-family: "Markazitext", serif;
  font-weight: 700;
  font-size: 21px;
  text-decoration: none;
  line-height: 1.4;

  white-space: normal;
  word-wrap: break-word;
  padding: 2px 0;

  /* Đơn giản hóa: Màu trắng với text-shadow */
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

/* Hiệu ứng Hover - Đơn giản hóa */
.header-menu-top .box-left-blog .blog-title:hover {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* 4. Animations */
@keyframes badge-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 75, 43, 0.7);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(255, 75, 43, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 75, 43, 0);
  }
}

@keyframes flash-icon {
  from {
    opacity: 1;
    text-shadow: 0 0 5px #fff;
  }

  to {
    opacity: 0.5;
    text-shadow: none;
  }
}

@keyframes rainbow-flow {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

/* PHASE 3: Shimmer Animation */
@keyframes news-shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

/* PHASE 4: Hot Badge Bounce Animation */
@keyframes hot-bounce {
  transform: translateY(-10%) scale(0.7);
}

50% {
  transform: translateY(0%) scale(0.9);
}
}

/* ============================================================================
   PHASE 5: RESPONSIVE - NEWS RIBBON
   ============================================================================ */

/* 5.1 Tablet (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .header-menu-top {
    padding: 10px 12px;
  }

  .header-menu-top::after {
    right: 60px;
    font-size: 11px;
    padding: 3px 8px;
  }

  .header-menu-top .box-left-blog .blog-title {
    font-size: 19px;
  }
}

/* 5.2 Mobile (< 768px) */
@media screen and (max-width: 767px) {
  .header-menu-top {
    margin-top: 8px;
    padding: 10px;
    border-radius: 6px;
  }

  /* Tắt shimmer trên mobile để tối ưu hiệu năng */
  .header-menu-top::before {
    animation: none;
    display: none;
  }

  /* Ẩn Hot badge trên mobile */
  .header-menu-top .box-left-blog::after {
    display: none;
  }

  .header-menu-top .box-left-blog {
    margin-left: 5px;
  }

  .header-menu-top .blog-artical {
    font-size: 14px;
    height: 24px;
    padding: 0 8px !important;
    margin-right: 8px !important;
  }

  .header-menu-top .box-left-blog .blog-title {
    font-size: 17px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* 5.3 Small Mobile (< 480px) */
@media screen and (max-width: 479px) {
  .header-menu-top {
    padding: 8px;
  }

  /* Ẩn hot badge trên màn hình nhỏ */
  .header-menu-top .box-left-blog::after {
    display: none;
  }

  /* Badge: chỉ hiện icon */
  .header-menu-top .blog-artical {
    padding: 0 6px !important;
    font-size: 0;
    /* Ẩn text */
  }

  .header-menu-top .blog-artical::before {
    margin-right: 0;
    margin-left: 3px;
    font-size: 14px;
  }

  .header-menu-top .box-left-blog {
    max-width: 85%;
  }

  .header-menu-top .box-left-blog .blog-title {
    font-size: 15px;
    -webkit-line-clamp: 1;
  }

  #layout-page-main {
  padding-left:1px;
}
  
}

/* ============================================================================
   FLOATING CART BUTTON - Fixed bottom right
   ============================================================================ */
.floating-cart-btn {
  position: fixed;
  bottom: 60px;
  right: 20px;
  z-index: 9999;

  width: 56px;
  height: 56px;
  border-radius: 50%;

  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5),
    0 2px 5px rgba(0, 0, 0, 0.2);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: all 0.3s ease;
}

.floating-cart-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6),
    0 4px 10px rgba(0, 0, 0, 0.3);
}

.floating-cart-btn i,
.floating-cart-btn .fa {
  font-size: 22px;
  color: #ffffff;
}

/* Cart badge count */
.floating-cart-btn .cart-count {
  position: absolute;
  top: -5px;
  right: -5px;

  min-width: 20px;
  height: 20px;
  padding: 0 5px;

  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;

  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ẩn cart cũ trong header-menu-top vì đã có floating cart */
.header-menu-top .cartQty,
.header-menu-top .mini-cart,
.header-menu-top #TopMenu,
#TopMenu li.CartLink.topMenu_Cart {
  display: none !important;
}

/* Mobile adjustments */
@media screen and (max-width: 767px) {
  .floating-cart-btn {
    width: 50px;
    height: 50px;
    bottom: 50px;
    right: 10px;
  }

  .floating-cart-btn i,
  .floating-cart-btn .fa {
    font-size: 20px;
  }
}

/*************** BLOG **********/
.wrap-comment-blog {
  border-top: 1px dotted #ddd;
}

.sidebar-left-blog-article {
  padding-left: 0 !important;
  margin-top: 15px;
}

.sidebar-left-blog-article #main-content-left {
  width: 100%;
}

#article .box-blog .title-article {
  margin-top: 0;
  font-size: 18px;
  text-align: center;
  display: none;
}

#article .entry-meta {
  margin-bottom: 5px;
  display: none;
}

.box-blog-img-left {
  padding: 0 15px 0 0 !important;
}

.box-blog .post.format-standard {
  overflow: hidden;
  display: inline-block;
  width: 100%;
  height: 300px;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 30px;
  box-shadow: rgba(0, 0, 0, 0.35) 0 2.5px 2.5px;
}

.box-blog .post.format-standard .entry-thumbnail p {
  padding: 0;
  margin: 0;
}

.box-blog .post.format-standard .entry-thumbnail img,
.box-blog .post-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1.1;
  border-radius: 13px;
}

.colum-right-blog {
  padding: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.colum-right-blog .entry-title {
  margin: 0;
  text-align: center;
  padding: 0 3px;
  height: 30%;
  display: flex;
  align-items: center;
}

.colum-right-blog a {
  color: #428bca;
  text-decoration: none;
  transition: transform 0.3s ease-out, color 0.3s ease-out;
}

.colum-right-blog a:hover {
  color: #04478E;
  text-decoration: none;
}

.colum-right-blog .entry-meta,
.colum-right-blog .author a {
  width: 10%;
  color: #888;
  font-style: italic;
  margin-bottom: 5px;
}

.colum-right-blog .entry-title a {
  text-align: center;
  font-size: 24px;
  animation: color-blog-title-change 10s infinite;
  line-height: 1.3;
}

@keyframes color-blog-title-change {
  0% {
    color: #e32d2d;
  }

  33% {
    color: #4b8ed8;
  }

  66% {
    color: #000000;
  }

  100% {
    color: #e32d2d;
  }
}

.colum-right-blog .entry-content {
  height: 50%;
  overflow: hidden;
  border-top: 1px solid transparent;
  background-image: linear-gradient(90deg, transparent 0%, transparent 10%, #000000 50%, #000000 50%, transparent 90%, transparent 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
}

.colum-right-blog .entry-content p {
  padding: 5px 0 0;
  width: 95%;
  height: 100%;
  display: inline-block;
  margin: 0;
  font-size: 16px;
  text-align: justify;
}

.colum-right-blog .entry-tags {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20%;
}

.colum-right-blog .entry-tags a {
  color: white;
  font-size: 16px;
  font-weight: bold;
  background: #4b8ed8;
  padding: 15px 40px;
  border-radius: 30px;
  display: inline-block;
}

.colum-right-blog .entry-tags a:hover {
  text-decoration: none;
  background: #245dc6;
}

.colum-right-blog .entry-meta span,
#layout-page-article .entry-meta span,
#layout-page-article .entry-meta span a {
  margin-right: 15px;
  color: #888;
  font-style: italic;
  font-family: "Markazitext"
    , serif;
}

#layout-page-article .box-blog {
  margin: 0 0 5px;
  padding-left:8px;
}

#layout-page-article .padding_none {
  padding: 0 !important;
}

#layout-page-article .body-content img {
  margin: 0 auto;
  display: block;
  width: 100%;
}

#layout-page-article .body-content {
  display: inline-block;
  width: 100%;
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  #layout-page-article .box-blog {
    padding:1px 0;
  }
  
  .box-blog .post.format-standard {
    padding-bottom: 8px;
    height: auto;
  }

  .box-blog .box-blog-img-left {
    padding: 0 !important;
  }

  .colum-right-blog .entry-title a {
    color: red;
  }

  .colum-right-blog .entry-content {
    display: none;
    height: 48%;
  }
}

/******* FORM BINH LUAN ***********/
.wrap-comment-blog,
#comments {
  padding: 0 !important;
  margin-top: 10px;
}

#comments .comment_form form input,
#comments .comment_form form textarea {
  width: 80%;
  margin: 10px 0;
  padding: 5px;
  border-radius: 5px;
}

#comments .comment_form form .notice {
  margin: 10px 0;
}

#comments #comment-submit {
  display: inherit;
}

.wrap-comment-blog .title-bl {
  display: inline-block;
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
  padding: 5px;
}

.wrap-comment-blog .title-bl h2 {
  text-transform: uppercase;
  font-size: 18px;
}

#binhluan .author strong {
  font-size: 15px;
  float: left;
}

#binhluan .author {
  display: inline-block;
  width: 100%;
  margin-bottom: 0;
  margin-top: 5px;
  padding-left: 0;
}

#binhluan .author span {
  font-size: 12px;
  text-align: right;
  color: #888;
  font-style: italic;
  float: right;
}

#content-commet-blog {
  clear: both;
}

.wrap-comment-blog .subtext.success {
  color: #50a00b;
}

.wrap-comment-blog .subtext.error {
  color: red;
}

#binhluan .comment {
  display: block;
  /* FIX: display:blog -> block */
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 5px;
}

#binhluan .comment div {
  padding-left: 30px;
  font-style: italic;
  color: #888;
}

.success {
  color: #50a00b;
}

/********* SIDEBAR RIGHT BLOG *********/
.sidebar-right-blog .widget-title {
  text-transform: uppercase;
  font-size: 20px;
  padding-bottom: 10px;
  padding-left: 0;
  margin-top: 0;
}

.sidebar-right-blog .media-list {
  text-transform: uppercase;
  border: 2px solid #e4e4e4;
  background-color: #ffffff;
  margin: 0 0 30px;
  padding: 20px;
  position: relative;
}

.sidebar-right-blog .media-list li {
  border-bottom: 1px solid #f0f0f0;
}

.sidebar-right-blog .media-list li:last-child {
  border-bottom: none;
}

.sidebar-right-blog .media-list img {
  position: absolute;
  top: -4px;
  left: -2px;
}

.sidebar-right-blog .media-list li a {
  color: black;
}

.sidebar-right-blog .media-list li:hover a {
  color: #04478E;
}

#content-page-contact {
  margin-top: 10px;
}

#SideTopSeller ul.ProductList li img {
  width: 100%;
  height: 100%;
}

.box-product-first .ProductDetails {
  height: auto;
  padding: 5px 0 0;
}

#layout-page-search .title-search {
  text-align: center;
  font-size: 25px;
}

#layout-page-search .text-search-error {
  font-size: 23px;
}

#layout-page-search .expanded-message {
  text-align: center;
}

#layout-page-search .expanded-message .search-field .inputbox {
  padding: 10px;
  margin-top: 10px;
  width: 50%;
  border: 3px solid #ddd;
}

#layout-page-search .expanded-message .search-field .btn-search {
  background: #2a6496;
  color: white;
  padding: 10px 10px 7px;
}

#contactFormWrapper .lienhe {
  padding: 5px 10px;
  background: #04478E;
  color: white;
}

.title-card {
  text-align: center;
  text-transform: uppercase;
  font-size: 30px;
}

.wrap-add-address #add_address {
  margin-top: 10px;
}

#layout-page-order .title-order-date {
  text-transform: uppercase;
  font-size: 24px;
  text-align: center;
  margin-bottom: 10px;
}

.align-center {
  text-align: center;
}

#layout-page-card form table tr td.item span {
  display: inline-block;
  width: 100%;
  color: black;
  font-weight: bold;
}

#layout-page-card form table tr td.remove i {
  color: black;
}

#layout-page-card form table tr td.remove i:hover {
  color: #04478e;
}

#layout-page-card form table tr td.item strong {
  color: #04478e;
}

#layout-page-card form table tr td.qty input {
  text-align: center;
}

.sidebar-right-blog {
  padding-right: 0 !important;
}

.wrap-products .ProductField li span.text-product-number {
  font-weight: bold;
}

.wrap-products .ProductField li span.product-number-right {
  font-weight: bold;
  color: #888;
}

.flexslider .slides>li {
  margin-right: 3px;
}

#collection-list .collection-item img {
  width: 100%;
}

#collection .main-pagination {
  margin-bottom: 10px;
}

#layout-page-404 {
  text-align: center;
}

.text-footer-list {
  font-weight: normal;
}

#detail-des .tab-content table {
  width: 100% !important;
}

#footer_3 li {
  color: #fff;
}

#footer_3 ul li span {
  color: #fff;
  font-weight: normal;
  margin-bottom: 2px;
}

#TextHTML-Module .defaultTitle.TextHTML-Title {
  margin: 0 0 5px;
}

#TextHTML-Module .DefaultModule img {
  width: 100%;
  height: auto !important;
}

.defaultContent.newsLastest-content .newsLastest_Title {
  padding: 10px 0 0 10px !important;
}

.ProductPrice .special-price {
  position: relative;
}

.ProductPrice .special-price span {
  display: block;
}

.ProductPrice .special-price span.price {
  bottom: 0;
  text-align: center;
  width: 100%;
  line-height: 30px;
}

.side-fiexd-banner img {
  height: 100%;
  max-width: 190px;
}

#article .main-content {
  font-family: "Markazitext"
    , serif !important;
}

#article .box-blog .title-article {
  margin-top: 0;
  font-size: 18px;
  text-align: center;
  display: none;
}

/* ============================================================================
   NAVIGATION MODULE - SECTION 6: MENU OVERRIDES & LOGIN MENU
   ============================================================================ */

#Menu .nav>li>a {
  padding: 10px 10px;
  border-radius: 18px;
}

.list-menu-login li {
  padding-right: 5px;
  padding-left: 5px;
}

.list-menu-login li:hover {
  background: #fff;
}

.list-menu-login li:hover a {
  color: #101000;
}

.list-menu-login li:hover i {
  color: #101000;
}

.list-menu-login li a {
  text-decoration: none;
}

/* ============================================================================
   END OF NAVIGATION MODULE
   ============================================================================ */