/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --bg-texture:none; /* URL thật được JS gán vào lúc chạy, xem assets/nhip-section.js */
  --border-color:#003799;
  --radius:10px;
  --gap:10px;
  --height-desktop:560px;
  --height-tablet:460px;
  --height-mobile-idle:88px;
  --height-mobile-open:560px;

  --fs-title:40px;
  --fw-title:800;
  --fs-sm:14px;
  --fs-md:20px;
  --fw-md:600;

  --ease:cubic-bezier(.65,0,.35,1);      /* smooth "iOS style" easing */
  --dur-slow:700ms;
  --dur-fast:420ms;

  --panel-bg:#04184f;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:"Be Vietnam Pro","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  
}

/* ==========================================================================
   SECTION / LAYOUT
   ========================================================================== */
.nhip-section{
  margin:0 auto;
  /* padding-top thực tế được JS cộng thêm bên dưới, đủ chỗ cho cột cao nhất
     mọc lên mà không bị menu/thanh trên cùng của trang che mất */
  padding-top:calc(56px + var(--grow-clearance, 0px));
}

.nhip-stage{
  position:relative;
  height:var(--height-desktop); /* chiều cao "sàn" cố định = trạng thái mặc định (560px) */
  overflow:visible; /* cho phép cột cao lên vượt lên phía trên mà không bị cắt */
}

.nhip-row{
  position:absolute;
  left:0;
  right:0;
  bottom:0; /* <- "chân"/đáy neo cố định tại đây, mọi hiệu ứng cao lên đều tính từ mốc này */
  display:flex;
  gap:var(--gap);
  align-items:flex-end; /* các cột luôn thẳng hàng ở đáy, cao lên là mọc ngược lên trên */
  z-index:2;
}
.nhip-row.is-expanded{ z-index:6; } /* nổi lên trên nội dung phía dưới khi đang mở rộng */

/* ==========================================================================
   ITEM (COLUMN)
   width NEVER changes on hover — only height changes (per-column, via CONFIG.heights)
   ========================================================================== */
.nhip-item{
  position:relative;
  flex:1 1 0;
  min-width:0;
  height:var(--height-desktop);
  border:2px solid var(--border-color);
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  /* nền GỐC của cả cột luôn là ảnh texture — để bất cứ chỗ nào bị hở
     (ví dụ khung ảnh canh top/bottom không phủ hết 100% chiều cao) cũng
     hoà vào ảnh nền thay vì lộ ra màu phẳng bị "khuyết" như trước */
  background-image:
    linear-gradient(180deg, rgba(2,10,40,.15) 0%, rgba(2,10,40,.35) 100%),
    var(--bg-texture);
  background-size:cover;
  background-position:center;
  padding:0;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  transition:height var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}

.nhip-row.is-expanded .nhip-item.is-active{
  box-shadow:0 18px 40px -12px rgba(0,20,90,.55);
}

.nhip-item:focus-visible{
  outline:3px solid #33FFE6;
  outline-offset:2px;
}

/* three stacked layers inside every item: idle / panel(own content) / photo(borrowed content) */
.nhip-layer{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:scale(1.045);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  will-change:opacity, transform;
}

/* ---- idle layer (default, matches reference "Frame 6") ---- */
.nhip-idle{
  opacity:1;
  transform:scale(1);
  background-image:
    linear-gradient(180deg, rgba(2,10,40,.15) 0%, rgba(2,10,40,.35) 100%),
    var(--bg-texture);
  background-size:cover;
  background-position:center;
  align-items:center;
  justify-content:center;
  padding:24px;
  pointer-events:auto;
}
.nhip-row.is-expanded .nhip-item .nhip-idle{
  opacity:0;
  transform:scale(1.06);
  pointer-events:none;
}

.nhip-title{
  margin:0;
  text-align:center;
  white-space:pre-line;
  font-size:var(--fs-title);
  font-weight:var(--fw-title);
  line-height:1.14;
  letter-spacing:.2px;
  color:#31CFFF; /* fallback for browsers without background-clip:text */
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .nhip-title{
    background:linear-gradient(180deg,#33FFE6 0%,#31CFFF 50%,#3395FF 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color:transparent;
  }
}

/* ---- panel layer: shown on the item that is being hovered/tapped ---- */
.nhip-panel{
  padding:28px 22px;
  overflow-y:auto;
  scrollbar-width:none;
  justify-content:center; /* căn giữa nội dung mô tả theo chiều dọc trong panel khi hover */
  text-shadow:0 1px 3px rgba(0,10,40,.28); /* giữ độ tương phản khi chữ trắng trên nền gradient sáng */
  /* text color theme — mặc định TRẮNG cho toàn bộ chữ trong panel (mọi cột) */
  --p-title:#ffffff;
  --p-body:rgba(255,255,255,.92);
  --p-strong:#ffffff;
}
.nhip-panel::-webkit-scrollbar{display:none;}

/* set panel.theme:"dark" trong CONFIG nếu muốn 1 cột nào đó dùng chữ tối thay vì trắng */
.nhip-item.text-dark .nhip-panel{
  --p-title:#0a1a52;
  --p-body:rgba(10,20,60,.88);
  --p-strong:#0a1a52;
}

.nhip-row.is-expanded .nhip-item.is-active .nhip-panel{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
  transition-delay:60ms;
}

.nhip-panel__title{
  margin:0 0 14px;
  text-align:center;
  white-space:pre-line;
  font-size:28px;
  font-weight:var(--fw-title);
  line-height:1.15;
  color:var(--p-title);
}
/* Toàn bộ mô tả (đoạn giới thiệu / số liệu / danh sách...) giờ đổ chung ra
   từ 1 field WYSIWYG duy nhất -> style chung ở đây cho các thẻ HTML mà
   trình soạn thảo WordPress hay sinh ra (p, strong, ul/ol, li). */
.nhip-panel__desc{
  font-size:var(--fs-sm);
  line-height:1.55;
  text-align:center;
  color:var(--p-body);
}
.nhip-panel__desc p{
  margin:0 0 18px;
}
.nhip-panel__desc p:last-child{
  margin-bottom:0;
}
.nhip-panel__desc strong,
.nhip-panel__desc b{
  color:var(--p-strong);
  font-weight:800;
}
.nhip-panel__desc ul,
.nhip-panel__desc ol{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
}
.nhip-panel__desc ul:last-child,
.nhip-panel__desc ol:last-child{
  margin-bottom:0;
}
.nhip-panel__desc ul li,
.nhip-panel__desc ol li{
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--p-strong);
  padding-left:16px;
  position:relative;
}
.nhip-panel__desc ul li::before,
.nhip-panel__desc ol li::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--p-strong);
}
.nhip-panel__desc a{
  color:inherit;
  text-decoration:underline;
}

/* ---- photo layer: shown on the siblings while another item is active ---- */
.nhip-photo{
  opacity:0;
  transform:scale(1.05);
}
.nhip-row.is-expanded .nhip-item.is-sibling .nhip-photo{
  opacity:1;
  transform:scale(1);
  pointer-events:none;
  transition-delay:calc(var(--stagger, 0) * 70ms);
}

.nhip-photo__frame{
  position:relative;
  margin:0;
  width:100%;
  height:100%;
  border-radius:4px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  transition:height var(--dur-slow) var(--ease);
}
.nhip-photo__frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,10,50,0) 55%, rgba(0,10,50,.55) 100%);
}
.nhip-photo__caption{
  position:absolute;
  left:0; right:0; bottom:10px;
  z-index:1;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.85);
  font-weight:600;
  letter-spacing:.3px;
  padding:0 10px;
}

/* mobile-only gallery lives inside the panel; hidden on desktop/tablet */
.nhip-panel__gallery{display:none;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  :root{
    --fs-title:30px;
    --fs-md:18px;
  }
  .nhip-stage{height:var(--height-tablet);}
  .nhip-item{height:var(--height-tablet) !important;} /* per-column custom heights are a desktop/hover feature */
  .nhip-panel__title{font-size:22px;}
  .nhip-section{padding-top:56px;} /* không cần chừa chỗ mọc cao trên tablet */
}

@media (max-width:760px){
  .nhip-section{padding:32px 16px; padding-top:32px;}

  .nhip-stage{
    height:auto;
    overflow:hidden;
  }
  .nhip-row{
    position:static; /* mobile là accordion dọc, dùng flow bình thường thay vì neo tuyệt đối */
    flex-direction:column;
    height:auto;
  }
  .nhip-item{
    height:var(--height-mobile-idle) !important;
    transition:height var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
  }
  .nhip-row.is-expanded .nhip-item.is-active{
    height:var(--height-mobile-open) !important;
  }
  .nhip-row.is-expanded .nhip-item.is-sibling{
    height:var(--height-mobile-idle) !important;
  }

  :root{ --fs-title:22px; }
  .nhip-idle{padding:14px;flex-direction:row;}
  .nhip-title{white-space:normal;}

  /* on mobile the active item shows its OWN panel + a small photo grid,
     instead of "borrowing" other columns like on desktop */
  .nhip-row.is-expanded .nhip-item.is-sibling .nhip-photo{display:none;}
  .nhip-item .nhip-photo{display:none;}

  .nhip-panel{padding:18px 16px;}
  .nhip-panel__title{font-size:20px;margin-bottom:10px;}
  .nhip-panel__gallery{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-top:12px;
  }
  .nhip-panel__gallery .cell{
    aspect-ratio:1/1;
    border-radius:6px;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:flex-end;
    padding:6px;
  }
  .nhip-panel__gallery .cell span{
    font-size:10px;
    color:#fff;
    background:rgba(0,10,50,.55);
    padding:2px 5px;
    border-radius:4px;
  }
}

/* ==========================================================================
   BỔ SUNG THÊM CHO MOBILE (không đụng gì tới các rule phía trên)
   - padding 10px 2 bên cho từng cột
   ========================================================================== */
@media (max-width:760px){
  .nhip-item{
    padding-left:10px;
    padding-right:10px;
  }
}