/* CSS FOR HOME PAGE */
.box-all-content {
  padding: 0px 5%;
}

/*** CSS FOR CONTRIB MODULE ***/
.menu .tbm-link.level-1 {
  padding: 17.5px 20px;
}

a.cart-block--link__expand {
  display: flex;
  width: fit-content;
  align-items: center;
}

td.views-field.views-field-field__product-variation__image.views-align-center {
  align-items: center;
  justify-content: center;
  display: flex;
}

/*CSS FOR CART VIEW: */
.views-field-purchased-entity .img-fluid {

  height: auto;
  max-width: 40%;
}

/* td.shopping-cart-image.views-field.views-field-field__product-variation__image.views-align-center {
  display: flex;
  justify-content: center;
  align-items: center;
} */
.shopping-cart-image {
  text-align: center;
  justify-content: center;
  display: flex;
}

.shopping-cart-quantity input#edit-edit-quantity-0 {
  min-width: auto;
}

.shopping-cart-quantity .quantity-edit-input {
  min-width: fit-content !important;
  /* width: 50px; */
}

.shopping-cart-total {
  width: 120px;
}

.shopping-cart-product-name {
  max-width: 250px;
}

/* CSS FOR CHECKOUT CART VIEW: */
div#edit-payment-information-billing-information .profile {
  display: flex;
  justify-content: space-between;
}

#edit-payment-information-billing-information .field--name-field-profile-image {
  flex-shrink: 0;
  width: 40%;
}

#edit-payment-information-add-payment-method-billing-information .profile {
  display: flex;
  justify-content: space-between;
}

#edit-payment-information-add-payment-method-billing-information .field--name-field-profile-image {
  flex-shrink: 0;
  width: 40%;
}

/* CSS FOR ORDER INFORMATION: */

#edit-shipping-information-shipping-profile .profile.profile--type--customer {
  display: flex;
  justify-content: space-between;
  width: 80%;
}

div#edit-shipping-information-shipping-profile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

input#edit-shipping-information-shipping-profile-edit-button {
  height: fit-content;
  /* align-items: center; */
  /* display: flex
; */
  /* justify-content: center; */
}

#edit-shipping-information-shipping-profile .field.field--name-field-profile-image {
  flex-shrink: 0;
  width: 40%;
}

div#edit-shipping-information-shipping-profile {
  display: flex;
}

div#edit-payment-information-billing-information {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

div#edit-payment-information-billing-information .profile.profile--type--customer {
  width: 80%;
}

/* CSS FOR REVIEW */
#edit-review-shipping-information .profile.profile--type--customer {
  display: flex;
  justify-content: space-between;
}

#edit-review-shipping-information .field.field--name-field-profile-image {
  flex-shrink: 0;
  width: 40%;
}


/* CSS FOR REVIEW PAYMENT INFORMATION VIEW: */
#edit-review-payment-information .profile.profile--type--customer {
  display: flex;
  justify-content: space-between;
}

#edit-review-payment-information .field.field--name-field-profile-image {
  flex-shrink: 0;
  width: 40%;
}


/* CSS FOR COMPLETE PAYMENT: */
#edit-completion-message-payment-information .field.field--name-field-profile-image {
  flex-shrink: 0;
  width: 40%;
}

#edit-completion-message-payment-information .profile.profile--type--customer {
  display: flex;
  justify-content: space-between;
}

#edit-completion-message-shipping-information .profile.profile--type--customer {
  display: flex;
  justify-content: space-between;
}

#edit-completion-message-shipping-information .field.field--name-field-profile-image {
  flex-shrink: 0;
  width: 40%;
}

/* CSS FOR HEADER: */

div#block-website-cart a.cart-block--link__expand {
  display: flex;
  flex-wrap: wrap;
}

div#block-website-useraccountmenu-menu .menu-item {
  width: 100px;
}

#block-website-useraccountmenu .menu {
  margin-top: 0;
  margin-bottom: 0;
}

/* 1. Cấu hình khung bao ngoài (thẻ UL) */
.user-account .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  /* Để làm mốc tọa độ cho dropdown */
  display: inline-block;
  /* Để khung bao vừa khít nội dung */
}

.user-account {
  padding-left: 20px;
}

/* 2. Biến "My Account" thành Icon hình tròn */
/* Chọn thẻ li đầu tiên */
.user-account .menu-item:first-child a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  /* Kích thước icon */
  height: 40px;
  border-radius: 50%;
  /* Làm tròn */
  background-color: #f1f1f1;
  /* Màu nền icon */
  color: #333;
  text-decoration: none;
  font-size: 0;
  /* Ẩn chữ "My account" đi */
}

.user-account .menu-item {
  list-style: none;
}

/* Tạo hình Icon User bằng CSS (Dùng pseudo-element) */
/* Nếu web bạn có FontAwesome thì thay content: '\f007' và font-family tương ứng */
.user-account .menu-item:first-child a::before {
  content: '👤';
  /* Icon hình người (Unicode) */
  font-size: 20px;
  /* Kích thước icon */
  display: block;
}

/* 3. Cấu hình "Log out" thành Dropdown */
/* Chọn thẻ li cuối cùng */
.user-account .menu-item:last-child {
  display: none;
  /* Mặc định ẩn */
  position: absolute;
  top: 100%;
  /* Nằm ngay dưới icon */
  right: -100%;
  /* Canh phải hoặc left: 0 tùy ý */
  min-width: 120px;
  /* Độ rộng tối thiểu */
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Đổ bóng cho đẹp */
  border-radius: 4px;
  z-index: 100;

}

/* Style cho link Log out bên trong */
.user-account .menu-item:last-child a {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  /* Hiện lại chữ vì ở trên li cha không set font-size 0 */
  text-align: center;
}

.user-account .menu-item:last-child a:hover {
  background-color: #f9f9f9;
  color: #d9534f;
  /* Màu đỏ khi hover logout */
}

/* 4. Xử lý Hover: Hover vào UL thì hiện LI thứ 2 */
.user-account .menu:hover .menu-item:last-child {
  display: block;
}

@media (min-width: 992px) {
  body .ms-lg-auto {
    /* margin-left:none; // We cannot use this style cause Bootstrap responsive made value: auto !important */
    /* So to make the div center, just add style margin-right: auto */
    margin-left: unset !important;
    width: fit-content;
  }
}

@media (min-width: 992px) {
  .menu .level-1.tbm-item--has-dropdown .tbm-link.level-1::after {
    right: -8px !important;
  }
}

body #block-powmenusearch .search {
  margin-left: 25px unset !important;
}


.ms-lg-auto {
  /* margin-left:none; // We cannot use this style cause Bootstrap responsive made value: auto !important */
  /* So to make the div center, just add style margin-right: auto */
  margin-left: unset !important;
  width: fit-content;
}

/* CSS FOR VIEWING ORDER DETAIL: */
.customer-billing .profile.profile--type--customer {
  display: flex;
  justify-content: space-between;
}

.customer-billing .field.field--name-field-profile-image {
  flex-shrink: 0;
  width: 50%;
}


.customer-billing .field.field--name-field-profile-image .field__item {
  width: 50%;
}

.customer-billing .field.field--name-field-profile-image .field__label {
  display: none;
}

.customer-information__shipping .profile.profile--type--customer {
  display: flex;
  justify-content: space-between;
}

.customer-information__shipping .field.field--name-field-profile-image {
  flex-shrink: 0;
  width: 50%;
}

.customer-information__shipping .field.field--name-shipping-method {
  display: flex;
  gap: 30px;
  padding-top: 10px;
  /* padding-left: 10px; */
}

.order-information .profile.profile--type--customer.profile--view-mode--default {
  display: flex;
  justify-content: space-between;
}

.order-information .field.field--name-field-profile-image {
  flex-shrink: 0;
  width: 20%;
}

.order-information .print__wrapper.print__wrapper--pdf {
  display: flex;
  flex: end;
  justify-content: flex-end;
  padding-right: 20px;
  padding-bottom: 10px;
  font-size: larger;
  /* border: solid; */
}

.order-information .print__wrapper.print__wrapper--pdf a {
  border: solid red;
  padding: 3px 6px;
  border-radius: 10px;
  color: white;
  background-color: red;
}

#block-website-tieudetrang .field.field--name-order-number {
  display: flex;
  gap: 10px;
}


body .path-user .order-information {

  float: unset !important;
  clear: both;
}

@media (min-width: 720px) {
  body .path-user .order-information {
    float: unset !important;
  }
}

.profile.profile--type--customer .field.field--name-address,
.field.field--name-field-profile-image {
  flex-shrink: 0;
  width: 50%;
}

.customer-information__shipping .field.field--name-field-profile-image .field__item {
  width: 50%;
}

.customer-information__shipping .field.field--name-field-profile-image .field__label {
  display: none;
}




/******************************************************************/

/* CSS for gender supplement banner: */
.gender {
  padding: 20px 20px 0px 20px;
}

.gender-name {
  text-align: center;
  font-size: 45px;
  font-family: "Montserrat";
}

.gender-name a {
  color: black;
  font-family: system-ui;
  letter-spacing: 4px;
}

.gender-name a:hover {
  color: black;
}

.gender-description {
  text-align: center;
  font-size: x-large;
  font-weight: 300;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.gender-wrapper {
  padding: 20px 20px 0 20px;
}

.gender-image {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: auto;
}

.gender-image img {
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
  /* smoothy transform */
  object-fit: cover;
}

.gender-image:hover img {
  transform: scale(1.1);
  /* Increase 10% on hover */
}


/* Select 3rd grid */
.views-view-responsive-grid__item:nth-child(3) {
  grid-column: 1 / -1;
}

.views-view-responsive-grid__item:nth-child(3) .gender-image {
  align-items: center;
  display: flex;
  justify-content: center;
  max-height: 300px;
  overflow: hidden;
}

/* CSS for logo in header: */
#block-blocklogo img {
  max-height: 80px;
}




/* Css for list products view: */
.list-product-item-brand a {
  text-decoration: none;
  color: gray;
  font-family: initial;
}

.product-gallery {
  width: 500px;
}

.list-products-item-price_cart {
  display: flex;
  justify-content: space-between;
}


h1.product-detail-title {
  /* align-items: center; */
  text-align: center;
  text-transform: uppercase;
  font-size: xxx-large;
  font-weight: 500;
  letter-spacing: 2px;
  font-family: system-ui;
}


.list-product-item-title {
  font-size: medium;
  font-family: sans-serif;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-product-item-brand-color {
  display: flex;
  justify-content: space-between;
}

.list-product-item-price-rating .views-field.views-field-nothing span.field-content {
  font-size: larger;
  color: red;
  font-weight: 500;
}

div#views-bootstrap-list-products-block-1 {
  padding: 10px 20px 10px 20px;
}


.list-product-item-infor {
  flex-direction: column;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 90px;
}

.list-products-item-container {
  /* height: 550px; */
  padding: 10px;
  position: relative;
  display: block;
  /* border: 3px solid salmon; */
  margin-top: 10px;
  border-radius: 6px;
}

.list-product-item-price-rating {
  display: flex;
  justify-content: space-between;
}

.list-products-item-container:hover {
  box-shadow: 0 5px 6px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease-in-out;
}

.list-product-item-price {
  font-weight: 700;
  font-size: x-large;
  /* color: darkblue; */
}

.disable-click {
  pointer-events: none;
}

.list-products-item-price-rating {
  display: flex;
  justify-content: space-between;
}

.list-product-item-cart {
  color: white;
  background-color: brown;
  padding: 8px;
  border-radius: 2px;
}

.list-product-item-cart:hover {
  cursor: pointer;
}

.product-detail-quantity-cart {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  margin-top: 20px;
  background-color: #f5f5f5;
}

.product-detail-quantity label {
  text-transform: uppercase;
}

/*CSS for header of each components:*/
.header-component {
  text-align: center;
  font-size: 100px;
  padding: 40px;
}

.related-products-section h2 {
  color: black;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: xxx-large;
  padding: 20px 0;
  text-decoration-line: underline;
  text-underline-offset: 5px;
  text-decoration-color: brown;
}


/*CSS for a part of <a> tags*/
.field-content a {
  color: black;
}

.field-content.list-product-item-image a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.field-content.list-product-item-image .img-fluid {
  max-width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  width: 100%;
  /* height: unset; */
}

.slider-for-box {
  width: 100%;
}

.product-gallery .image-slider-for {
  width: 100%;
  max-width: 250px;
  /* tùy chỉnh: ví dụ 400px */
  height: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  /* giúp ảnh không bị méo */
}

.slider-for-box .slick-slide img {
  width: 100%;
}

/* Thumbnail nhỏ */
.slider-nav {
  margin-top: 12px;
  width: 100%;
  display: flex !important;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
}

.slider-nav .slick-list {
  width: 100% !important;
}

.slider-nav .slick-track {
  display: flex !important;
  justify-content: center !important;
}

.image-slider-nav {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.image-slider-nav:hover,
.slick-current .image-slider-nav {
  border-color: #0070f3;
}

/* ===== Thông tin tĩnh ===== */
.product-detail-info {
  margin-top: 20px;
  font-size: 15px;
  color: #333;
}

.product-detail-info div {
  margin-bottom: 8px;
}

/* ===== BÊN PHẢI ===== */
.product-detail-right {
  flex: 0.8;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.product-detail-right fieldset {
  border: none;
  padding: 0;
}

.product-detail-right legend {
  font-weight: 600;
  margin-bottom: 8px;
}

.product-detail-right label {
  margin-right: 12px;
  cursor: pointer;
  font-size: 15px;
}

.product-price {
  font-weight: 700;
  font-size: 18px;
  color: #111;
  margin-top: 8px;
}
























.navbar.bg-dark {
  --bs-bg-opacity: 1 !important;
  background-color: cadetblue !important;
}

nav#block-bootstrap5-account-menu {
  justify-content: flex-end;
  display: flex;
}

views-exposed-form-view-list-product-page-1 .form--inline.clearfix {}

.bef-links ul {
  display: flex;
  justify-content: space-between;
  /* tách đều các nút */
  gap: 10px;
  /* khoảng hở giữa nút */
  padding: 0;
  margin: 0;
  list-style: none;
}

.bef-links li {
  margin: 0;
  padding: 0;
}

.bef-links li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  font-size: clamp(0.8rem, 2vw, 1.2rem);
  background: #f8f9fa;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bef-links li a:hover {
  background: #e9ecef;
}

.bef-links li a.bef-link--selected {
  background: #343a40;
  color: #fff;
  font-weight: bold;
}

/* Electronics */
#edit-type-product-type-electronics::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background: url("/themes/custom/vinno_theme/images/electronics.png") no-repeat center / cover;
}

/* Fashion */
#edit-type-product-type-fashion::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background: url("/themes/custom/vinno_theme/images/fashion.png") no-repeat center / cover;
}

/* House & lives */
#edit-type-product-type-house-lives::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background: url("/themes/custom/vinno_theme/images/house.png") no-repeat center / cover;
}


div#edit-actions {
  /* align-items: flex-end; */
  display: flex;
  justify-content: flex-end;
}

.product-detail-wrapper {
  display: flex;
  gap: 40px;
}

.product-images {
  flex: 1;
}

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

.thumb-list img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}

.product-info {
  flex: 2;
}

.product-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.product-rating {
  color: #888;
  margin-bottom: 8px;
}

.product-price {
  font-size: 2rem;
  color: #e74c3c;
  font-weight: bold;
  margin-bottom: 8px;
}

.product-sale {
  color: #e74c3c;
  margin-bottom: 8px;
}

.product-actions .btn-add-cart {
  background: #fff;
  color: #e74c3c;
  border: 1px solid #e74c3c;
}

.product-actions .btn-buy {
  background: #e74c3c;
  color: #fff;
}


.vinno-product-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.vinno-left {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.vinno-left .vinno-common-fields {
  margin-top: 1rem;
}

.vinno-right {
  flex: 1 1 40%;
}

.tbm-submenu {
  width: fit-content;
}

.menu .tbm-item.level-1 {
  position: relative;
}

.cart-block--summary__icon img {
  height: 40px;
}