/* =====================================================
   DataShop Custom CSS – NEW FIXES ONLY (2025+)
   ===================================================== */

/* ==== Desktop >=1025px ==== */
 
/* ==== Tablet 768–1024px ==== */
 /* Tablet CSS here */

/* ==== Mobile <=767px ==== */
 



/* *********************************TABLE OF CONTENT ======================================== */
/* 
0. Overview All page
I. Home PAGE EDITS
   1. Group Header Section
   2. Phần H2 - Hero Section
   3. CARD CONTAINER
   4. SOLUTION SECTION

II. Report PAGE EDITS
    1. Báo Cáo Hành Vi Tìm Kiếm Sản Phẩm của Người Tiêu Dùng TMĐT
    2. Báo Cáo Sản Phẩm
    3. Báo Cáo Top Ngành Hàng có Tỷ Lệ Thành Công Cao Nhất cho Nhà Bán Mới
    4. Báo Cáo Tỷ Lệ Cạnh Tranh Của Từng Ngành Hàng TMĐT 2025
    5. Báo Cáo Xu Hướng Mua Sắm TMĐT 2025
    6. Báo Cáo Hành Vi Mua Hàng của Người Tiêu Dùng TMĐT
    7. Insight Lợi Nhuận Chuyên Sâu

III. Other Page
    1. Checkout Page
    2. Payment Page
    

*/

/*==============================End Table of Content==============================================*/



/*0. Overview All page*/

/* Chỉnh thông tin chung */
:root {
    --main-font: 'Inter', sans-serif;
}

/* CHẶN DARK MODE CỦA TRÌNH DUYỆT */
html, body {
  color-scheme: light !important;
  forced-color-adjust: none;
}

/* DỨT ĐIỂM FORCE DARK MODE CỦA CHROME */
hhtml, body {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Chrome dark mode – tăng độ rõ chữ */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  opacity: 1;
}

p, span, td, th {
  opacity: 1;
}


/* Ép font các thành phần chung */
body, 
p,
.wp-block,
.wp-block * {
    font-family: var(--main-font) !important;
}

/* Những nơi bạn dùng Inter Tight thì giữ nguyên */
.inter-tight,
.font-tight,
[data-font="tight"] {
    font-family: 'Inter Tight', sans-serif !important;
}




/* ================================================== Home PAGE EDITS ================================================== */

/* ====== I. Group Header Section ====== */
/*2. Căn chỉnh header chút*/
/* Wrapper cha */
.nav-container {

  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
/*   gap: 32px;
  flex-wrap: nowrap; */
}



/* Menu items ngang + không xuống dòng + khoảng cách ổn định */

.nav-logo figure.wp-block-image {
  width: auto !important;
  max-width: none !important;
	  overflow: visible !important;
  flex-shrink: 0 !important;
}

.nav-logo img {
/*   max-height: 86px !important; */
  width: auto !important;
  height: 55px !important;
  flex-shrink:0 !important;
}

.nav-menu {
  display:flex !important;
  gap:20px !important;

}

@media (max-width: 767px) {
  .wp-block-navigation__responsive-container-open {
    margin-left: auto !important;
  }
	.nav-logo img {
		/*căn chỉnh logo */
		width: auto !important;
		height: 45px !important;
		flex-shrink:0 !important;
		padding-left:20px !important;
	}
	
}

/*3.Thiết kế Nav */

/*Tạo nền trắng, bo tròn, đổ bóng cho dropdown submenu*/

.wp-block-navigation__submenu-container {
    background:#fff ;
    padding:20px 28px !important;
    border-radius:14px !important;
    box-shadow:0 14px 32px rgba(0,0,0,.08) ;
    min-width:280px;
}

/* force submenu look in both light/dark */
.wp-block-navigation__submenu-container{
    background:#fff !important;
    opacity:1 !important;
    backdrop-filter:none !important;
    border-radius:18px !important;
    padding:20px 28px !important;
    box-shadow:0 24px 48px rgba(0,0,0,.12)!important;
	
}

/* set width lớn (giống ECDB) */
.wp-block-navigation__submenu-container{
   min-width: 500px !important;     
	/* chỉnh số này tuỳ ý: 380 / 420 / 480 */
}


/* submenu position → căn theo text BCTT */
.wp-block-navigation-submenu{
    left:0 !important;
    right:auto !important;
    transform:translateX(0px); /* chỉnh số này để lùi/trượt sang trái/phải */
}

/* đặt underline mặc định (đen) */
.navigation-header ul.navi-submenu a.wp-block-navigation-item__content .wp-block-navigation-item__label {
    text-decoration: none;
    border-bottom: 1px solid #0F172A; /* underline mặc định */
    padding-bottom: 3px;
    display: inline-block;
    transition: border-color .2s ease, color .2s ease;
}

/* hover đổi sang cam */
.navigation-header ul.navi-submenu a.wp-block-navigation-item__content:hover,
.navigation-header ul.navi-submenu a.wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
    color: #F15A27; /* màu hover */
    border-bottom-color: #F15A27;
}

/* ====== MOBILE NAVIGATION DARK MODE Style ========= */

@media (max-width: 992px) {

  /* 1. Overlay menu: nền tối */
 	
	.navigation-header .wp-block-navigation__responsive-container {
      background: #071424 ; 
     padding: 0 !important;
      margin: 0 !important;
      color: #fff !important;
  }

	/* 2) Xoá padding trái của UL container (xoá luôn Cozy CSS variable) */
  .navigation-header.wp-block-navigation,
  .navigation-header.wp-block-navigation__container {
      padding: 0 !important;
      margin: 0 !important;
  }
	
	.navigation-header.wp-block-navigation__container {
      padding-left: 0 !important;
      margin-left: 0 !important;
  }

  /* 3) Xoá padding trái của từng item (a wrapper) */
  .navigation-header .wp-block-navigation-item__content {
      padding-left: 0 !important;
      margin-left: 0 !important;
  }

  /* 4) Xoá padding của submenu container */
  .navigation-header .wp-block-navigation__submenu-container {
      padding-left: 0 !important;
      margin-left: 0 !important;
  }
	
  /* 3. Hamburger icon + nút đóng (X) màu trắng */
  .wp-block-navigation__responsive-container-toggle,
  .wp-block-navigation__responsive-container-close,
  .wp-block-navigation__toggle {
      color: #FFFFFF !important;
		margin-top: 15px !important; /* điều chỉnh xuống */
    margin-right: 8px !important; /* dịch qua phải nếu cần */
		stroke: #ffffff !important;
    stroke-width: 0.5px !important;   /* làm mũi X dày lên */
  }
	
	.navigation-header .wp-block-navigation__responsive-container-content {
    padding-top: 95px !important; /* chỉnh cho content lùi xuống chút */
}



  /* 5. Submenu container gọn */
  .wp-block-navigation__submenu-container {
      padding-left: 0 ;
      margin-left: 0 ;
/*       border-left: 2px solid rgba(255,255,255,0.15); */
      margin-top: 6px ;
      min-width: auto !important;
      width: 100% ;
      box-shadow: none ;
  }

	.navigation-header .wp-block-navigation-item__content {
      padding: 5px 5px !important;
      font-size: 17px !important;
      font-weight: 500 !important; /* Staticstasta dùng bold */
      text-align: left !important;
/*       display: flex !important; */
      justify-content: left !important;
      border-bottom: 1px solid rgba(255,255,255,0.12) !important;
      color: #fff !important;
      background: transparent !important;
  }
	
	/*update hiện mũi tên cho submenu */
	.navigation-header .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-right: 40px !important;
}

	
	/* ép container cha của menu item về flex-start */
  .navigation-header .is-content-justification-center,
  .navigation-header .items-justified-center,
  .navigation-header .wp-block-navigation {
      justify-content: flex-start !important;
  }
	
	/* ép cả UL bên trong về align flex-start */
  .navigation-header .wp-block-navigation__container {
      justify-content: flex-start !important;
      align-items: flex-start !important;
      text-align: left !important;
  }
	/*Ép được item ko phải submenu thôi*/

	 /* SUBMENU CONTAINER */
  .navigation-header .wp-block-navigation__submenu-container {
      background: transparent !important;
      padding: 0 !important;
      margin: 0 !important;

  }

	/* Submenu con nhỏ hơn (15px) */
  .navigation-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
      font-size: 15px !important;
      font-weight: 400 !important; /* nhẹ hơn item cha */
      opacity: 0.9;
  }

  /* Đảm bảo item cha vẫn 17px */
  .navigation-header > .wp-block-navigation__container 
  > .wp-block-navigation-item 
  > .wp-block-navigation-item__content 
  > .wp-block-navigation-item__label {
      font-size: 17px !important;
      font-weight: 600 !important;
  }
	

  /* title của submenu dính trái 100% */
  .navigation-header .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
      width: 100% !important;
      display: block !important;
      padding-right: 40px !important; /* chừa chỗ cho arrow */
      text-align: left !important;
  }

	 
	  /* 1. Submenu CON cần thụt vào 24px giống staticstasta */
    .navigation-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding-left: 24px !important;   /* indent submenu */
        padding-right: 10px !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Sửa lỗi item dài bị “nhảy ra xa” (case: Báo Cáo Xu Hướng Mua Sắm ) */
    .navigation-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
        display: block !important;       /* bắt label full width */
        width: 100% !important;
        white-space: normal !important;  /* cho text xuống dòng đúng */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Buộc anchor trong submenu full width để tránh text lệch */
    .navigation-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        display: block !important;
        width: 100% !important;
    }

    /* 4. Loại bỏ bất kỳ padding-left nào từ cha */
    .navigation-header .wp-block-navigation__submenu-container {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
	
	/*Để xử lý JS bấm */
	/* trạng thái đóng */
  .navigation-header .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container {
      max-height: 0 !important;
      overflow: hidden !important;
      opacity: 0 !important;
      visibility: hidden !important;

      /* giữ layout */
      display: block !important;
      transition: max-height .25s ease, opacity .2s ease;
  }

  /* trạng thái mở */
  .navigation-header .wp-block-navigation-item.has-child.is-open .wp-block-navigation__submenu-container {
      max-height: 500px !important; /* đủ lớn để chứa */
      opacity: 1 !important;
      visibility: visible !important;
  }
	
	/*Code CSS cho mũi tên */
	
	.navigation-header .wp-block-navigation-item.has-child::after {
    content: "";
    position: absolute !important;
    right: 16px !important;
    top: 8px !important;
		/* căn theo chiều cao line, */

    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255,255,255,0.9);
    border-bottom: 2px solid rgba(255,255,255,0.9);
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.2s ease;
}

/* ---- WHEN OPEN ---- */
.navigation-header .wp-block-navigation-item.has-child.is-open::after {
    transform: rotate(225deg); 
		top: 15px !important;
}
	

	/* remove active / focus / visited dark theme */
  .navigation-header .wp-block-navigation-item__content,
  .navigation-header .wp-block-navigation-item__label,
  .navigation-header .wp-block-navigation-item__content:focus,
  .navigation-header .wp-block-navigation-item__content:active,
  .navigation-header .wp-block-navigation-item__content:hover,
  .navigation-header a:focus,
  .navigation-header a:active,
  .navigation-header a:hover {
      background: transparent !important;
      color: #fff !important;
      -webkit-tap-highlight-color: transparent !important;
      outline: none !important;
      box-shadow: none !important;
  }

	/* đặt container ở relative để chứa arrow */
  .navigation-header .wp-block-navigation-item.has-child {
      position: relative !important;
  }

 /* Reset icon gốc của Gutenberg */
  .navigation-header .wp-block-navigation__submenu-icon svg {
      display: none !important;
  }
		
 

	 /* Đảm bảo header dùng flex để push icon sang phải */
  .nav-container {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
  }

  /* ép toggle sang phải */
  .wp-block-navigation__responsive-container-toggle,
  .wp-block-navigation__toggle {
      margin-left: auto !important;
      margin-right: 0 !important;
      float: right !important;
  }
		/*Chỉnh humberger căn phải */
	 .navigation-header .wp-block-navigation__responsive-container-open {
        padding-right: 16px !important;
    }
	
  /* padding submenu cân trái */
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {

      color: rgba(255,255,255,0.85) !important;
		/*có ảnh hưởng đến màu của text*/
  }
	/*Màu viền dòng kẻ*/
	.wp-block-navigation-item__content {
      border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
	
}


/*=========================================== HOME - Hamburger Menu Mobile ============================================*/

@media (max-width: 768px) {

    /* Đây mới là block đang set grid 12 cột! */
    .wp-block-group.alignwide.is-horizontal.has-grid-template-columns {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        gap: 0 !important;
    }

    /* Tắt mọi grid column của nav-logo */
    .wp-block-group.nav-logo {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    /* Tắt mọi grid column của nav-menu */
    .wp-block-group.nav-menu {
        width: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    /* Hamburger button */
    .wp-block-navigation__responsive-container-open {
        width: 42px !important;
        height: 42px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wp-block-navigation__responsive-container-open svg {
        width: 28px !important;
        height: 28px !important;
    }

    /* 2. Tăng kích thước icon (nét dài hơn kiểu Statista) */
    .wp-block-navigation__responsive-container-open svg {
        width: 34px !important;    /* dài hơn */
        height: 34px !important;   /* cao hơn */
        stroke-width: 2 !important; /* nét dày hơn */
			
    }
	
		
    /* Hoặc tăng kích thước path nếu cần */
    .wp-block-navigation__responsive-container-open svg path {
        stroke-width: 2 !important;
    }
	
	 /* Ẩn SVG cũ */
    .wp-block-navigation__responsive-container-open svg {
        display: none !important;
    }

    /* Tạo hamburger mới */
    .wp-block-navigation__responsive-container-open::before {
        content: "";
        display: block;
        width: 28px;
        height: 28px;

        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;

        /* SVG đã encode – màu xanh DATASHOP (#00AA9B) */
        background-image: url("data:image/svg+xml,%3Csvg width='30' height='28' viewBox='0 0 30 28' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='6' width='24' height='3' rx='1.5' fill='%2300AA9B'/%3E%3Crect x='4' y='13' width='24' height='3' rx='1.5' fill='%2300AA9B'/%3E%3Crect x='4' y='20' width='24' height='3' rx='1.5' fill='%2300AA9B'/%3E%3C/svg%3E");
    }

    /* 3. Hạ icon xuống để cân với chữ DATASHOP */
    .wp-block-navigation__responsive-container-open {
        position: relative !important;
        top: 4px !important;   
    }
	
}


/*========== II. Phần H2 - Hero Section =================================================*/
/*Button - chỉnh thẳng trên hàng*/
.btn-row .wp-block-button__link {
  writing-mode: horizontal-tb !important;
	white-space: nowrap !important;

}

/* Responsive cho mobile màn nhỏ: giữ nút đẹp, không bị xuống dòng */
@media (max-width: 450px) {
  .btn-row .wp-block-button__link {
    padding-left: 20px !important;
    padding-right: 20px !important;
    white-space: nowrap !important; /* chống wrap */
    font-size: 15px; 
  }
}
/*Cho màn nhỏ hơn 380px*/
@media (max-width: 380px) {
  .btn-row .wp-block-button__link {
    padding-left: 20px !important;
    padding-right: 20px !important;
    /* white-space: nowrap !important;  */
    font-size: 12px; 
  }
}

/*Cho màn nhỏ hơn 1200px - tablet*/
@media (max-width: 1200px) {
  .btn-row .wp-block-button__link {
    padding-left: 10px !important;
    padding-right: 10px !important;
    /* white-space: nowrap !important;  */
    font-size: 14px; 
  }
}

/*Chỉnh khoảng cách trên mobile */
@media (max-width: 768px) {
  .datashop-text {
    margin-bottom: 0px !important;
  }
}


/* Bảng dạng “row card” – mỗi hàng tách nhau */
.datashop-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 0px !important; /* Tạo khoảng cách giữa các row */
  font-family: "Inter", sans-serif;
 
  font-size: 14px;
}

/* Header */
.datashop-table thead th {
  background: #CCF5EF;
  color: #111;
  padding: 12px 13px;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 2px solid #e5e7eb;
  text-align: left;
}

/* Hàng = Card */
.datashop-table tbody tr {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: 0.25s ease;
}

/* Cell */
.datashop-table tbody td {
  padding: 14px 16px;
  vertical-align: middle;
  text-align: left;
}

/* Ảnh sản phẩm */
.datashop-table td img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
}

/* Hover nổi – giống bảng tech / dashboard */
.datashop-table tbody tr:hover {
  transform: translateY(-4px) scale(1.015);
/*   box-shadow: 0 8px 20px rgba(0,170,155,0.25);  */
	
  background: #20C4B5; 
	color: #fff;
	box-shadow: 0 8px 20px rgba(0,170,155,0.25);
	/*Thêm bo cong full khi hover*/
	border-radius: 14px !important;
  overflow: hidden !important;
	
}


/* Chuyển màu chữ trong toàn row */
.datashop-table tbody tr:hover td,
.datashop-table tbody tr:hover span {
  color: #fff;
}

/* Trend cũng chuyển sang trắng */
.datashop-table tbody tr:hover .trend-up,
.datashop-table tbody tr:hover .trend-stable {
  color: #ffffff;
}


/* Trend màu */
.trend-up { 
  color: #16a34a; 
  font-weight: 600; 
}
.trend-stable { 
  color: #f59e0b; 
  font-weight: 600; 
}

/* Row active (nếu muốn làm hàng nổi bật giống ảnh bạn gửi) */
.datashop-table tbody tr.active {
  background: #00AA9B !important;
  color: #fff !important;
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 24px rgba(0,170,155,0.45);
}

.datashop-table tbody tr.active td {
  color: white !important;
}



/*Custom phần column tổng*/
.datashop-hero {
	display: flex !important;
/*   align-items: center !important;; */
}


/* Mobile layout fix (dưới 768px) */
@media (max-width: 768px) {
  .wp-block-columns.is-layout-flex {
    flex-direction: column !important;
  }

  .wp-block-columns.is-layout-flex > .wp-block-column {
    flex: 0 0 100% !important;
    margin-right: 0 !important;
  }

  /* Nếu muốn thêm khoảng cách giữa 2 khối */
  .wp-block-columns.is-layout-flex > .wp-block-column:first-child {
    margin-bottom: 24px;
  }

  /* Font toàn bảng - Padding trong từng ô */
  .datashop-table td {
    padding: 10px 8px !important; /* nhỏ lại để không bị bí */
    font-size: 14px !important; /* giảm từ ~16px desktop xuống */
    font-family: "Inter Tight", sans-serif !important;
    line-height: 1.35 !important;
  }
  /* Tên cột */
  .datashop-table th {
    font-size: 12px !important;
    padding: 12px 6px !important; /* header gọn hơn */
    /* font-weight: 400 !important; */
  }

  /* Ảnh sản phẩm nhỏ lại để cân row */
  .datashop-table td img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
  }

  /* Tăng khoảng cách hàng để thoáng mắt */
  .datashop-table tbody tr {
    height: 65px !important; /* bạn có thể tăng 70px nếu muốn thoáng hơn */
  }

  /* Cột “Tên sản phẩm” cho rộng hơn một chút */
  .datashop-table td:nth-child(3) {
    width: 38% !important; /* tăng từ ~30% cho dễ đọc */
  }

  /* Cột xu hướng fix chữ xuống dòng */
  .datashop-table td:nth-child(5) span {
    display: inline-block;
    white-space: nowrap !important;
  }

  /* 4. Ngăn trang bị kéo lệch sang ngang */
  body {
    overflow-x: hidden !important;
  }

  /* Tắt click trên mobile */
  /* .datashop-table tbody tr {
    pointer-events: none !important;
  } */
}



/*Fix lỗi màn hình android nhỏ */
@media (max-width: 420px) {
   /* Tên cột */
  .datashop-table th {
    font-size: 9px !important;
    padding: 6px 6px !important; /* header gọn hơn */

  }
  .datashop-table td {
    padding: 10px 8px !important; 
    font-size: 10px !important; 
    font-family: "Inter Tight", sans-serif !important;
    line-height: 1.35 !important;
  }

}




/* Căn 2 cột trong phần Group H2 theo giữa */
.group-h2 .datashop-hero {
  display: flex;
/*   align-items: flex-start; */
  justify-content: space-between;
}


/* Cột bảng bên phải giữ nguyên, không bị kéo giãn */
.group-h2 .datashop-table {
  align-self: center;
}


/* ====== III. CARD CONTAINER  ============================================================ */
/*Group bên ngoài */
.datashop-trends{
  display:flex; 
	gap:24px; flex-wrap:wrap;
  align-items:stretch; 
	justify-content:center;
  padding:56px 0;
}


/* ====== Responsive ====== */
@media (max-width: 992px){
  .trend-card{ flex:1 1 45%; }
}

/* === CARD CONTAINER  === */
.trend-card {
    width: 380px;
    height: 482px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
    transition: transform .25s ease, box-shadow .25s ease;
    
}

.trend-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(16, 24, 40, 0.12);
}

/* === THUMBNAIL SECTION === */
.trend-card-thumb {
    position: relative;
    width: 100%;
    height: 214px;
}

.trend-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === CARD BODY === */
.trend-card-body {
    flex: 1;
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
}

.trend-card-thumb img {
    image-rendering: auto;
}

/* TITLE */
.trend-card-title {
    font-size: 22px;
    line-height: 1.35;
    font-weight: 650;
    font-family: "Inter Tight", sans-serif !important;
    margin: 0 0 14px;
    color: #0a2750;
}

/* DESCRIPTION */
.trend-card-desc {
    font-size: 15px;
    line-height: 1.55;
    color: #475569;
    margin: 0 0 26px;
}

/* === BUTTON === */
.trend-card-btn {
    margin-top: auto;
    display: inline-block;

    background: #00AA9B;
    color: #fff;

    padding: 12px 26px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;

    transition: background .25s ease, transform .2s ease;
	
	text-align: center;
}

.trend-card-btn:hover {
    background: #F4A261;
    transform: translateY(-2px);
}

/* Fix card width inside Swiper */
@media (min-width: 768px) {
    .myTrendSwiper .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
   
        width: 100% !important;

    }
    .swiper-pagination {
        display: none !important;
    }
    
}


/* ============================================
   MOBILE SWIPER FOR TREND CARD 
============================================ */
@media (max-width: 767px) {

    /* Swiper container mobile */
    .myTrendSwiper {
        width: 100% !important;
        padding-bottom: 32px !important;
    }

    /* Mỗi slide ~85% width, giống ECDB */
    .myTrendSwiper .swiper-slide {
        width: 85% !important;
        max-width: 360px !important;

        display: flex !important;
        justify-content: center !important;

    }

    /* Trend card fit mobile width */
    .myTrendSwiper .trend-card {
        width: 100% !important;
        height: auto !important;
        height: 100% !important;
        box-sizing: border-box;
    }

    .myTrendSwiper .trend-card-body {
        min-height: 264px !important; /* chỉnh số này nếu cần */
    }
    

    
    /* Dot pagination dưới slider */
    .myTrendSwiper .swiper-pagination {
        display: block !important;
        position: relative !important;
        margin-top: 18px !important;
        background: transparent !important;
    }

    .myTrendSwiper .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: #d1d5db;
        opacity: 1;
        transition: 0.25s;
    }

    .myTrendSwiper .swiper-pagination-bullet-active {
        background: #00AA9B;
        transform: scale(1.25);
    }
    
    .trend-card-desc {
        font-size: 15px;
        line-height: 1.55;
        color: #475569;
        margin: 0 0 26px;
    }

    /* Disable grid layout on mobile */
    .myTrendSwiper .swiper-wrapper {
        display: flex !important;
    }

    .myTrendSwiper {
        touch-action: pan-y;
    }
    .myTrendSwiper .swiper-wrapper,
    .myTrendSwiper .swiper-slide {
        touch-action: none;
    }

    /*Fix vuốt dọc */
    .myTrendSwiper .swiper-slide {
      touch-action: pan-y !important;
    }

    .myTrendSwiper,
    .myTrendSwiper .swiper-wrapper,
    .myTrendSwiper .swiper-slide {
      overscroll-behavior-y: contain !important;
      touch-action: pan-y !important;
    } 



}





/* ====== IV. SOLUTION SECTION  ============================================================ */


.home-solution-icon{
	width: 56px;
  height: 56px;
  flex-shrink: 0; 
	 display: flex;
  align-items: center;
  justify-content: center;
	background: linear-gradient(135deg, #EEF5FE 0%, #FEF3FE 100%) !important;
	
}
.home-solution-icon img {
  width: 60%;
  height: auto;
  object-fit: contain;  
	transform: scale(2.5); 
}


.home-solution-icon-type-2 {
  width: 56px;
  height: 56px;
  flex-shrink: 0; 
	display: flex;
  align-items: center;
  justify-content: center;
	background: linear-gradient(135deg, #EEF5FE 0%, #FEF3FE 100%) !important;
	
}

.home-solution-icon-type-2 img {
   width: 75%;
  height: auto;
  object-fit: contain;  
	transform: scale(2.5); 
}


/* Sponsor Image */

.marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-sponsor {
  height: 120px;
  width: auto;
  max-width: 120px;

  object-fit: contain;
  display: block;
  
}


/*CSS Form Lead Collect trong Solution Section -*=================================================/

/*Home - Form lead collect*/

/*hidden form default  */
#home-lead-modal{
	display:none;
}

#home-lead-modal[aria-hidden="false"] {
    display: block;
} 

#home-lead-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.home-modal-content {
    display: flex;
    width: 100%;
    height: 100%;
}

/* Mobile */
/*Cụm tổng */
#home-lead-modal {
    position: fixed;
		inset: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;

 
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
	
	 	display: flex;                 
    align-items: center;           
    justify-content: center;
	
		box-sizing: border-box;
		
} 



/* Modal box trung tâm */
.home-modal-box {
    width: 1100px;         
    max-width: 90vw;

    height: 85vh;           
    max-height: 90vh;


    background: #ffffff;
    border-radius: 24px;

    overflow: hidden;       
		position: fixed;
		left: 50%;
    top: 50%;
		transform: translate(-50%, -50%);
		margin: auto; 
		display: flex; 
		align-items: center;  
	
}


/*Container chia 2 cột*/
.home-modal-content {
    display: flex;
    width: 100%;
    height: 100%;
}

.home-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
}

/* CỘT TRÁI – FORM (60%) */

.home-lead-form-wrapper {
    flex: 0 0 52%;
    height: 100%;
    background: #ffffff;
}

/*Cột phải*/
.home-lead-content-wrapper {
/*     flex: 0 0 45%; */
		width: 48%;
		padding: 40px 40px;
    height: 100%;
/*     background: linear-gradient(
        180deg,
        #e6f7f5 0%,
        #c8f0eb 100%
    ); */
	background: linear-gradient(
  180deg,
  #f6f7fb 0%,
  #eef1f6 100%
);

	
	display: flex;
  flex-direction: column;
/*   justify-content: center; */
  align-items: center;

  text-align: center;
	
}

/* Khóa kích thước & vị trí IMAGE */
.home-lead-content-wrapper img {
/*   max-width: 700px; */
  width: 130%;
  height: auto;

  margin-bottom: 15px;
}

/* TITLE */
.home-lead-content-wrapper h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
/* 	text-align:left; */

  color: #1f2937; /* gần đen, không pure black */

  margin: 0 0 12px;
}

/* Description */
.home-lead-content-wrapper p {
  font-size: 15px;
  line-height: 1.6;
/* 	text-align:left; */
  color: #4b5563;
  max-width: 420px;

  margin: 0;
}

.home-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;

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

  background: #ffffff;
  border: none;

  font-size: 20px;
  cursor: pointer;

  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Bên trái */

.home-lead-form-wrapper {
  width: 52%;
  background: #ffffff;

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

.home-lead-form-wrapper form {
  width: 100%;
  max-width: 420px;

  display: flex;
  flex-direction: column;
}

.home-lead-form-wrapper label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;

  margin-bottom: 6px;
}

.home-lead-form-wrapper input,
.home-lead-form-wrapper select {
  height: 48px;
  padding: 0 14px;

  border-radius: 10px;
  border: 1px solid #e5e7eb;

  background: #f9fafb;
  font-size: 15px;

  margin-bottom: 18px;
}

.home-lead-form-wrapper input:focus,
.home-lead-form-wrapper select:focus {
  outline: none;
  border-color: #2563eb;
  background: #ffffff;
}

/*Selection - thêm mới cuối 24-12*/

.home-multi-select {
  position: relative;
	padding-bottom: 10px;
}

.home-multi-input {
  height: 48px;
  padding: 0 40px 0 10px ;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: #fff;
/*   color: #111827; */
	color: #007f73;
	font-size: 14px;
	display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  overflow: hidden;
	
	position: relative;
	
}

.home-multi-input > * {
  max-width: calc(100% - 40px); /* chừa chỗ mũi tên */
}

/* Mũi tên */

.home-multi-input::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 49%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.2s ease;
  pointer-events: none;
}

.home-multi-select.open .home-multi-input::after {
  transform: translateY(-50%) rotate(-135deg);
}


.home-multi-input:focus,
.home-multi-select.active .home-multi-input {
  border-color: #00AA9B;
}

.home-multi-input.is-placeholder {
  color: #9ca3af;
	font-size: 15px;
}

.home-multi-dropdown {
  position: absolute;
  top: calc(90% + 0px) !important;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  display: none;
  z-index: 10;
/* 	border: 1px solid #e5e7eb !important; */
	
}

.home-multi-select.open .home-multi-dropdown {
  display: block;
}

.home-multi-option {
  padding: 12px 16px;
  cursor: pointer;
	border-bottom: 2px solid rgba(2, 2, 1, 0.08);
}

.home-multi-option:hover {
  background: #eef2ff;
}

.home-multi-option.active {
  background: rgba(0, 180, 155, 0.3);
  font-weight: 500;
}

.home-multi-input .multi-tag {
  max-width: 250px;
  padding: 4px 10px;
  font-size: 12px ;
  line-height: 1.2;

  background: var(--ds-green-soft);
  color:  #00AA9B;
  border-radius: 999px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  flex-shrink: 0;
}

.home-multi-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;

  background: #fff;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  padding: 6px;

  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  z-index: 10;

  display: none;
}

.home-multi-select.active .home-multi-dropdown {
  display: block;
}

.home-multi-tag {
  background: rgba(0, 170, 155, 0.15);
  color: #007f73;
  border-radius: 8px;
  padding: 4px 8px;

  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 1;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-multi-input-content {
  flex: 1;
  min-width: 0 !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-multi-input.is-single .home-multi-tag {
  max-width: 100%;
/*   flex: 1 1 auto; */

	
}

.home-multi-input.is-multiple .home-multi-tag {
  max-width: 140px;
  flex: 0 0 1;
}


.home-multi-select.is-error .home-multi-input {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3);
}

.home-multi-error {
  margin-top: 6px;
  font-size: 13px;
  color: #ef4444;
}


/* Button */
.home-lead-form-wrapper button,
.home-lead-form-wrapper .submit,
.home-lead-form-wrapper input[type="submit"] {
  height: 48px;
  border-radius: 10px;

  background: #3b5bfd;
  color: #ffffff;

  font-size: 16px;
  font-weight: 600;

  border: none;
  cursor: pointer;

  margin-top: 8px;
}

/* BUTTON – gradient xanh nổi bật */
/* .home-submit-btn {
    width: 100%;
    height: 52px;

    background: linear-gradient(
        135deg,
        #00c2a8 0%,
        #00aa9b 100%
    ) !important;

    border: none;
    border-radius: 12px;

    color: #fff;
    font-size: 16px;
    font-weight: 600;

    cursor: pointer;
    transition: all 0.25s ease;

    box-shadow: 0 8px 20px rgba(0, 170, 155, 0.25);
} */

.home-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0, 170, 155, 0.35) !important;
}

.home-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(0, 170, 155, 0.25);
}



/* RESET select native */
#home-solution {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  height: 48px;
  padding: 0 42px 0 14px;

  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;

  font-size: 15px;
  cursor: pointer;
}

#home-solution {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236B7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}


.home-phone-field {
  position: relative;
}

.home-phone-field input {
  width: 100%;
  height: 48px;

  padding-left: 50px !important; /* chừa chỗ cho icon */
  padding-right: 14px;

  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;

  font-size: 15px;
  line-height: normal;
  box-sizing: border-box;
}


.icon-flag-form {
  position: absolute;
  left: 14px;
  top: 33%;
  transform: translateY(-50%);

  width: 22px;
  height: 22px;
  object-fit: cover;

  pointer-events: none;
}


.home-form-group {
  position: relative;
}

/* Home Success Form */
/*#home-success-modal {
	position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}*/

/* #home-success-modal[aria-hidden="false"] {
  display: flex;
} */

/*#home-success-modal.is-open {
  display: block;
}*/

/* Box */
/*.home-success-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 720px;
  max-width: calc(100vw - 32px);

  background: #ffffff;
  border-radius: 20px;

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  padding: 40px 32px !important;

  z-index: 2;
}

.home-success-content {
  text-align: center;
	margin: 0;
	padding: 0;
}*/

/* .home-success-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;

  background: #e6f7ee;
  color: #2ecc71;

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

  font-size: 48px;
  font-weight: bold;

  margin: 20px auto 24px;
} */

/*.home-success-icon-image {
  width: 300px;
  height: 300px;
}*/

/* Title */
/*.home-success-title {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 16px !important;
  color: #1f2937;
}*/

/* Description */
/*.home-success-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #6b7280;
  margin-bottom: 20px;
	margin-top: 10px !important;
}*/

/* Home - Form thu lead Mobile */

@media (max-width: 768px) {

  /* Ẩn cột phải */
  .home-lead-content-wrapper {
    display: none;
		
  }
	
	#home-lead-modal{
		position: fixed;
    inset: 0;
    z-index: 99999;
		display: flex;
    align-items: flex-end;

	}
	
	#home-lead-modal .home-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
	
  }
	 /* === BOTTOM SHEET === */
	.home-modal-box {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto; 
		max-height: 90vh;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;

    padding: 40px 16px 10px;
    box-sizing: border-box;
    border-radius: 0px;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		
    transform: translateY(100%);
    animation: slideUp 0.3s ease-out forwards;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
		 overflow: hidden;
		 will-change: transform;
  }
	
	.home-modal-box::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    url("https://datashop.vn/wp-content/uploads/2025/12/Gemini_Generated_Image_6m8m3x6m8m3x6m8m.jpg")
    no-repeat top center;

  background-size: cover;
  z-index: 0;
}

/* 	Trường hợp muốn nền full và chỉ hở ô nhập, đẩy modal box lên*/
	.home-modal-box > * {
  z-index: 1;
}

		@keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
	
	.home-modal-box.is-closing {
    animation: slideDown 0.25s ease-in forwards;
  }

  @keyframes slideDown {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(100%);
    }
  }

	  .home-modal-header {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 12px 16px;
    display: flex;
    justify-content: flex-end;
    z-index: 2;
  }

	.home-modal-content {
    display: block !important ; 
  }

  .home-lead-form-wrapper {
    width: 100% !important;
		height: 100% ;
    padding: 20px 16px 24px;
		border-radius: 16px;
		 box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }
	 .home-modal {
    align-items: flex-end;
		 
  }

	 .home-modal-close {
    top: 0px;
    right: 12px;
		padding: 6px;
    width: auto;
    height: auto;

    background: transparent;
    border-radius: 0;
    box-shadow: none;

    font-size: 26px;
    line-height: 1;
    font-weight: 500;

/*     color: #00AA9B; */
		 color: white;
		 position: absolute;
		 z-index: 5;
  }
	.home-modal-close:active {
    opacity: 0.6;
  }
	


}








/* #home-lead-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
	
	 	display: flex;                 
    align-items: center;           
    justify-content: center;
} */


/* ============================= */
/* HOME LEAD FORM – UI ONLY     */
/* ============================= */

/* Wrapper form */
/* .home-lead-form-wrapper {
    background: #ffffff;
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 420px;
} */

/* Form */
/* .home-lead-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
} */

/* Group */
/* .home-form-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
} */

/* Label */
/* .home-form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
} */

/* .home-required {
    color: #ef4444;
} */

/* Input + Select */
/* .home-form-group input,
.home-form-group select {
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    color: #111827;
    background: #ffffff;
    transition: all 0.25s ease;
} */

/* .home-form-group input::placeholder {
    color: #9ca3af;
} */

/* Focus */
/* .home-form-group input:focus,
.home-form-group select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
} */

/* Phone field */
/* .home-phone-field {
    position: relative;
}

.home-phone-field input {
    padding-right: 46px;
}

.home-phone-flag {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    pointer-events: none;
} */

/* Submit button */
/* .home-submit-btn {
    margin-top: 8px;
    height: 52px;
    border-radius: 14px;
    border: none;
    cursor: pointer;

    font-size: 16px;
    font-weight: 600;
    color: #ffffff;

    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.35);
    transition: all 0.25s ease;
} */

/* .home-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(59, 130, 246, 0.45);
}

.home-submit-btn:active {
    transform: translateY(0);
} */

/* Overlay */
/* .home-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
} */

/* Modal box */
/* .home-modal-box {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: auto;

    border-radius: 28px;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        #0ea5e9 0%,
        #2563eb 50%,
        #1e40af 100%
    );

    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35);
	
		max-height: 90vh;         
    display: flex;             
    align-items: center;  
} */



/* LEFT – FORM (đã có style trước) */
/* .home-lead-form-wrapper {
    flex-shrink: 0;
	 	padding: 12px 24px;
} */

/* RIGHT – TEXT CONTENT */
/* .home-lead-content-wrapper {
    color: #ffffff;
    max-width: 520px;
	 	margin-top: 12px;
} */

/* Title */
/* .home-lead-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 16px;
} */

/* Description */
/* .home-lead-desc {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
} */

/* Illustration placeholder */
/* .home-lead-illustration {
    margin-top: 32px;
    width: 100%;
    height: 180px;

    background: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
} */

/* Close button */
/* .home-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;

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

    border: none;
    cursor: pointer;

    font-size: 22px;
    line-height: 1;
    color: #1e3a8a;

    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
} */

/* .home-modal-close:hover {
    transform: scale(1.05);
}

.home-lead-content-wrapper {
  position: relative; 
} */

/* IMAGE DECORATION */
/* .home-lead-illustration {
  position: absolute;
  right: 40px;
  bottom: 32px;

  width: 420px;
  max-width: 50%;

  pointer-events: none;
  user-select: none;
} */










/* ============================================
  FORM THU LEAD - SOLUTION SECTION
============================================ */
/* Ẩn modal mặc định */
/*#ds-lead-modal {
    display: none;
}*/

/* Overlay & box (tạm thời giữ nền trắng nhỏ) */
/*#ds-lead-modal .ds-modal-overlay {
    display: none;
}*/

/* Khi modal hiển thị → chạy JS set display:block */
/*#ds-lead-modal[aria-hidden="false"] {
    display: block;
}*/

/* Overlay full màn hình */
/*.ds-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9998;
}*/

/* Modal box */
/*.ds-modal-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1100px, 90%);
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    z-index: 9999;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}*/

/* Close button */
/* .ds-modal-close {
    position: absolute;
    right: 14px;
    top: 14px;
    background: transparent;
    border: none;
    font-size: 26px;
    cursor: pointer;
    z-index: 10000;
} */

/* Flex layout 2 cột */
/* .ds-modal-content {
    display: flex;
    gap: 24px;
    flex-direction: row-reverse; 
    align-items: flex-start;
} */

/* Left: text + hình minh họa */
/* .ds-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
} */

/* Right: form */
/* .ds-right {
    width: 50%;
} */

/* ============================
   WRAPPER – FULLSCREEN MODAL
============================ */
/* Modal wrapper - KHÔNG override display */
/* .ds-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: 0.25s ease;
    z-index: 99999;
} */

/* Khi mở modal */
/* .ds-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
} */

/* Làm mờ nền */
/* .ds-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 99998;
    display: block !important;
} */

/* .ds-modal-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1100px, 90%);
    background: #fff;
    border-radius: 22px; 
    padding: 40px;
    z-index: 99999;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
} */

/* Container form giống layout Metric */
/* .ds-right {
    width: 50%;
    background: #ffffff;
    padding: 32px 28px;
    border-radius: 18px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
} */

/* Loại bỏ padding thừa của forminator */
/* .ds-right form {
    padding: 0 !important;
} */

/* Tối ưu spacing từng field */
/* .ds-right.forminator-row {
    margin-bottom: 16px !important;
} */

/* .ds-modal-box {
    
  
    position: relative;
    background-image: url("https://datashop.vn/wp-content/uploads/2025/12/Untitled-design-1.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
} */

/* ==== Chỉnh FORM STYLE TRONG POPUP (forminator) ==== */

/* .ds-right .forminator-input,
.ds-right .forminator-selectbox,
.ds-right .forminator-textarea {
    border-radius: 10px !important;
    border: 1px solid #E5E7EB !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
} */

/* .ds-right .forminator-input:focus,
.ds-right .forminator-selectbox:focus {
    border-color: #00AA9B !important;
    box-shadow: 0 0 0 3px rgba(0,170,155,0.15) !important;
} */

/* placeholder */
/* .ds-right .forminator-select .forminator-select-placeholder {
    color: #9CA3AF !important;
    font-size: 15px !important;
} */


/* .ds-right .forminator-button-submit {
    width: 100% !important;
    background: #00AA9B !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-align: center !important;
} */

/* .ds-right .forminator-button-submit:hover {
    background: #008f83 !important;
} */

/*Phần dropdown - selected */
/* ============================
   SELECT2 MULTIPLE - FORMINATOR
============================ */

/* Wrapper (khung dropdown) */
/* #ds-lead-modal .select2-selection--multiple {
    min-height: 48px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    background: #FFFFFF !important;
} */

/* Text + placeholder */
/* #ds-lead-modal .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 20px !important;
    font-size: 15px !important;
} */

/* Placeholder */
/* #ds-lead-modal .select2-selection__placeholder {
    color: #9CA3AF !important;
    font-size: 15px !important;
} */

/* Arrow */
/* #ds-lead-modal .select2-selection--multiple .select2-selection__arrow {
    position: absolute;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
} */

/* Đổi icon mũi tên xuống */
/* #ds-lead-modal .select2-selection--multiple .select2-selection__arrow span {
    font-size: 18px !important;
    color: #6B7280 !important;
} */




/* Khi focus */
#ds-lead-modal .select2-container--focus .select2-selection--multiple {
    border-color: #00AA9B !important;
    box-shadow: 0 0 0 3px rgba(0,170,155,0.15) !important;
}

/* Dropdown menu */
#ds-lead-modal .select2-results__option {
    padding: 10px 14px !important;
    font-size: 15px !important;
}

#ds-lead-modal .select2-results__option--highlighted {
    background: #F3F4F6 !important;
    color: #111 !important;
}

/* V. Social Proof */
/* Chỉ center nội dung của row cha */
.solution-icon-row{
  display: grid !important;
  place-items: center !important; /* = justify + align đều center */
}

.solution-icon-inner{
  justify-content:center !important;
  align-items:center !important;
  width:fit-content !important;
  margin-inline:auto !important;
}





/*=========================================== II. Report PAGE EDITS ============================================*/

/* 1. Báo Cáo Hành Vi Tìm Kiếm Sản Phẩm của Người Tiêu Dùng TMĐT */

/*màn báo cáo - chỉnh icon phần lợi ích - BẠN NHận được gì từ báo cáo này */
.icon-belifit-report{
	width: 58px;
  height: 58px;
  flex-shrink: 0; 
	 display: flex;
  align-items: center;
  justify-content: center;
	background: linear-gradient(135deg, #EEF5FE 0%, #FEF3FE 100%) !important;
	
}
.icon-belifit-report img {
  width: 100%;
  height: 100%;
  object-fit: contain;  
	transform: scale(2.5); 
}

/* Hero Section */

/* chip */


.pr-chip, .pr-chip * {
  border-radius: 20px;
	display: inline-block;
	width: fit-content;
}

.pr-price-sale{
	border-radius: 10px;
}

.pr-info h1{
  font-size: 32px; 
  line-height: 1.2;
  font-weight: 700; 
}


/* price */

@media (max-width: 768px) {
  .page-id-477 .row-price {
    padding-left: 16px !important; 
  }
	
}


/* badges row spacing */
.page-id-477 .pr-badges .wp-block-columns,
.page-id-477 .pr-badges .wp-block-row {
  gap: 12px;
}

/* badge box */
.page-id-477 .pr-badges .wp-block-column,
.page-id-477 .pr-badges .badge {
  background: #fafafa;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid #eee;
}

/* card box */
.page-id-477 .pr-desc.card,
.page-id-477 .pr-know.card {
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 24px;
}

/* heading trong card */
.page-id-477 .pr-desc.card h4,
.page-id-477 .pr-know.card h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 14px;
}

/* paragraph trong card */
.page-id-477 .pr-desc.card p,
.page-id-477 .pr-know.card p,
.page-id-477 .pr-know.card li {
  font-size: 15px;
  line-height: 1.5;
  color: #444;
}

/* CTA */
/* .page-id-477 .pr-cta .wp-block-button__link,
.page-id-477 .pr-cta button,
.page-id-477 .pr-cta a {
  display: block;
  width: 100%;
  background: #000 !important;
  color: #fff !important;
  border-radius: 80px;
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
} */





/* 1. CTA full-width trong phần Nhà bán hàng cần biết */
.page-id-477 .pr-cta-row {
  width: 100% !important;
}

/* 1.1.Container Buttons phải giãn full theo chiều ngang */
/* .page-id-477 .pr-cta-row .wp-block-buttons {
  width: 100% !important;
  display: block !important;     
  margin: 0 !important;
} */


.pr-cta-row .wp-block-buttons {
  width: 100% !important;
  display: block !important;     /* bỏ inline-flex kìm kích thước */
  margin: 0 !important;
}

/* 1.2 Block Button chiếm full container */
/* .page-id-477 .pr-cta-row .wp-block-button {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
} */

.pr-cta-row .wp-block-button {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}



/* 1.3 Link bên trong thực sự là vùng bấm full width */
/* .page-id-477 .pr-cta-row .wp-block-button__link {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  font-size: 18px !important;
  font-weight: 600;
  text-align: center;


  color: #fff !important;
} */

.pr-cta-row .wp-block-button__link {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;

  border-radius: 12px !important;

  font-size: 18px !important;
  font-weight: 600;
  text-align: center;

  color: #fff !important;
}

/*477 - Group 2 */
/* .page-id-477 .agenda-ndbc{
	margin-bottom: 20px;
}
.page-id-477 .agenda-outstanding{
	margin-bottom: 20px;
} */

.agenda-ndbc{
	margin-bottom: 20px;
}
.agenda-outstanding{
	margin-bottom: 20px;
}

@media (max-width: 768px) {

  /* CTA sticky bottom (fix ở dưới)*/
  /* .page-id-477 .pr-cta-row {
      order: 8;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 14px 18px;
      background: #fff;
      z-index: 9999;
      box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
  } */

  /* CTA button full width */
  /* .page-id-477 .pr-cta-row .wp-block-button__link {
      width: 100% !important;
      padding: 16px 20px !important;
      border-radius: 14px !important;
      font-size: 18px !important;
  } */

  /* Đẩy nội dung nhường chỗ cho CTA sticky */
  /* .page-id-477 .pr-know.card {
      margin-bottom: 90px !important;
  } */
	
	
	/*Căn giữa CTA trên mobile*/
	/* .page-id-477 .pr-cta-row {
      position: fixed;
      bottom: env(safe-area-inset-bottom);
      left: 0;
      right: 0;
      width: 100vw !important;
      margin: 0 !important;
      padding: 5px 10px !important;
      background: #fff;
      box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  } */
	

  /* .page-id-477 .wp-block-columns {
      gap: 0 !important;
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
  } */

  /* Xoá margin-bottom mặc định mà Gutenberg thêm vào mỗi Column */
  /* .page-id-477 .wp-block-column {
      margin-bottom: 8px !important;
      padding-bottom: 0 !important;
    } */

  /* CTA sticky bottom (fix ở dưới)*/
  .pr-cta-row {
      order: 8;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 14px 18px;
      background: #fff;
      z-index: 9999;
      box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
  }

  /* CTA button full width */
  .pr-cta-row .wp-block-button__link {
      width: 100% !important;
      padding: 16px 20px !important;
      border-radius: 14px !important;
      font-size: 18px !important;
  }

  /* Đẩy nội dung nhường chỗ cho CTA sticky */
  .pr-know.card {
      margin-bottom: 90px !important;
  }
	
	
	/*Căn giữa CTA trên mobile*/
	.pr-cta-row {
      position: fixed;
      bottom: env(safe-area-inset-bottom);
      left: 0;
      right: 0;
      width: 100vw !important;
      margin: 0 !important;
      padding: 5px 10px !important;
      background: #fff;
      box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  }
	

  .wp-block-columns {
      gap: 0 !important;
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
  }

  /* Xoá margin-bottom mặc định mà Gutenberg thêm vào mỗi Column */
  /* .page-id-477 .wp-block-column {
      margin-bottom: 8px !important;
      padding-bottom: 0 !important;
    } */



	
}

/*You may also Like màn báo cáo Mobile */

@media (max-width: 767px) {

  /* ===== SWIPER CONTAINER ===== */
  .report-mobile-swiper-wrapper {
    padding: 0 12px;
		padding-left: 16px;
		padding-right: 0; 
		overflow: hidden;
		font-family: 'Inter Tight', sans-serif;
  }

  .reportMobileSwiper {
    overflow: visible;
  }

  
  /* ===== SLIDE ===== */
  .reportMobileSwiper .swiper-slide {
    width: 150px !important;     
    max-width: 340px;
   
  }

  /* ===== CARD ===== */
  .report-card {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  }

  /* ===== IMAGE ===== */
  .report-card-image img {
/*     display: block; */
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 0px;
/*     object-fit: cover; */
  }

  /* ===== TAG + TITLE ===== */
  .report-card-body .report-tag {
    display: inline-block;
    padding: 2px 4px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    margin-bottom: 4px;
  }

  

  /* ===== PRICE ===== */
  .report-price {
    display: flex;
    align-items: center;
    gap: 4px;
		flex-wrap: wrap;
  }

  .report-price .price-main {
    font-size: 14px;
    font-weight: 700;
    color: #E53935;
		
  }

  .report-price .price-old {
    font-size: 12px;
    color: #9E9E9E;
    text-decoration: line-through;
		align-self: flex-start ;
		margin-top: -3px;
		
  }

  .report-price .price-discount {
/*     background: #F4A261; */
		background: #e3949f;
    color: white;
    padding: 2px 6px;
    font-size: 9px;
    border-radius: 6px;
    font-weight: 600;
  }
	
	.reportMobileSwiper .swiper-pagination {
/*     position: relative;
    margin-top: 14px;
    background: transparent !important;
    height: auto !important; */
		  display: none !important;
  }

}




/*============================================ REPORT PAGE - CONTINUE ============================================*/
/* Đổi thứ tự của ảnh và text phần chi tiết báo cáo */
@media (max-width: 768px) {
	/* ===== Column Highlight ===== */
  .column-highlight {
    display: flex !important;
    flex-direction: column !important;
  }

  .column-highlight .column-text-highlight {
    order: 1;
  }

  .column-highlight .column-image-highlight {
    order: 2;
  }
	
}




/*==== REPORT PAGE - PD Gallery Mobile/ Desktop - Phần 3 ảnh demo báo cáo để vuốt, trượt ============================================*/

/* ===== DESKTOP ===== */
@media (min-width: 769px) {
  .pd-gallery--mobile {
    display: none !important;
  }
}


/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .pd-gallery--desktop {
    display: none !important;
  }

  .pd-gallery--mobile {
		font-family: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    display: block;
		max-width: 100%;
    margin: 0 2px;
/*     padding: 8px; */
		padding-bottom:2px;
  }

  .pd-swiper img {
    width: 80%;
		height: auto;
    max-height: 320px;
    object-fit: contain;
		
		display: block;
  	margin: 12px auto;
  }

  .swiper-pagination {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,.55);
    color: #fff;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 13px;
  }

  /*Hide content */
  .pr-chip{
    display:none !important;
  }
	.row-price,pr-price,pr-price-gach,pr-price-sale {
		display:none;
	}
	.pr-title{
		display:none;
	}


  .pd-swiper {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
  }



  /* Pagination kiểu Fahasa */
  .pd-swiper .swiper-pagination{
    position: absolute;
    bottom: 10px;
    right: 10px;
    left: auto;
    width: auto;
    padding: 4px 8px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 13px;
    border-radius: 999px;
  }

  .pd-gallery--mobile {
        max-width: 92%;
        padding: 10px;
        margin: 0 auto 5px auto;
        border-radius: 12px;

  }
	.pd-gallery-status {
    padding: 8px 25px;
	  margin-left: -24px;
    margin-right: -24px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
		font-style: italic;
/*     background: linear-gradient(90deg, #db5c02, #faaa75); */
		background: linear-gradient(-90deg, #FF7337 0%, #e35246 80%);
		
    text-align: left;
  }
	
		 
/* Wrapper cụm giá */
  .pr-price-mobile {
    display: flex;
    align-items: baseline; 
    gap: 8px;

    width: 100%;
/*     padding: 6px 16px 2px 16px; */
		padding-top: 10px;
		
    margin: 0;
    box-sizing: border-box;

    flex-wrap: nowrap; 
  }

  /* Giá hiện tại */
  .price-mobile {
    font-size: 22px;
    font-weight: 700;
    color: #e53935; 
    line-height: 1.2;
		white-space: nowrap;
  }

  /* Giá gạch */
  .pr-price-mobile .pr-price-gach-mobile {
    font-size: 17px;
	    color: #9e9e9e;
    text-decoration: line-through;
		font-weight: 450;
    line-height: 1.2;
		white-space: nowrap;
		
		 position: relative;
  	 top: -1.5px; 
  }

  /* % giảm */
  .pr-price-mobile .pr-price-sale-mobile {
    font-size: 14px;
    font-weight: 600;
    color: #fff;              
    background: #00AA9B;       
    padding: 2px 6px;
    border-radius: 999px;
    line-height: 1.2;
		white-space: nowrap;
		
		position: relative;
  	top: -3px;
  }

 .pr-title-mobile {
    width: 100%;
  	padding-top: 2px;
    margin-bottom: 0px;

    font-size: 23px;
    font-weight: 700;
    line-height: 1.4;
    color: #222;
		word-break: break-word;
   
  }
	
	.page-id-477 .pr-badges,
  .page-id-477 .pr-badges .wp-block-columns {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .page-id-477 .pr-badges .wp-block-column {
    margin-top: 0 !important;
    padding-top: 6px !important;
  }

}

/* ============================================
   REPORT PAGE-  FORM MODAL - STYLE
============================================ */

/* Ẩn modal mặc định */
#rp-report-modal {
    display: none;
}

/* Modal wrapper - CSS chung*/
.rp-modal {
    position: fixed;
    inset: 0;
    width: 100%;

    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: 0.25s ease;
    z-index: 99999;
	
    box-sizing: border-box;
}

/* Khi modal được open (JS sẽ set aria-hidden=false) */
.rp-modal[aria-hidden="false"] {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Overlay */
.rp-modal-overlay {
    position: fixed;
    inset: 0;
     background: rgba(0, 0, 0, 0.6);
    z-index: 99998;
    display: block;
}

/* Modal box */
.rp-modal-box {
		max-width: 860px;
	 	width: 90%;
	
    height: auto;
    max-height: 93vh;  
	
    box-shadow: none;
    position: fixed;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);

    border-radius: 22px;
  	padding: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    z-index: 99999;
		background: url("https://datashop.vn/wp-content/uploads/2025/12/Gemini_Generated_Image_6m8m3x6m8m3x6m8m.jpg") center / cover no-repeat;
	
	
	}

/* Close button */
.rp-modal-close {
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
		color: #fff;
		

}


.rp-modal-content {

		flex-direction: column;
    align-items: center;
    gap: 0;
	
}


.rp-left {
   	width: 100%;
    text-align: center;
    margin-bottom: 16px;
		margin-top: 10px;
}

.rp-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 2px;
		margin-top: 12px;
		color: #fff;
}

.rp-desc {
    font-size: 16px;
/*     color: #6b7280; */
		color: #fff;
		margin: 0;       
}



/* ===== FORM CARD STYLE ===== */
.rp-right {
    width: 100%;
		max-width: 600px;

		margin: 0 auto; 
    background: #fff;
    padding: 18px 26px;
    border-radius: 18px;
/*     border: 1px solid #e6e6e6; */
		border: none;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* Các field form */
.rp-field {
/*     display: flex;
    flex-direction: column; */
    margin-bottom: 10px;
}

.rp-field label {
    font-size: 15px;
    margin-bottom: 6px;
    font-weight: 500;
}

.rp-field label span {
    color: #f05526;
}

.rp-field input {
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: none;
    background: #f3f4f6; 
    font-size: 15px;
    color: #111827;
}
.rp-field input::placeholder {
    color: #9ca3af;
}

.rp-field input:focus {
    outline: none;
    background: #eef2ff;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.25);
}


/* Nút submit */
.rp-submit-btn {
    margin-top: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: none;
/*     background: #20d6c7; */
		background:#f09a56;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;

}

.rp-submit-btn:hover {
/*     background: #14c2b4; */
		background: #F15A27;
}

/* Bottom Sheet cho Mobile*/
@media (max-width: 1024px) {
		
		 /* Modal wrapper chỉ làm overlay */
  #rp-report-modal {
    position: fixed;
    inset: 0;
/*     padding: 0;
    margin: 0; */
    z-index: 99999;
  }
	
	#rp-report-modal .rp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
  }

	 /* Bottom sheet thật sự */
  #rp-report-modal .rp-modal-box {
    position: fixed !important;
    bottom: 0px;
    left: 0;
    right: 0;
		top:auto;
		width: 100% !important;
    max-width: 100% !important;

/*     margin: 0 !important; */
    padding: 20px 16px 10px;
    box-sizing: border-box;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
  }

	/* Khi mở */
  #rp-report-modal[aria-hidden="false"] .rp-modal-box {
    transform: translateY(0);
  }
	

	
/* 	Thanh ngang bottom sheet như iphone
 */
/*   .rp-modal-box::before {
    content: "";
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #ddd;

    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
  }
 */
  .rp-right {
    max-width: 100%;
    padding: 20px 16px;
    border-radius: 16px;
  }

  .rp-submit-btn {
    height: 48px;
    font-size: 16px;
    border-radius: 12px;
  }
	
}

/* error styles for report form */
.rp-field.error input,
.rp-field.error textarea {
  border-color: #e57373;
  background: #fff6f6;
}

.rp-error-msg {
  margin-top: 2px;
  color: #d32f2f;
  font-size: 13px;
}

/* ===== MODAL ANIMATION ===== */

/* Desktop */
@media (min-width: 1025px) {
.rp-modal-box {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease;
	}

/* Khi modal mở */
.rp-modal[aria-hidden="false"] .rp-modal-box {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
	}

/*Khi đóng*/
.rp-modal[aria-hidden="true"] .rp-modal-box {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
	}
	
}

/* ===== MOBILE BOTTOM SHEET ANIMATION ===== */
@media (max-width: 1024px) {
  #rp-report-modal .rp-modal-box {
    opacity: 1; /* không fade */
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
		
  }

  #rp-report-modal[aria-hidden="false"] .rp-modal-box {
    transform: translateY(0);
  }

  #rp-report-modal[aria-hidden="true"] .rp-modal-box {
    transform: translateY(100%);
  }
}





/*Form thu lead báo cáo*/
/* ==== POPUP PANEL STYLE (Desktop) ==== */
.report-modal-panel {
    background: #ffffff !important;
    border-radius: 22px !important;
    border: 2px solid rgba(0, 170, 155, 0.35) !important; /* #00AA9B nhưng nhạt */
    padding: 28px 32px !important;
    max-width: 520px !important;
    margin: 60px auto !important;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.08) !important;
}

/* Close icon */
.report-modal-close {
    font-size: 24px !important;
    font-weight: 600;
    color: #4a4a4a;
    background: none;
    border: none;
    cursor: pointer;
}

/* ==== MOBILE BOTTOM SHEET ==== */
@media (max-width: 767px) {
    .report-modal-panel {
        border-radius: 20px 20px 0 0 !important;
        border: 2px solid rgba(0, 170, 155, 0.35) !important;
        padding: 20px 18px !important;
        margin: 0 !important;
        max-width: 100% !important;
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
        max-height: 88vh;
        overflow-y: auto;
			  padding-bottom: 5px !important; 
			/* chừa chỗ cho nút */
    }
	

	
}

/* Input styling */
.report-form-wrapper .forminator-input,
.report-form-wrapper input[type="text"],
.report-form-wrapper input[type="email"],
.report-form-wrapper input[type="tel"] {
    border-radius: 14px !important;
    padding: 12px 14px !important;
    background: #fff !important;
    border: 1.5px solid #e3e3e3 !important;
    font-size: 15px !important;
}

/* Label */
.report-form-wrapper .forminator-label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

/* Submit button */
.report-form-wrapper .forminator-button-submit {
    background: #F15A27 !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    padding: 14px !important;
    border-radius: 12px !important;
    width: 100% !important;
    border: none !important;
    transition: 0.25s;
}

.report-form-wrapper .forminator-button-submit:hover {
    opacity: 0.88;
}

.report-popup-heading {
    font-size: 22px;
    font-weight: 700;
    color: #00AA9B; /* màu thương hiệu Datashop */
    margin-bottom: 6px;
}

.report-popup-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 18px;
}

.report-modal-backdrop {
    background: rgba(0,0,0,0.45) !important;
}

/* Hidden by default */
.report-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
}

/* When popup is opened */
.report-modal.show {
    display: block;
}

/* ===== MULTI SELECT DROPDOWN ===== */
.report-dropdown {
    margin-bottom: 20px;
}

.report-dropdown-label {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
    color: #333;
    font-size: 15px;
}

.dropdown-selected {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e3e3e3;
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
    position: relative;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-selected.open {
    border-color: #00AA9B;
}

.dropdown-selected .arrow {
    font-size: 13px;
    margin-left: 10px;
}

.dropdown-options {
    margin-top: 6px;
    border: 1.5px solid #e3e3e3;
    border-radius: 12px;
    background: #fff;
    display: none;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.dropdown-options.show {
    display: block;
}

.dropdown-item {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item input {
    width: 18px;
    height: 18px;
}

.dropdown-item:hover {
    background: #f7f7f7;
}

.dropdown-item .price {
    margin-left: auto;
    color: #777;
    font-size: 14px;
}

@media (max-width: 768px) {
    .dropdown-selected {
        padding: 14px;
        border-radius: 14px;
    }
    .dropdown-options {
        border-radius: 14px;
        max-height: 320px;
    }
}

/* đảm bảo dropdown hiển thị trên cùng và position đúng */
.report-dropdown { position: relative; z-index: 9998; }
#dropdownOptions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 99999 !important;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  max-height: 320px;
  overflow-y: auto;
  display: none;
}
#dropdownOptions.show { display: block; }
.dropdown-item { padding: 10px 14px; cursor: pointer; display:flex; align-items:center; gap:10px; }
.dropdown-item input { pointer-events: auto; }
.dropdown-selected { cursor:pointer; user-select:none; }


/*Phần You might also like*/
/* Thêm 25-12-2025 */
/* Default */
.desktop-only { display: block; }
.report-mobile-swiper-wrapper { display: none; }

/* Mobile */
@media (max-width: 767px) {
  .desktop-only { display: none !important; }
  .report-mobile-swiper-wrapper { display: block !important; }
}



/* 1.CARD WRAPPER - cột báo cáo recommnent */
.column-recommend-item {
    background: #ffffff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: .3s ease;
    text-align: left;
    width: 100%;
   
	 
}
.card-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
}


.column-recommend-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    cursor: pointer;
}

/*Ảnh báo cáo*/
.image-recommend-report {
	display: block;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    margin-bottom: 15px;
	 	margin-left: auto;
    margin-right: auto;

    object-fit: cover;
}

/*Row Name (Nhãn + Tiêu đề báo cáo)*/
.row-name {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.row-name .report-tag {
/*     background: #E53935; */
    color: white;
   
    font-weight: 600;
    border-radius: 6px;
   
    line-height: 1.2;
    white-space: normal;
}

.row-name .report-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #1A1A1A;
}
/* Ép row-name trở thành flex ngang */
.row-name {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Badge */
.row-name .report-tag {
    display: inline-block !important;
/*     background: #e60000 !important; */
    color: #fff !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.tag-new {
    background: #F15A27; 
    color: white;
}
.tag-appreciated {
    background: #e60000;  
    color: white;
}
.tag-popular {
    background: #00AA9B;
    color: #fff;
}



/* EP title đứng cùng hàng */
.row-name .report-title {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}


/*Row Price (Giá, giảm giá, giá gạch)*/
.row-price-1 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.row-price-1 .price-main {
    font-size: 18px;
    font-weight: 700;
    color: #E53935;
}

.row-price-1 .price-old {
    font-size: 14px;
    color: #9E9E9E;
    text-decoration: line-through;
}

.row-price-1 .price-discount {
    background: #E53935;
    color: white;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}



/*Mobile riêng */
/* Mobile */
/*Tạm ẩn 25-12-2025*/
/* @media (max-width: 768px) {
  .recommend-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px !important;
    padding-bottom: 10px;
		scroll-padding-left: 16px;
    scroll-padding-right: 16px;
  }

  .column-recommend-item {
    min-width: 85%;
    scroll-snap-align: center;
		 transform: scale(0.8);

  }
	.report-swiper .swiper-wrapper {

	gap: 10px;
}
	 .report-swiper .swiper-slide {
      scroll-snap-align: start;  
		  width: 70% !important;
  }
	.report-swiper .row-price {
      padding-left: 0px !important;  
      
  }

} */

/*3. Group card mới */
/* Cho mỗi slide đúng 320px */
.report-swiper .swiper-slide {
  width: 320px !important;

}

/* Cho wrapper co giãn ngang */
.report-swiper .swiper-wrapper {
  display: flex !important;
	gap: 60px;
}




.report-swiper .row-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

/* Giá chính */
.report-swiper .price-main {
    font-size: 20px;
    font-weight: 700;
    color: #D70000;
}

/* Giá gạch */
.report-swiper .price-old {
    font-size: 14px;
    color: #999;
}

/* % giảm */
.report-swiper .price-discount {
    background: #F4A261;    /* theo brand Datashop */
    color: white;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 4px;
    font-weight: 600;
}



/*Phần Feedback - Testimonials*/
/* CARD WRAPPER */

/* Wrapper cho testimonial custom HTML */
.testimonial-static {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Inter Tight', sans-serif !important;
}

/* Mobile */
@media (max-width: 1023px) {
  .testimonial-static {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


.t-card {
  background: #fff;
  padding: 20px;
  border: 1px solid rgba(229, 231, 235, 0.8);
  border-radius: 18px;
  /* box-shadow: 0 6px 18px rgba(0,0,0,0.06); */
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.06);
  width: 100%;
  max-width: 380px;
  min-height: 320px;
	max-height: 360px;
	height: auto;
	overflow: hidden;
  display: flex;
  flex-direction: column;
	flex: 0 0 auto;
  gap: 16px;
	margin-top: 14px; 
	margin-bottom: 14px; 
}

/* QUOTE ICON */
.t-card-quote svg {
  opacity: 0.9;
	fill: #00AA9B !important;
}
.t-card-quote {
  background: #fff; 
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
	border: 2px solid #e5e7eb;
}


/* MAIN TEXT */
.t-card-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: #374151;
  margin: 0;
  font-family: 'Inter Tight', sans-serif ;
}

.t-card-text .highlight {
  color: #ea580c; /* màu cam nhấn */
  font-weight: 600;
}

/* DIVIDER LINE */
.t-card-divider {
  width: 100%;
  height: 1px;
  background: #e5e7eb;
  margin-top: auto;
}

/* USER */
.t-card-user {
  display: flex;
  align-items: center;
  gap: 12px;

}

.t-card-user img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.t-card-name {
  font-weight: 600;
  font-size: 15px;
  color: #111827;
}

.t-card-username {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}














/* ============================================
   REPORT FORM MODAL - STYLE
============================================ */

/* Ẩn modal mặc định */
/*#rp-report-modal {
    display: none;
}*/

/* Modal wrapper */
/*.rp-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: 0.25s ease;
    z-index: 99999;
}*/

/* Khi modal được open (JS sẽ set aria-hidden=false) */
/*.rp-modal[aria-hidden="false"] {
    display: block;
    opacity: 1;
    visibility: visible;
}*/

/* Overlay */
/*.rp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 99998;
    display: block;
}*/

/* Modal box */
/*.rp-modal-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1100px, 90%);
    background: #fff;
    border-radius: 22px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    z-index: 99999;
}*/

/* Close button */
/*.rp-modal-close {
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
}*/

/* Nội dung modal: chia 2 cột */
/*.rp-modal-content {
    display: flex;
    flex-direction: row-reverse; 
    gap: 24px;
}*/

/* Left section (title + image nếu có) */
/*.rp-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rp-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}

.rp-desc {
    font-size: 16px;
    color: #555;
}*/

/* Right section (form) */
/*.rp-right {
    width: 50%;
    background: #fff;
    padding: 32px 28px;
    border-radius: 18px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}*/

/* Các field form */
/*.rp-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.rp-field label {
    font-size: 14px;
    margin-bottom: 6px;
    font-weight: 500;
}

.rp-field input {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    width: 100%;
    font-size: 15px;
}*/

/* Nút submit */
/*.rp-submit-btn {
    margin-top: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: none;
    background: #4f46e5;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.rp-submit-btn:hover {
    background: #4338ca;
}*/

/* Responsive */
/*@media (max-width: 768px) {
    .rp-modal-content {
        flex-direction: column;
    }

    .rp-left,
    .rp-right {
        width: 100%;
    }
}*/

/* error styles for report form */
/*.rp-field.error input,
.rp-field.error textarea {
  border-color: #e57373;
  background: #fff6f6;
}

.rp-error-msg {
  margin-top: 8px;
  color: #d32f2f;
  font-size: 13px;
}*/


/*=========================================== CHECK OUT PAGE ============================================*/

/*V. Checkout - màn thanh toán - code mới 2026*/
@media (max-width: 1024px) {
   /*Ẩn "Thành tiền" trong header row trên mobile */
  .checkout-custom__header-row .checkout-custom__col-price {
    display: none !important;
  }
	 /* 2a) Ẩn những dòng không cần thiết trong summary */
  .checkout-custom__summary-card .checkout-custom__summary-row:not(.total),
  .checkout-custom__summary-card .checkout-custom__summary-row .muted,
  .checkout-custom__summary-card .checkout-custom__summary-row .small {
    display: none !important;
  }

	 /*Biến summary card (cột phải) thành footer cố định*/
	.checkout-custom__summary-card {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
/*     margin: 0 auto !important; */
    border-radius: 0 !important;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
    padding: 0px 0px !important ;
    z-index: 99999;
    background: #fff !important;
    display: flex;
    align-items: center;
/* 		min-height: 64px; */
		margin-left: 0px !important;
  }
	
	/* Chat */
	.checkout-mobile-chat {
		flex: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		font-size: 11px;
		color: #EE4D2D;
		min-width: 42px;
		margin-left: 0 !important;
		padding: 0 !important;
		transform: translateX(-6px);
		position: relative;
	}
	
	.checkout-mobile-chat::after {
		content: "";
		position: absolute;
		right: 10px;          /* chỉnh theo mắt */
		top: 53%;
		transform: translateY(-50%);
		width: 1px;
		height: 36px;
		background: #F4A261;
  }

  .checkout-mobile-chat:active {
    opacity: 0.7;
  }

  .checkout-chat-icon {
    width: 40px;
    height: auto;
    background: none;
/*     border-radius: 50%; */
/*     margin-bottom: 2px; */
		margin: 0px;
		padding: 0px;
  }

  .checkout-chat-text {
     font-size: 12px;
		font-weight: 500;
/* 		color: #EE4D2D; */
		color: #2B2D42;
		line-height: 1;
		margin-bottom: 2px;
  }
  	
	/* Input nền xanh nhạt */
.co-field input[type="text"],
.co-field input[type="email"],
.co-field input[type="tel"] {
  /*   width: 100%;
  padding: 10px 12px;

  border-radius: 10px;
  border: 1px solid #e5e7eb;
 */
  background: rgba(0, 170, 155, 0.12); /* xanh nhạt 20% */
  color: #222;

  }

  /* Tổng và nút (gọn, to, dễ bấm) */
  .checkout-custom__summary-card .checkout-custom__summary-row.total {
		flex: 2;
		flex-direction: column;
		justify-content: center;
		gap: 2px;
		align-items: flex-start;
		padding: 0px 0px 0px 0px !important;
  }
	
	.checkout-custom__summary-card .checkout-custom__summary-row.total .tong-so-tien {
    font-size: 14px;
    color: #2B2D42;
    font-weight: 500;
    line-height: 1;
		margin-bottom: 4px;
  }
	
	 .checkout-custom__summary-card .checkout-custom__summary-row.total .gia-tien-total {
    font-size: 16px;
    font-weight: 800;
  /*     color: #F15A27; */
		color: #c22b27; 
    line-height: 1;
		margin-top: 1px;
  }
	
	/* 5) Compact pay button on the right */
  .checkout-custom__btn-pay {
		flex: 3;
		
    width: auto;
	
		white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    border-radius: 0px !important;
    background: #c22b27 ;
    color: #fff ;
    border: none !important;
    box-shadow: none !important;
		
    margin: 0 !important;
		padding: 0px 0px !important;
		
		height: 46px;

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

  }

  .checkout-custom__items {
    display: none;
  }
	.checkout-custom__header-row {
    display: none !important;
    }

  .checkout-custom__left{
    display: none;
  }
	.checkout-custom__title{
		 display: none !important;
	}
	
	.checkout-custom__layout {
    display: block !important;
    width: 100vw;
    margin: 0;
    padding: 0;
  }

  .checkout-custom__right {
    width: 100% !important;
    flex: none !important;
    max-width: 100%;
  /* 		margin: 0px 8px !important; */
		 padding: 0 8px;
  }

  /* 	Cụm form báo cáo nhận */
	.checkout-form-wrapper {
    background: #fff;
    border: 1px solid #eee;
		border-top: none;
    border-radius: 12px;
		width: calc(100% - 28px) !important; 

    margin: 12px auto;         
    padding: 0;    
		box-sizing: border-box;
		
  /*   	overflow: hidden; */
  }

  
  .checkout-received-report {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed #eee;
    background: #fff;
  }

  /*Cụm báo cáo nhận */
  .checkout-received-report .checkout-section-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
/*     color: #333; */
		padding-left: 16px;
		padding-top: 0px;
		margin-top: 8px;
  }

  .checkout-received-report__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* ===== Item báo cáo nhận ===== */
	.checkout-received-report__item {
    padding: 4px 4px;
  }
 	
	.checkout-received-report__inner {
		display: flex;
		align-items: center;
		gap: 12px;

		padding: 12px;
		border-radius: 12px;

		background: transparent;
		box-shadow: none;

		transition: background 0.2s ease, box-shadow 0.2s ease;
	}

/* 	Xử lý màu nền khi được chọn */
		.checkout-received-report__item:has(
		.received-report-checkbox input:checked
	) .checkout-received-report__inner {
/* 		background: rgba(244, 162, 97, 0.18);
		box-shadow: inset 0 0 0 1px rgba(244, 162, 97, 0.55); */
				background: rgba(0, 170, 155, 0.12);
		box-shadow: inset 0 0 0 1px rgba(0, 170, 155, 0.50);
		
	}

  /* 	Cụm báo cáo hữu ích khác */
	.checkout-related-block {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 16px;
    margin: 12px;
  }

  .checkout-related-block .checkout-section-title {
    margin-bottom: 10px;
		padding-left: 0px;
		font-size: 17px;
    font-weight: 600;
  }
	
	.related-report-item {
		margin: 0 !important;
		padding: 0 !important;
		gap: 0 !important;
	}

  

  .checkout-related-reports__list {
    max-height: 300px;        /* ~2.5 item */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-right: 4px;
  }

  /* scrollbar gọn */
  .checkout-related-reports__list::-webkit-scrollbar {
    width: 4px;
  }
  .checkout-related-reports__list::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
  }

  .checkout-relate-report__item {
	  display: flex;
		align-items: center;
		gap: 0px;
		padding: 4px 0;
		margin: 6px 0;
	}

  .checkout-relate-report__item:has(
  .received-report-checkbox input:checked
  ) .checkout-relate-report__inner {
  /*   background: rgba(244, 162, 97, 0.18);
  box-shadow: inset 0 0 0 1px rgba(244, 162, 97, 0.55); */
	background: rgba(0, 170, 155, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 170, 155, 0.50);
		
  }

  	/* Checkbox wrapper */
	.received-report-checkbox {
		flex: 0 0 24px;
		display: flex;
		justify-content: center;
		padding-top: 6px;
	}

	/* Ẩn checkbox gốc */
	.received-report-checkbox input {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	/* Checkbox custom */
	.received-report-checkbox .custom-checkbox {
		width: 20px;
		height: 20px;
/* 		border: 2px solid #ff7a00; */
		border: 2px solid #00AA9B;   
		border-radius: 4px;
		background: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}


	/* Checked state */
	.received-report-checkbox input:checked + .custom-checkbox {
/* 		background: #ff7a00;
		border-color: #ff7a00; */
		background: #00AA9B;
		border-color: #00AA9B; 
	}

	.received-report-checkbox input:checked + .custom-checkbox::after {
		content: "✓";
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
	}
	
/* 	Thumnail  */
	.received-report-thumb {
		flex: 0 0 52px;
	}

	.received-report-thumb img {
		width: 65px;
		height: auto;
		display: block;
		border-radius: 4px;
	}

/* 	Tên báo cáo + giá tiền */
	.received-report-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.received-report-title {
		font-size: 14px;
		font-weight: 600;
		color: #333;
		line-height: 1.4;
	}

	.received-report-price {
		font-size: 14px;
		font-weight: 700;
		color: #EE4D2D;
	}

  /* ===== Checkbox "Chọn tất cả" ===== */
	.checkout-select-all {
		display: flex;
		align-items: center;
		gap: 12px;
		cursor: pointer;
		color: inherit;
		font-weight: 400;
		-webkit-tap-highlight-color: transparent;
		padding-left: 14px !important;
/* 		padding-right: 12px !important; */
		
		width: 100%;
  	box-sizing: border-box;
	}

  .checkout-select-all input {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}
	
	.custom-checkbox-all-relate {
		width: 20px;
		height: 20px;
		border: 2px solid #00AA9B;   
		
		border-radius: 4px;
		background: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

		.checkout-select-all input:checked + .custom-checkbox-all-relate {
/* 		background: #00AA9B;
		border-color: #00AA9B; */
			background: #2B2D42;
			border-color:#2B2D42;
	}
	
		.checkout-select-all input:checked + .custom-checkbox-all-relate::after {
		content: "✓";
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
	}

  /* 	Thêm nền xanh khi bấm chọn tất cả, tạm ẩn nếu không cần*/
  /* 	.checkout-select-all:has(input:checked) {
		background: rgba(0, 170, 155, 0.12);
		border: 1px solid rgba(0, 170, 155, 0.45);
		border-radius: 8px;
	} */


	.checkout-relate-report__inner {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 4px 12px;
    border-radius: 12px;
    margin: 0px 0px !important;

    background: transparent;
    box-shadow: none;
    width: 100%;

    transition: background 0.2s ease, box-shadow 0.2s ease;
  }

	.received-report-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;    /* tối đa 2 dòng - visual code báo lỗi nhưng ko phải lỗi */
    -webkit-box-orient: vertical;
    overflow: hidden;

    line-height: 1.35;
  }



/* Form mobile */
 .checkout-form-wrapper .checkout-title {
    margin: 0px 0px 8px 0px;
    padding: 10px 16px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;                 
    background: #00AA9B;     

    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  } 
	 /* Form body */
  .checkout-form-wrapper .customer-info-form form {
    padding: 8px 16px 4px 16px;
  }

	

  

  



}


























/*1. Tittle */
/*.checkout-custom__title {
  max-width: 1200px;
  margin-bottom: 16px;
  padding-left: 16px;
  display:flex;
 	align-items: center;
  gap: 10px;
}
.checkout-custom__title h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
	color: #333;
}
.checkout-custom__title-count {
  color: var(--cc-muted);
  font-size: 15px;
	color: #777;
  margin-top: 2px;
}*/


/* Color system - Css chung */
.checkout-custom {
  --cc-bg: #ffffff;
  --cc-bg-muted: #f6f6f6;
  --cc-border: #ececec;
  --cc-primary: #c62828; 
  --cc-accent: #1976d2;  
  --cc-text: #222;
  --cc-muted: #6b6b6b;
  --cc-radius: 10px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--cc-text);
  box-sizing: border-box;
}

/* Container layout - Content */
/*.checkout-custom__layout {
  max-width: 1300px;
  margin: 14px auto;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 0 12px;
}*/

/*.datashop-table-checkout {
   border-collapse: collapse;
}

.datashop-table-checkout tbody td {
  border-bottom: 1px solid #eee;

}*/

/* Hàng dữ liệu hover nhẹ */
/* .datashop-table-checkout tbody tr:hover {
  background-color: #fcb983;
  transition: 0.25s;
} */


/*Cột thanh toán bên phải*/
.checkout-custom__right {
  width: 350px;
  flex: 0 0 350px;
}

/* Summary card on right */
/* .checkout-custom__summary-card {
  padding: 18px;
  position: relative;
  margin-top: 0;
  border-radius: var(--cc-radius);
} */
/* .checkout-custom__summary-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  font-size: 15px;
  color: #555555;
  border-bottom: 1px dashed #f0f0f0;
} */
.checkout-custom__summary-row.total {
  border-bottom: none;

  color: var(--cc-primary);

  padding-top: 16px;
}

/* .tong-so-tien {
	 font-size: 16px;
	font-weight: 400;
} */

.gia-tien-total {
	font-weight: 700;
	font-size: 18px;
}

/* Pay button style */
.checkout-custom__btn-pay {
  margin-top: 18px;
  width: 100%;
  display:block;
  background: var(--cc-primary);
  color: #fff;
  padding: 14px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.02) inset;
}

/* Responsive: mobile stack */
/*@media (max-width: 980px) {
  .checkout-custom__layout {
    display: block;
    padding: 0 12px;
  }
  .checkout-custom__right {
    width: 100%;
    margin-top: 14px;
  }
 
  .checkout-custom__header-row {
    grid-template-columns: 44px 84px 1fr 84px;
  }

  .checkout-custom__title { padding: 0 12px; }
}*/

/*Cột bảng bên trái */
/* Panel card wrapper for left list */
/*.checkout-custom__items,
.checkout-custom__summary-card {
  background: var(--cc-bg);
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-border);
  box-shadow: 0 2px 8px rgba(20,20,20,0.03);
}*/

/* Header row inside list */
/*.checkout-custom__header-row {
  display: grid;
   grid-template-columns: 1fr 265px 143px; 

 align-items: center !important;
	height: 48px;
  padding: 14px 20px;
	line-height: 1;
  background: #f6f6f6;
  border-radius: 12px;
  border: 1px solid #e8e8e8;
  font-size: 15px;
  font-weight: 600;
  color: #555;
  margin-bottom: 10px;
	
}*/

/* Checkbox + text */
/*.checkout-custom .checkout-custom__check-all {
  display: flex;
  align-items: center;
  gap: 8px;
	
}

.checkout-custom .checkout-custom__check-all input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #1976d2; 
	border-color: #00AA9B;
}*/


/* Cột Thành tiền */
/*.checkout-custom__header-row .checkout-custom__col-price { 
	text-align:right; 

	padding-bottom: 5px;
  color: #555;
	display: flex;
  align-items: center;
}*/

/* --- RESPONSIVE --- */
/*@media (max-width: 900px) {
  .checkout-custom .checkout-custom__header-row {
    grid-template-columns: 1fr 80px 100px;
    padding: 12px 14px;
    font-size: 14px;
  }
	.checkout-custom .checkout-custom__col-price {
  padding-right: 20px;  
		display: flex;
  align-items: center;
	}

}*/

/*@media (max-width: 768px) {
 .checkout-custom__items .checkout-item-select {
		margin-left: 0px;
	}

	.checkout-custom .checkout-custom__header-row {
    grid-template-columns: 1fr 80px 140px;
    padding: 12px 14px;
    font-size: 14px;
  }
	

}*/


/* ===============================
   MOBILE RESPONSIVE (FAHASHA STYLE)
   =============================== */
/*Ẩn 28-12 để fix lại CSS cho Mobile, sửa xong thì restore lại hoặc thay thế*/
/*@media (max-width: 768px) {
	

 .checkout-custom__header-row .checkout-custom__col-price {
    display: none !important;
  } 

    .datashop-table-checkout tbody tr.checkout-row {
        display: block;
        padding: 16px;
        border-radius: 10px;
        margin-bottom: 12px;
        background: #fff;
        position: relative;
    } 

    
    .datashop-table-checkout tbody td {
        display: block;
        border: none !important;
        padding: 6px 0;
    } 

    

    
     .checkout-custom__items .td-thumb {
        float: left;
        width: 60px;
        margin-right: 8px;
    }
	
 .checkout-custom__items .td-checkbox {
    position: absolute;
    left: 12px;                
    top: 50%;                   
    transform: translateY(160%);
    width: 20px;
    height: 20px;
    z-index: 5;
  } */

/* 	
	.td-remove{
		transform: translateY(140%);
	}
    .checkout-custom__items img.checkout-thumb {
        width: 60px !important;

		 transform: translateX(60%);
			
    } */

    /* Nhóm nội dung bên phải */
    /* .checkout-custom__items .td-name,
    .checkout-custom__items .td-price,
    .checkout-custom__items .td-remove {
        margin-left: 100px;   
    } */

    /* Tên sản phẩm xuống dòng đẹp */
    /* .checkout-custom__items .checkout-name {
        font-size: 14px;
        max-width: 100%;
        margin-bottom: 6px;
        line-height: 1.35;
        display: block;
				padding-left: 6px;
				padding-right: 6px;
    } */

    /* Giá tiền ngay dưới tên */
    /* .checkout-custom__items .td-price {
        padding-top: 4px;
				padding-left: 6px;
				padding-right: 6px;
    } */

    /* .checkout-custom__items .checkout-price {
        display: inline-block;
        font-size: 15px;
        font-weight: 700;
        color: #F15A27;
    }
	 */

	
	
    /* Icon xoá đặt bên phải cùng hàng */
    /* .checkout-custom__items .td-remove {
        position: absolute;
        top: 16px;
        right: 16px;
    } */

    /* .checkout-custom__items .checkout-remove-btn {
        font-size: 22px !important;
    } */

    /* Checkbox mobile */
    /* .checkout-custom__items .td-checkbox {
        position: absolute;
        top: 16px;
        left: 16px;
    } */
	
	 /*Biến summary card (cột phải) thành footer cố định*/
	/* .checkout-custom__summary-card {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto !important;

    border-radius: 0 !important;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
    padding: 12px 16px !important;
    z-index: 99999;
    background: #fff !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  } */
	 /* 2a) Ẩn những dòng không cần thiết trong summary */
  /* .checkout-custom__summary-card .checkout-custom__summary-row:not(.total),
  .checkout-custom__summary-card .checkout-custom__summary-row .muted,
  .checkout-custom__summary-card .checkout-custom__summary-row .small {
    display: none !important;
  } */

  /* 2b) Style cho tổng và nút (gọn, to, dễ bấm) */
  /* .checkout-custom__summary-card .checkout-custom__summary-row.total {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 0 !important;
    margin: 0 !important;
  } */

  /* .checkout-custom__summary-card .checkout-custom__summary-row.total .checkout-price,
  .checkout-custom__summary-card .checkout-custom__summary-row.total .summary-total {
    font-weight: 800;
    color: #F15A27;
    font-size: 18px;
  }

  .checkout-custom__summary-card .checkout-pay-button,
  .checkout-custom__summary-card .wp-block-button__link,
  .checkout-custom__summary-card .button {
    min-width: 140px;
    margin-left: 12px;
  } */
	
	/* 3) Không để footer cố định che nội dung: thêm padding-bottom cho vùng nội dung */
  /* .checkout-custom__layout,
  .checkout-custom__items,
  .checkout-custom {
    padding-bottom: 86px !important;  */

  /* 4) Nếu có box-shadow hoặc border trong summary, làm cho nó gọn ở mobile */
  /* .checkout-custom__summary-card {
    border: none !important;
  } */
	
	/* .checkout-custom__btn-pay{
		font-size: 14px;
		padding: 5px 5px;
		white-space: nowrap;
	}
	
	.checkout-custom__summary-card .checkout-custom__summary-row.total {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0;
    margin: 0;
  }
	
	 .checkout-custom__summary-card .checkout-custom__summary-row.total .tong-so-tien {
    font-size: 13px;
    color: #666;
    font-weight: 500;
    line-height: 1;
  } */
	
	 /* .checkout-custom__summary-card .checkout-custom__summary-row.total .gia-tien-total {
    font-size: 18px;
    font-weight: 800;

    line-height: 1;
  }
	 */
	 /* 5) Compact pay button on the right */
  /* .checkout-custom__btn-pay {
    width: auto;
    padding: 8px 14px ;
    font-size: 15px;
    font-weight: 700;
    border-radius: 0px !important;
    background: #c22b27 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
		
		margin-left: auto;        
  } */
	
	
/*}*/

/*Check out table */
/*.datashop-table-checkout {
    max-width: 832px; 
    margin: 0;
    padding: 0;
}

.checkout-thumb {
	width: 100px;
  height: auto;
}*/

/*Xử lý tickbox */
/*.checkout-custom__items .checkout-item-select {
    border-color: #00AA9B;
	 	width: 18px;
  	height: 18px;
		margin-left: 4px;
}


.checkout-custom__items .checkout-item-select:checked {
    background-color: #00AA9B;
    border-color: #00AA9B;
}

.checkout-custom__items .checkout-item-select:checked::after {
    content: "✔"; 
  
    color: #fff;
    position: absolute;
    top: -1px;
    left: 3px;
}*/

/*Tên báo cáo */
/*.checkout-name {
	font-weight: 500;

	font-size: 15px;
}

.td-name {
	padding-right:50px;
}*/
/*Giá tiền */
/*.td-price {
	padding-left: 0px;
}
.checkout-price {
	color: #F15A27;
	font-weight: 700;
}*/


/*BTN remove */
.checkout-remove-btn {
	background: none;
	border: none;
}

/* Khi item được chọn */
/*.checkout-row.selected {
    background-color: rgba(0, 170, 155, 0.15);
    border: 1.5px solid #00AA9B; 
    transition: 0.2s ease;
}*/