/* =========================================================
   RESET
========================================================= */

.container {
  margin:auto;
  padding:0 15px;
}

.flex-between {
  display:flex;
  align-items:center;
  gap:9px;
}

/* =========================================================
   HEADER WRAPPER
========================================================= */

.site-header {

}

/* =========================================================
   TOP BAR
========================================================= */

.top-bar {
  background:linear-gradient(
      90deg,#081224 0%,#0d1d3a 100%
    );
  color:#d7e3ff;
  font-size:13px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.top-left {
  display:flex;
  align-items:center;
  gap:8px;
}

.top-left .text {
  opacity:0.75;
}

.top-bar .hotline {
  background:linear-gradient(
      135deg,#ffb300,#ff8f00
    );
  color:#081224;
  padding:4px 10px;
  border-radius:30px;
  font-weight:700;
  box-shadow:0 0 12px rgba(255,179,0,0.35);
}

.top-right {
  display:flex;
  gap:18px;
  flex:1;
  justify-content:flex-end;
}

.top-right span {
  opacity:0.9;
  transition:0.25s;
}

.top-right span:hover {
  color:#fff;
}

/* =========================================================
   MAIN HEADER
========================================================= */

.main-header {
  position:relative;
  padding:16px 0;
  /*border-bottom:1px solid rgba(255,255,255,0.05);
  */;
}

.main-header::after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:linear-gradient(
      90deg,transparent,rgba(255,179,0,0.45),transparent
    );
}

/* =========================================================
   LOGO
========================================================= */

.logo {
  max-width: 220px;
  flex:0 0 auto;
  margin:0 auto;
}

.logo img {
  max-height:75px;
  display:block;
}

/* =========================================================
   BRAND BADGE
========================================================= */

.brand-badge {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 4px 18px rgba(0,0,0,0.2);
}

.badge-text {
  font-size:11px;
  font-weight:700;
  color:#ffb300;
  margin-bottom:4px;
  letter-spacing:0.4px;
}

.brand-badge img {
  height:32px;
}

/* =========================================================
   SEARCH BOX
========================================================= */

.search-box {
  display:flex;
  flex:1;
  max-width:560px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  overflow:hidden;
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 4px 18px rgba(0,0,0,0.22);
  transition:0.3s;
}

.search-box:hover {
  border-color:rgba(255,179,0,0.25);
  box-shadow:0 0 18px rgba(255,179,0,0.12);
}

.search-box input {
  flex:1;
  padding:12px 16px;
  border:none;
  background:transparent;

  font-size:16px;
  outline:none;
  min-width:0;
  width:100%;
  font-size:16px;
}

.search-box input::placeholder {
  color:#333;
}

.search-box button {
  width:54px;
  border:none;
  cursor:pointer;
  background:linear-gradient(
      135deg,#ffb300,#ff8f00
    );
  color:#081224;
  font-weight:700;
  transition:0.25s;
}

.search-box button:hover {
  filter:brightness(1.05);
}

/* HIỆU ỨNG NHẤP NHÁY TỰ ĐỘNG SEARCH */

.search-field {
  caret-color:#000;
}

.search-box {
  position:relative;
}

.fake-placeholder {
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  
  pointer-events:none;
  white-space:nowrap;
  right: 35px; 
  overflow: hidden; 
  text-overflow: ellipsis;
}


.fake-placeholder::after {
  content:"|";
  margin-left:2px;
  animation:blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity:1;
  }
  50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes blink {
  0% {
    opacity:1;
  }
  50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes caretBlink {
  0% {
    caret-color:#000;
  }
  50% {
    caret-color:transparent;
  }
  100% {
    caret-color:#000;
  }
}

.search-field:focus {
  animation:caretBlink 1s infinite;
}

/* =========================================================
   HEADER ACTIONS
========================================================= */

.header-actions {
  display:flex;
  gap:10px;
  margin-left:auto;
}

.header-actions .item {
  position:relative;
  min-width:74px;
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  border-radius:16px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(8px);

  text-align:center;
  cursor:pointer;
  transition:0.25s;
}

.header-actions .item:hover {
  transform:translateY(-2px);
  background:rgba(255,179,0,0.1);
  border-color:rgba(255,179,0,0.25);
  box-shadow:0 10px 22px rgba(0,0,0,0.3);
}

.header-actions .item a {
 
  text-decoration:none;
}

.header-actions .item span {
  display:block;
  font-size:12px;
  padding-top:6px;
}

/* =========================================================
   CART
========================================================= */

.cart {
  position:relative;
}

.cart-count {
  position:absolute;
  top:2px;
  right:5px;
  background:linear-gradient(
      135deg,#ffb300,#ff8f00
    );
  color:#081224;
  font-size:10px;
  font-weight:700;
  padding:3px 6px;
  border-radius:30px;
  box-shadow:0 0 10px rgba(255,179,0,0.4);
}

/* =========================================================
   BUTTON EFFECT
========================================================= */

button,
.header-actions .item {
  transition:transform 0.12s ease,opacity 0.12s ease;
}

button:active,
.header-actions .item:active {
  transform:scale(0.94);
  opacity:0.7;
}

/* =========================================================
   RIPPLE EFFECT
========================================================= */

.ripple-btn {
  position:relative;
  overflow:hidden;
}

.ripple {
  position:absolute;
  width:20px;
  height:20px;
  background:rgba(255,255,255,0.4);
  border-radius:50%;
  transform:scale(0);
  animation:ripple 0.5s linear;
  pointer-events:none;
}

@keyframes ripple {
  to {
    transform:scale(10);
    opacity:0;
  }
}

/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (min-width:1201px) {
  .search-box {
    max-width:620px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:1023px) {
  .brand-badge {
    display:none;
  }
  .main-header .container {
    gap:10px;
  }
  .logo img {
    height:36px;
  }
  .search-box {
    min-width:0;
  }
  .header-actions {
    gap:8px;
  }
  .header-actions .item {
    min-width:62px;
    padding:8px 6px;
  }
  .header-actions .item span {
    font-size:11px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px) {
  .top-right {
    display:none;
  }
  .top-bar {
    padding:6px 0;
  }
  .top-left {
    font-size:12px;
    margin:0 auto;
  }
  .main-header {
    padding:10px 0;
  }
  .main-header .container {
    gap:8px;
    padding:0;
  }
  .logo img {
    height:36px;
  }
  .search-box {
    height:38px;
    border-radius:12px;
  }
  .search-box input {
    padding:0 12px;
    font-size:16px;
  }
  .search-box button {
    width:42px;
  }
  .header-actions {
    gap:6px;
  }
  .header-actions .item {
    min-width:auto;
    padding:8px;
    border-radius:12px;
  }
  .header-actions .item span {
    padding-top:0 !important;
  }
  .header-actions .item:not(:first-child) {
    display:none;
  }
  .cart-count {
    top:0;
    right:7px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:540px) {
  .logo img {
    height:24px;
  }
  .search-box {
    height:34px;
  }
  .search-box input {
    font-size:16px;
  }
  .header-actions .item span {
    display:none;
  }
  .search-box button {
    width:38px;
  }
  .header-actions .item {
    padding:7px;
  }
}

/* =========================================================
   FOTTER:CSS TOÀN BỘ
========================================================= */

/*******************************
 * STYLE FOR FOOTER
 * *****************************/

.footer-col,
.footer-block,
.newsletter-footer {
  background: rgb(89 89 89 / 4%);   
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:18px;
  margin-bottom:20px;
  transition:0.3s ease;
}

.footer-col:hover,
.footer-block:hover,
.newsletter-footer:hover {
  transform:translateY(-4px);
  border-color:rgba(245,158,11,0.4);
}

.site-footer {
    padding-top: 30px;
    position: relative;
    margin-top: 30px;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 179, 0, 0.4), transparent);
}
/* Title */

.site-footer h3 {
  text-transform: uppercase;
  font-size:15px;
  font-weight:700;
  margin-bottom:18px;
  position:relative;
  padding-bottom:8px;
}

.site-footer h3::after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:40px;
  height:2px;
  background:#f59e0b;
  border-radius:2px;
}

/* Text */

.footer-col p {
  font-size:14px;
  line-height:1.7;

  margin-bottom:8px;
}

/* Links */

.footer-col a {

  display:block;
  padding:4px 0;
  text-decoration:none;
  transition:all 0.25s ease;
  position:relative;
}

.footer-col a:hover {

  transform:translateX(6px);
}

/* Block spacing */

.footer-block {
  margin-bottom:30px;
}

.footer-social a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  margin-right:8px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:#fff;
  transition:all 0.3s ease;
}

.footer-social a:hover {
  background:#f59e0b;
  color:#0f172a;
  transform:translateY(-3px);
}

/* ===============================
FORM
=============================== */

.subscribe-form {
  display:flex;
  gap:10px;
  margin-top:5px;
}

.subscribe-form .form-control {
  height:48px;
  border:none;
  border-radius:4px;
  background:#fff;
  color:#333;
  box-shadow:none;
  padding:0 16px;
  font-size:16px;
}

.subscribe-form .form-control:focus {
  outline:none;
  box-shadow:none;
}

.subscribe-form .form-control::-webkit-input-placeholder {
  color:#333;
}

.subscribe-form button {
  width:160px;
  height:48px;
  border:none;
  border-radius:4px;
  background:#ff2a2a;
  color:#fff;
  font-weight:700;
}

.subscribe-form button:hover {
  background:#e41c1c;
}

@media (max-width:991px) {
  .subscribe-form {
    display:block;
  }
  .subscribe-form .form-control {
    margin-bottom:10px;
  }
  .subscribe-form button {
    width:100%;
  }
}

.newsletter-footer h4 {
  font-size:14px;

  margin-bottom:8px;
}

.newsletter-footer p {
  font-size:13px;
  color:#3b3b3b;
}

.newsletter input {
  border-radius:8px;
  border:none;
  padding:10px;
  margin-bottom:10px;
  outline:none;
}

.newsletter button {
  background:#f59e0b;
  border:none;
  color:#111827;
  font-weight:bold;
  border-radius:8px;
  padding:10px;
  transition:0.3s;
}

.newsletter button:hover {
  background:#fbbf24;
}

/* Bottom bar */

.footer-bottom {
  margin-top:50px;
  padding:18px;
  font-size:13px;
  color:#64748b;
  position: relative;
}
.footer-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 179, 0, 0.4), transparent);
 }
.bct {
  margin-top:15px;
  max-width:160px;
  filter:brightness(0.95);
  opacity:0.9;
  transition:0.3s;
}

.bct:hover {
  opacity:1;
  transform:scale(1.05);
}

.footer-social {
  display:flex;
  gap:10px;
  margin:10px;
}

.footer-social .social {
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,0.05);
  transition:all 0.3s ease;
}

.footer-social .social svg {
  width:20px;
  height:20px;
  fill:#ccc;
  transition:0.3s;
}

/* NEON EFFECT */

.footer-social .fb:hover {
  background:#1877f2;
  box-shadow:0 0 12px #1877f2;
}

.footer-social .zalo:hover {
  background:#0068ff;
  box-shadow:0 0 14px #0068ff;
}

.footer-social .yt:hover {
  background:#ff0033;
  box-shadow:0 0 12px #ff0033;
}

.footer-social .tt:hover {
  background:#00f2ea;
  box-shadow:0 0 12px #00f2ea;
}

.footer-social .social:hover svg {
  fill:#fff;
}

@media (max-width:768px) {
  .site-footer {
    text-align:center;
    padding-top:40px;
  }
  .footer-social {
    justify-content:center;
  }
  .site-footer h3::after {
    left:50%;
    transform:translateX(-50%);
  }
  .footer-col a:hover {
    transform:none;
  }
}

/***KHU VỰC NẰM NGOÀI FOOTER**/

.banner_ads.stickytop .banner-right {
  position:fixed;
  top:40%;
  transform:translateY(-50%);
  z-index:999;
  right:0;
  transition:all 0.45s linear;
}

.banner_ads.stickytop .banner-left {
  top:0;
  transform:none;
}

.banner_ads .banner-right {
  position:fixed;
  top:40%;
  transform:translateY(-50%);
  right:0;
  z-index:9;
  transition:all 0.45s linear;
  width:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.banner_ads .banner-left {
  position:fixed;
  top:55%;
  transform:translateY(-50%);
  left:0;
  z-index:999;
  transition:all 0.3s ease;
}

.banner-right > div {
    border: 2px solid;
    border-image: linear-gradient(90deg, transparent, rgba(255, 179, 0, 0.4), transparent) 1;
  border-radius:15px 0 0 15px;
  background:#ffffffcf;
  border-right:none;
  display:flex;
  align-items:center;
  flex-shrink:0;
  height:50px;
  width:180px;
  padding:5px 12px;
  margin-bottom:10px;
  margin-left:auto;
  border-radius:5px 0 0 5px;
  transition:all 0.3s ease;
}

.banner-right > div:hover {
  width:200px;
  box-shadow:-4px 4px 12px rgba(0,0,0,0.2);
}

.banner-right span,
.banner-right img {
  margin-right:8px;
  flex-shrink:0;
}

.connect_phone:hover {
  background:#c62828;
}

.connect_zalo:hover {
  background:#006edc;
}

.connect_fb:hover {
  background:#2f4a86;
}

.connect_map:hover {
  background:#e64a19;
}

.connect_phone:hover a,
.connect_phone:hover span,
.connect_phone:hover .phone-text strong,
.connect_zalo:hover a,
.connect_fb:hover a,
.connect_map:hover a {
  color:#fff !important;
}

.connect_fb:hover .glyphicon,
.connect_phone:hover .glyphicon,
.connect_zalo:hover img,
.connect_map:hover .glyphicon {
  color:#fff !important;
  border:2px solid #fff !important;
  border-radius:50%;
}

.banner-right a {
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:#000;
}

.banner-right img,
.banner-right .glyphicon {
  width:35px;
  height:35px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  object-fit:contain;
  flex-shrink:0;
  font-size:23px;
  line-height:1;
  vertical-align:middle;
  margin-right:10px;
  color:#016067;
  border:2px solid #016067;
  border-radius:50%;
}

@media (max-width:1439px) {
  .banner_ads {
    display:none;
  }
}

@media (min-width:1440px) {
  .banner_ads .banner-right img {
    right:0;
    float:left;
  }
  .banner_ads .banner-left img {
    left:0;
    float:left;
  }
}

.back-to-top {
  position:fixed;
  left:10px;
  display:none;
  cursor:pointer;
}

.back-to-top span {
  background:#666;
  border-radius:50%;
  padding:10px;
  color:#fff;
  height:100%;
  width:100%;
  border:5px solid #ccc;
}