.elementor-2233 .elementor-element.elementor-element-30c590a > .elementor-container{max-width:1300px;}.elementor-2233 .elementor-element.elementor-element-30c590a{margin-top:0px;margin-bottom:15px;}.elementor-2233 .elementor-element.elementor-element-f918012{width:var( --container-widget-width, 35.964% );max-width:35.964%;--container-widget-width:35.964%;--container-widget-flex-grow:0;}.elementor-2233 .elementor-element.elementor-element-7c073c3{width:var( --container-widget-width, 103.953% );max-width:103.953%;--container-widget-width:103.953%;--container-widget-flex-grow:0;}.elementor-2233 .elementor-element.elementor-element-a6ed367 > .elementor-container{max-width:1300px;}.elementor-2233 .elementor-element.elementor-element-a6ed367{margin-top:0px;margin-bottom:0px;}.elementor-2233 .elementor-element.elementor-element-58012fe{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2233 .elementor-element.elementor-element-ba1df7f > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-bottom:20px;}.elementor-widget-slides .elementor-slide-heading{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-slides .elementor-slide-description{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-slides .elementor-slide-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-2233 .elementor-element.elementor-element-dd27a9c .elementor-repeater-item-829af0a .swiper-slide-bg{background-color:#FFFFFF;background-image:url(https://sgtechpc.vn/wp-content/uploads/2025/07/ChatGPT-Image-14_53_01-11-thg-7-2025.png);background-size:cover;}.elementor-2233 .elementor-element.elementor-element-dd27a9c .elementor-repeater-item-4e9b6c2 .swiper-slide-bg{background-color:#FFFFFF;background-image:url(https://sgtechpc.vn/wp-content/uploads/2025/04/889823.jpg);background-size:cover;}.elementor-2233 .elementor-element.elementor-element-dd27a9c .elementor-repeater-item-542a133 .swiper-slide-bg{background-color:#FFFFFF;background-image:url(https://sgtechpc.vn/wp-content/uploads/2025/04/5289932-scaled.jpg);background-size:cover;}.elementor-2233 .elementor-element.elementor-element-dd27a9c .swiper-slide{transition-duration:calc(5000ms*1.2);height:530px;}.elementor-2233 .elementor-element.elementor-element-dd27a9c .swiper-slide-contents{max-width:66%;}.elementor-2233 .elementor-element.elementor-element-dd27a9c .swiper-slide-inner{text-align:center;}.elementor-2233 .elementor-element.elementor-element-094c64d{padding:0px 0px 0px 0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-2233 .elementor-element.elementor-element-c35a0e7{width:21%;}.elementor-2233 .elementor-element.elementor-element-ac0662b{width:45.333%;}.elementor-2233 .elementor-element.elementor-element-d343c19{width:22.538%;}.elementor-2233 .elementor-element.elementor-element-ba1df7f{width:77.462%;}}/* Start custom CSS for html, class: .elementor-element-f918012 *//* HÀNG TRÊN – Logo riêng */
.header-top {
  background-color: #fff;
  padding: 10px 30px;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7c073c3 *//* Giao diện nút "Danh mục sản phẩm" */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0066cc, #004a99); /* màu nền nút */
  color: #fff;
  font-weight: 600;
  padding: 10px 32px;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 102, 204, 0.25);
}

.menu-toggle:hover {
  background: linear-gradient(135deg, #005bb5, #003d80);
  box-shadow: 0 6px 16px rgba(0, 102, 204, 0.35);
}

.menu-icon {
  font-size: 17px;
  display: inline-block;
}

.menu-arrow {
  font-size: 12px;
  margin-left: 4px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d334a09 */.benefit-row {
  display: flex;
  justify-content: center;
  gap: 50px;
  padding: 10px 0;
  background: transparent; /* ❗Sửa lại để ăn nền từ header */
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  background: transparent; /* ❗Không dùng nền riêng */
}

.benefit-item i {
  font-size: 16px;
  color: white;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-55c577f */.search-bar {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 40px;
  padding: 0 16px;
  width: 100%;
  max-width: 550px;
  height: 48px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.search-bar .search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: #333;
}

.search-bar .search-input::placeholder {
  color: #5c5c5c;
  opacity: 0.7;
}

.search-bar .search-icon {
  background: none;
  border: none;
  color: #444;
  font-size: 18px;
  cursor: pointer;
  padding-left: 10px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7a89879 */.match-style {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: #ffffff;
  padding: 8px 12px;
  background: transparent;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
  border-radius: 6px;
}

.match-style i {
  font-size: 16px;
  color: #ffffff;
  transition: color 0.3s ease;
}

.match-style:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.match-style:hover i {
  color: #fff;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-18846bf */.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  margin-top: 20px; /* 👈 chỉnh khoảng cách xuống */
}

.action-item {
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s ease;
}

.action-item:hover {
  opacity: 0.8;
  cursor: pointer;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-30c590a */.elementor-2233 .elementor-element.elementor-element-30c590a {
  background: linear-gradient(135deg, #2196f3, #0d47a1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-58012fe */.menu-danhmuc {
  position: relative;
  width: 280px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  font-family: ' Roboto', sans-serif;
}

.menu-danhmuc ul {
  list-style: none;
  padding: 10px 0;
  margin: 0;
}

.menu-item {
  margin: 4px 12px;
  /*position: relative;*/
}

.menu-item > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: #333;
  font-size: 15px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.menu-item > a:hover {
  background-color: #e0f0ff;
  color: #0066cc;
}

.menu-item .icon {
  width: 20px;
  font-size: 16px;
  text-align: center;
  flex-shrink: 0;
}

.menu-item .arrow {
  margin-left: auto;
  color: #888;
  font-size: 12px;
}

.has-submenu:hover .mega-menu {
  display: flex;
}

.mega-menu {
    display: none;
    background: #fff;
    z-index: 999;
    border-radius: 12px;
    position: absolute;
    top: 0;
    left: 280px;
    width: calc(1100px - 80px);
    height: 531px;
    overflow: auto;
    box-shadow: 0 4px 4px rgba(0,0,0,.08)
}

.mega-column {
  flex: 1;
  padding: 0 15px;
}

.mega-column h4 {
  font-size: 16px;
  font-weight: 500;
  color: #007bff;
  margin-bottom: 10px;
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-ba1df7f */.slider-center {
  border-radius: 15px;
  overflow: hidden;
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-c837fa8 */.fixed-4-img-row {
  max-width: 1300px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0;
   gap: 15px; /* 👉 khoảng cách giữa các ảnh */
}

.fixed-4-img-row .img-box {
  flex: 1;
  min-width: 0;
}

.fixed-4-img-row img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}/* End custom CSS */