/* =========================
   NCT THEME (single source of truth)

/* ===== 1) DEFAULT = LIGHT ===== */
:root{
  /* Primary */
  --nct-primary: #ed1c24;
  --nct-primary-10: rgba(237,28,36,.10);
  --nct-primary-20: rgba(237,28,36,.20);
  --nct-primary-35: rgba(237,28,36,.35);

  /* Background */
  --nct-bg: #ffffff;

  /* Text (light) */
  --nct-text-main: #0f172a;          /* heading */
  --nct-text-body: #334155;          /* body */
  --nct-text-muted: #64748b;         /* muted */

  /* Card / Border (light) */
  --nct-card: #ffffff;
  --nct-card-2: #f8fafc;
  --nct-border: rgba(15,23,42,.12);
  --nct-border-2: rgba(15,23,42,.18);

  /* Radius */
  --nct-radius-xl: 14px;
  --nct-radius-lg: 10px;

  /* Focus */
  --nct-shadow-focus: 0 0 0 3px rgba(6,87,153,.30);
}

/* ===== 2) DARK SCOPE (chỉ cho hero hoặc vùng dark) ===== */
.nct-hero,
.nct-theme-dark{
  --nct-bg: #07121f;

  --nct-text-main: #ffffff;
  --nct-text-body: rgba(255,255,255,.85);
  --nct-text-muted: rgba(255,255,255,.60);

  --nct-card: rgba(255,255,255,.05);
  --nct-card-2: rgba(255,255,255,.06);
  --nct-border: rgba(255,255,255,.10);
  --nct-border-2: rgba(255,255,255,.14);

  --nct-shadow-focus: 0 0 0 3px rgba(6,87,153,.45);
	--gradient-ocean: linear-gradient(135deg, hsl(210 85% 20%) 0%, hsl(200 75% 35%) 50%, hsl(185 70% 45%) 100%);
}

/* Optional helper: nếu muốn bọc 1 section dark */
.nct-bg-dark{ background: var(--nct-bg); color: var(--nct-text-main); }

/* =========================
   HERO
   ========================= */
.nct-hero{
  color: var(--nct-text-main);
  padding: 38px 10px;
  position: relative;
  overflow: hidden;
}

.nct-container{
  max-width: 896px;
  margin: 0 auto;
}

/* Pill (tự đổi theo scope light/dark) */
.nct-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--nct-border-2);
  background: var(--nct-card-2);
  backdrop-filter: blur(8px);
  margin-bottom: 24px;
}

.nct-pill-text{
  font-size: 14px;
  font-weight: 600;
  color: var(--nct-text-body);
}

/* Icon dùng PRIMARY */
.nct-icon{
  font-size: 16px;
  color: var(--nct-primary);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Title / Text */
.nct-title{
  margin: 0 0 24px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: 40px;
  color: var(--nct-text-main);
}

/* Accent gradient theo PRIMARY */
.nct-title-accent{
  display: block;
  margin-top: 6px;
  background: linear-gradient(90deg, var(--nct-primary), var(--nct-primary), var(--nct-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
	display: inline-block;
}

.nct-desc{
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.6;
  max-width: 640px;
  color: var(--nct-text-body);
}

.nct-strong-accent{
  color: var(--nct-primary);
  font-weight: 800;
}

/* Buttons */
.nct-actions{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.nct-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease;
  color: var(--nct-text-main);
}

.nct-btn:focus{
  outline: none;
  box-shadow: var(--nct-shadow-focus);
}

/* Primary button theo PRIMARY */
.nct-btn-primary{
  background: var(--nct-primary);
  border-color: var(--nct-primary);
  color: #fff;
}

.nct-btn-primary:hover{
  transform: translateY(-1px);
  background: #054a80; /* darken nhẹ */
}

/* Ghost button theo theme scope */
.nct-btn-ghost{
  background: var(--nct-card-2);
  border-color: var(--nct-border-2);
  color: var(--nct-text-main);
}

.nct-btn-ghost:hover{
  transform: translateY(-1px);
  background: var(--nct-card);
}

.nct-btn-icon{
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
}

.nct-btn-primary:hover .nct-btn-icon{
  transform: translateX(4px);
}

/* Stats */
.nct-stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.nct-stat{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--nct-radius-xl);
  border: 1px solid var(--nct-border);
  background: var(--nct-card);
  backdrop-filter: blur(8px);
}

.nct-stat-ic{
  width: 40px;
  height: 40px;
  border-radius: var(--nct-radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nct-primary-10);
  color: var(--nct-primary);
  flex: 0 0 40px;
}

.nct-stat-ic i{
  font-size: 20px;
  line-height: 1;
}

.nct-stat-num{
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--nct-text-main);
}

.nct-stat-label{
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--nct-text-muted);
}

/* Animations */
.nct-anim-fade{ animation: nctFade .6s ease both; }
.nct-anim-slide{ animation: nctSlideUp .7s ease both; }
.nct-stagger-1{ animation-delay: .08s; }
.nct-stagger-2{ animation-delay: .16s; }
.nct-stagger-3{ animation-delay: .24s; }

@keyframes nctFade{ from{opacity:0} to{opacity:1} }
@keyframes nctSlideUp{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* Responsive */
@media (min-width: 640px){
  .nct-actions{ flex-direction: row; }
}
@media (min-width: 768px){
  .nct-title{ font-size: 36px; }
  .nct-desc{ font-size: 18px; }
  .nct-stats{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1024px){
  .nct-title{ font-size: 52px; }
}
@media (min-width: 1280px){
  .nct-title{ font-size: 64px; }
}

/* =========================
   SECTION HEADER (LIGHT by default)
   ========================= */
.nct-section-header{
  max-width: 768px;
  margin: 0 auto 30px;
  text-align: center;
}

.nct-badge{
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--nct-primary-10);
  color: var(--nct-primary);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.nct-heading{
  margin: 0 0 24px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--nct-text-main);
  font-size: 32px;
}
.nct-heading span {
	display: inline-block;
}
.nct-heading-accent{
  display: block;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--nct-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nct-section-desc{
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--nct-text-body);
}

@media (min-width: 768px){
  .nct-heading{ font-size: 28px; }
}
@media (min-width: 1024px){
  .nct-heading{ font-size: 38px; }
}

/* =========================
   FEATURE GRID + CARDS (LIGHT by default)
   ========================= */
.nct-feature-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 80px;
}

.nct-feature-card{
  background: var(--nct-card);
  border: 1px solid var(--nct-border);
  border-radius: 16px;
  padding: 24px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}

.nct-feature-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
  border-color: rgba(6,87,153,.25);
}

.nct-feature-ic{
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: linear-gradient(90deg, var(--nct-primary), #1b8bd6, #5ec6ff);
  color: #ffffff;
  transition: transform .3s ease;
}

.nct-feature-card:hover .nct-feature-ic{
  transform: scale(1.1);
}

.nct-feature-ic i{
  font-size: 28px;
  line-height: 1;
}

.nct-feature-title{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--nct-text-main);
}

.nct-feature-desc{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--nct-text-body);
}

.bg-gradient-ocean > .col-inner {
    background-image: linear-gradient(135deg, hsl(210 85% 20%) 0%, hsl(200 75% 35%) 50%, hsl(185 70% 45%) 100%);
	padding: 32px !important;
	border-radius: 12px;
	overflow: hidden;
}

.bg-gradient-ocean h3 {
	font-size: 1.75rem;
  line-height: 2rem;
	color: #fff
}

/* Card */
.nct-term-card{
  background: var(--nct-card-2);
  border: 1px solid var(--nct-border);
  border-radius: 12px; /* rounded-xl */
  padding: 20px;       /* p-5 */
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.nct-term-card:hover{
  background: var(--nct-card);
  border-color: var(--nct-border-2);
}

/* Row layout */
.nct-term-row{
  display: flex;
  align-items: flex-start;
  gap: 12px; /* gap-3 */
}

/* Icon */
.nct-term-ic{
  flex: 0 0 auto;
  margin-top: 2px; /* mt-0.5 ~ */
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nct-primary);
}

.nct-term-ic i{
  font-size: 20px;
  line-height: 1;
}

/* Text */
.nct-term-title{
  display: inline-block;
  font-weight: 800;
  color: var(--nct-primary);
  letter-spacing: -0.01em;
}

.nct-term-desc{
  margin: 6px 0 0;     /* mt-1 */
  font-size: 14px;     /* text-sm */
  line-height: 1.6;
  color: var(--nct-text-body);
}


/* =========================
   CONTENT BLOCK
   ========================= */
.nct-content-block{
  max-width: 720px;
}

/* Badge */
.nct-badge{
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--nct-primary-10);
  color: var(--nct-primary);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Heading */
.nct-subheading{
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--nct-text-main);
}

/* Paragraph */
.nct-paragraph{
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--nct-text-body);
}

.nct-mb-lg{ margin-bottom: 32px; }

/* =========================
   HIGHLIGHT BOX
   ========================= */
.nct-highlight-box{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--nct-card-2);
}

/* Icon */
.nct-highlight-ic{
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nct-primary);
}

.nct-highlight-ic i{
  font-size: 32px;
  line-height: 1;
}

/* Text */
.nct-highlight-title{
  margin: 0;
  font-weight: 800;
  color: var(--nct-text-main);
}

.nct-highlight-desc{
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--nct-text-muted);
}

.radius-10 img {
	border-radius: 10px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (min-width: 768px){
  .nct-subheading{
    font-size: 28px;
  }
}


/* Panel */
.nct-compare-panel{
  background: var(--nct-card);
  border: 1px solid var(--nct-border);
  border-radius: 24px; /* rounded-3xl */
  padding: 32px;       /* p-8 */
  box-shadow: 0 10px 28px rgba(2,6,23,.06); /* shadow-card (light) */
}

/* Panel header */
.nct-compare-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.nct-compare-badge{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nct-compare-title{
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--nct-text-main);
}

/* List */
.nct-compare-list{
  display: flex;
  flex-direction: column;
  gap: 16px; /* space-y-4 */
}

.nct-compare-item{
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  transition: background-color .2s ease;
}

.nct-compare-item-ic{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}

.nct-compare-item h4{
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--nct-text-main);
}

.nct-compare-item p{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--nct-text-muted);
}

/* Icons */
.nct-compare-badge i{ font-size: 24px; line-height: 1; }
.nct-compare-item-ic i{ font-size: 18px; line-height: 1; }

/* =========================
   Green variant (advantages)
   ========================= */
.nct-compare--good .nct-compare-badge{
  background: rgba(34,197,94,.10);
  color: #16a34a;
}
.nct-compare--good .nct-compare-item{
  background: rgba(34,197,94,.05);
}
.nct-compare--good .nct-compare-item:hover{
  background: rgba(34,197,94,.10);
}
.nct-compare--good .nct-compare-item-ic{
  background: rgba(34,197,94,.10);
  color: #16a34a;
}

/* =========================
   Orange variant (limitations)
   ========================= */
.nct-compare--warn .nct-compare-badge{
  background: rgba(249,115,22,.10);
  color: #f97316;
}
.nct-compare--warn .nct-compare-item{
  background: rgba(249,115,22,.05);
}
.nct-compare--warn .nct-compare-item:hover{
  background: rgba(249,115,22,.10);
}
.nct-compare--warn .nct-compare-item-ic{
  background: rgba(249,115,22,.10);
  color: #ea580c;
}

/* Quote / Callout */
.nct-compare-quote{
  margin-top: 32px;
  padding: 24px;
  border-radius: 16px; /* rounded-2xl */
  background: linear-gradient(90deg, var(--nct-primary), #1b8bd6, #5ec6ff);
  color: #fff;
}

.nct-compare-quote p{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
}

.nct-compare-quote strong{
  color: rgba(255,255,255,.95);
}

/* Card */
.nct-service-card{
  position: relative;
  background: var(--nct-card);
  border: 1px solid var(--nct-border);
  border-radius: 24px;            /* rounded-3xl */
  padding: 32px;                  /* p-8 */
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
}

.nct-service-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 48px rgba(2,6,23,.12);
  border-color: rgba(6,87,153,.25);
}

/* Glow blob */
.nct-service-glow{
  position: absolute;
  top: -16px;
  right: -16px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--nct-primary) 0%, transparent 60%);
  opacity: .08;
  filter: blur(24px);
  transition: opacity .3s ease;
}

.nct-service-card:hover .nct-service-glow{
  opacity: .14;
}

/* Inner */
.nct-service-inner{ position: relative; z-index: 1; }

/* Icon box */
.nct-service-icon{
  width: 64px;
  height: 64px;
  border-radius: 16px; /* rounded-2xl */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px; /* mb-6 */
  background: linear-gradient(90deg, var(--nct-primary), #1b8bd6, #5ec6ff);
  color: #fff;
  box-shadow: 0 10px 24px rgba(6,87,153,.35); /* shadow-ocean */
  transition: transform .3s ease;
}

.nct-service-card:hover .nct-service-icon{ transform: scale(1.1); }

.nct-service-icon i{ font-size: 32px; line-height: 1; }

/* Titles */
.nct-service-head{ margin-bottom: 16px; } /* mb-4 */

.nct-service-title{
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--nct-text-main);
}

.nct-service-sub{
  margin: 0;
  font-weight: 700;
  color: var(--nct-primary);
}

/* Desc */
.nct-service-desc{
  margin: 0 0 24px; /* mb-6 */
  color: var(--nct-text-muted);
  line-height: 1.6;
}

/* List */
.nct-service-list{
  list-style: none;
  padding: 0;
  margin: 0 0 24px; /* mb-6 */
  display: grid;
  gap: 12px;        /* space-y-3 */
}

.nct-service-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--nct-text-body);
  line-height: 1.6;
  font-size: 14px;  /* text-sm */
}

/* Bullet */
.nct-dot{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--nct-primary-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  margin-top: 2px; /* mt-0.5 */
}
.nct-dot::after{
  content:"";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nct-primary);
}

/* Route / Note box */
.nct-service-note{
  padding: 16px;
  border-radius: 12px; /* rounded-xl */
  background: var(--nct-primary-10);
  color: var(--nct-primary);
  font-weight: 700;
  font-size: 14px;
}

/* =========================
   TIMELINE WRAP
   ========================= */
.nct-timeline-wrap{
  max-width: 896px; /* ~max-w-4xl */
  margin: 0 auto;
  position: relative;
}

/* Desktop vertical line */
.nct-timeline-line{
  position: absolute;
  left: 32px;            /* left-8 */
  top: 96px;             /* top-24 */
  bottom: 0;
  width: 2px;            /* w-0.5 */
  background: linear-gradient(to bottom, var(--nct-primary), transparent);
  display: none;
}
@media (min-width: 768px){
  .nct-timeline-line{ display: block; }
}

/* Each step row */
.nct-step{
  display: flex;
  gap: 24px;             /* gap-6 */
  margin-bottom: 32px;   /* mb-8 */
}
@media (min-width: 768px){
  .nct-step{
    gap: 40px;           /* md:gap-10 */
    margin-bottom: 48px; /* md:mb-12 */
  }
}

/* Left icon column */
.nct-step-left{
  position: relative;
  flex: 0 0 auto;
}

.nct-step-icon{
  width: 64px;
  height: 64px;
  border-radius: 16px; /* rounded-2xl */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, var(--nct-primary), #1b8bd6, #5ec6ff);
  color: #fff;
  box-shadow: 0 10px 24px rgba(6,87,153,.35);
}
.nct-step-icon i{
  font-size: 28px; /* w-7 */
  line-height: 1;
}

/* Number badge */
.nct-step-num{
  position: absolute;
  top: -8px;   /* -top-2 */
  right: -8px; /* -right-2 */
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--nct-accent, #ffd27a);
  color: #0f172a;
  box-shadow: 0 10px 22px rgba(255,210,122,.35);
}

/* Right content card */
.nct-step-card{
  flex: 1 1 auto;
  background: var(--nct-card);
  border: 1px solid var(--nct-border);
  border-radius: 16px; /* rounded-2xl */
  padding: 24px;
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
@media (min-width: 768px){
  .nct-step-card{ padding: 32px; } /* md:p-8 */
}
.nct-step-card:hover{
  box-shadow: 0 18px 48px rgba(2,6,23,.10);
  border-color: rgba(6,87,153,.22);
}

/* Card header */
.nct-step-tag{
  font-size: 14px;
  font-weight: 700;
  color: var(--nct-primary);
  margin: 0;
}
.nct-step-title{
  margin: 6px 0 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--nct-text-main);
}
@media (min-width: 768px){
  .nct-step-title{ font-size: 24px; } /* md:text-2xl */
}

.nct-step-desc{
  margin: 16px 0 20px;
  color: var(--nct-text-muted);
  line-height: 1.65;
}

/* Bullet list inside card */
.nct-step-list{
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 10px; /* space-y-2 */
}
.nct-step-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--nct-text-body);
  font-size: 14px;
  line-height: 1.6;
}
.nct-step-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--nct-primary);
  margin-top: 8px; /* mt-2 */
  flex: 0 0 6px;
}

/* Tip box */
.nct-step-tip{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px; /* rounded-xl */
  background: var(--nct-primary-10);
  color: var(--nct-primary);
}
.nct-step-tip-ic{
  font-size: 16px;
  line-height: 1;
}
.nct-step-tip p{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

/* Mobile down arrow between steps */
.nct-step-arrow{
  display: flex;
  justify-content: center;
  margin: -8px 0 16px; /* gần giống mb-4 */
}
@media (min-width: 768px){
  .nct-step-arrow{ display: none; }
}
.nct-step-arrow i{
  font-size: 22px;
  color: var(--nct-primary);
}

/* Card (big) */
.nct-price-card{
  background: var(--nct-card);
  border: 1px solid var(--nct-border);
  border-radius: 24px; /* rounded-3xl */
  padding: 32px;       /* p-8 */
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
}

/* Header */
.nct-price-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px; /* mb-8 */
}
.nct-price-head-ic{
  width: 48px;
  height: 48px;
  border-radius: 12px; /* rounded-xl */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, var(--nct-primary),var(--nct-primary), var(--nct-primary));
  color: #fff;
  box-shadow: 0 10px 24px rgba(6,87,153,.25);
}
.nct-price-head-ic i{ font-size: 22px; line-height: 1; }

.nct-price-title{
  margin: 0;
  font-size: 24px;  /* text-2xl */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--nct-text-main);
}

/* List stack */
.nct-price-stack{
  display: grid;
  gap: 16px; /* space-y-4 */
}

/* Item (left card style: muted/50 hover muted) */
.nct-price-item{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 12px; /* rounded-xl */
  background: rgba(2,6,23,.04); /* muted/50 */
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.nct-price-item:hover{
  background: rgba(2,6,23,.06); /* muted */
}

/* Small icon box */
.nct-price-item-ic{
  width: 40px;
  height: 40px;
  border-radius: 10px; /* rounded-lg */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  background: var(--nct-primary-10);
  color: var(--nct-primary);
}
.nct-price-item-ic i{ font-size: 18px; line-height: 1; }

.nct-price-item h4{
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--nct-text-main);
}
.nct-price-item p{
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--nct-text-muted);
}

/* Warning box */
.nct-price-warn{
  margin-top: 24px; /* mt-6 */
  padding: 16px;
  border-radius: 12px;
  background: rgba(220,38,38,.10); /* destructive/10 */
}
.nct-price-warn h4{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: #dc2626; /* destructive */
}
.nct-price-warn ul{
  margin: 0;
  padding-left: 16px;
  color: var(--nct-text-muted);
  font-size: 14px;
  line-height: 1.7;
}
.nct-price-warn strong{ color: var(--nct-text-main); }

/* Right card: factor items (border + hover) */
.nct-factor-item{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--nct-border);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.nct-factor-item:hover{
  border-color: rgba(6,87,153,.35); /* secondary/50 -> primary */
  background: var(--nct-primary-10); /* secondary/5 -> primary */
}

.nct-factor-item .nct-price-item-ic{
  background: var(--nct-primary-10);
  color: var(--nct-primary);
}

/* Card */
.nct-why-card{
  background: var(--nct-card);
  border: 1px solid var(--nct-border);
  border-radius: 16px; /* rounded-2xl */
  padding: 24px;       /* p-6 */
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}

.nct-why-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(2,6,23,.10);
  border-color: rgba(6,87,153,.25);
}

/* Icon box */
.nct-why-ic{
  width: 48px;  /* w-12 */
  height: 48px; /* h-12 */
  border-radius: 12px; /* rounded-xl */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px; /* mb-4 */
  background: linear-gradient(90deg, var(--nct-primary));
  color: #fff;
  box-shadow: 0 10px 24px rgba(6,87,153,.20);
}

.nct-why-ic i{
  font-size: 22px;
  line-height: 1;
}

/* Text */
.nct-why-title{
  margin: 0 0 8px;
  font-size: 18px; /* text-lg */
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--nct-text-main);
}

.nct-why-desc{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--nct-text-muted);
}

/* =========================
   NCT CTA / TRUST BLOCK (LIGHT)
   ========================= */

.nct-trust{
  max-width: 720px;
}

.nct-pill-accent{
  display:inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  background: var(--nct-primary-10);
  color: var(--nct-primary);
  margin-bottom: 16px;
}

.nct-trust-title{
  margin: 0 0 16px;
  font-size: 28px;                 /* ~ text-2xl */
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--nct-text-main);
}

@media (min-width: 768px){
  .nct-trust-title{ font-size: 32px; } /* ~ md:text-3xl */
}

.nct-trust-desc{
  margin: 0 0 16px;
  color: var(--nct-text-muted);
  font-size: 16px;
  line-height: 1.7;
}

.nct-trust-list{
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 12px; /* space-y-3 */
}

.nct-trust-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.nct-check{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  margin-top: 2px;               /* mt-0.5 */
  background: rgba(6,87,153,.12);
  color: #065799;
}

.nct-check i{
  font-size: 14px;
  line-height: 1;
}

.nct-trust-text{
  color: rgba(15,23,42,.80);     /* text-foreground/80 */
  font-size: 15px;
  line-height: 1.65;
}

/* Button */
.nct-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;                 /* h-11 */
  padding: 0 32px;              /* px-8 */
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.nct-btn-primary{
  background: #065799;          /* màu chính */
  color: #fff;
  box-shadow: 0 12px 28px rgba(6,87,153,.22);
}

.nct-btn-primary:hover{
  transform: translateY(-1px);
  background: #054c84;
}

.nct-btn-primary:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(6,87,153,.25), 0 12px 28px rgba(6,87,153,.22);
}

.bg-ocean {
	background-image: linear-gradient(135deg, hsl(210 85% 20%) 0%, hsl(200 75% 35%) 50%, hsl(185 70% 45%) 100%);
}

/* =========================
   CONTACT GRID (light section)
   ========================= */

.nct-contact-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px; /* gap-4 */
}

@media (min-width: 640px){
  .nct-contact-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* sm:grid-cols-2 */
  }
}

.nct-contact-card{
  background: var(--nct-card);
  border: 1px solid var(--nct-border);
  border-radius: 16px; /* rounded-2xl */
  padding: 24px;       /* p-6 */
  box-shadow: 0 10px 24px rgba(15,23,42,.06); /* shadow-card nhẹ */
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.nct-contact-card:hover{
  box-shadow: 0 16px 36px rgba(15,23,42,.10);
  transform: translateY(-2px);
  border-color: rgba(6,87,153,.22);
}

.nct-contact-ic{
  width: 48px;   /* w-12 */
  height: 48px;  /* h-12 */
  border-radius: 12px; /* rounded-xl */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: linear-gradient(90deg, var(--nct-primary)); /* gradient-ocean theo màu chính */
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(6,87,153,.25);
}

.nct-contact-ic i{
  font-size: 22px;
  line-height: 1;
}

.nct-contact-kicker{
  margin: 0 0 4px;
  font-size: 14px; /* text-sm */
  color: var(--nct-text-muted);
}

.nct-contact-link{
  display: inline-block;
  font-weight: 800;
  color: var(--nct-text-main);
  text-decoration: none;
  transition: color .2s ease;
}

.nct-contact-link:hover{
  color: #065799;
}

.nct-contact-value{
  margin: 0;
  font-weight: 800;
  color: var(--nct-text-main);
}

/* CTA BOX */
.nct-cta-box{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 32px;
	background-image: linear-gradient(135deg, var(--nct-primary));
  color: var(--nct-text-white);
}

/* blur decoration */
.nct-cta-blur{
  position: absolute;
  top: -20px;
  right: -20px;
  width: 140px;
  height: 140px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  filter: blur(32px);
}

/* content wrapper */
.nct-cta-inner{
  position: relative;
  z-index: 1;
}

/* header */
.nct-cta-head{
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.nct-cta-icon{
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nct-cta-icon svg{
  width: 32px;
  height: 32px;
  color: #ffd36a;
}

/* text */
.nct-cta-title{
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 4px;
	color: #fff;
}

.nct-cta-sub{
  margin: 0;
  font-size: 14px;
  opacity: .8;
	color: #fff;
}

.nct-cta-desc{
  font-size: 16px;
  line-height: 1.6;
  opacity: .9;
  margin-bottom: 24px;
	color: #eee;
}

/* buttons */
.nct-cta-actions{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px){
  .nct-cta-actions{
    flex-direction: row;
  }
}

.nct-btn{
  height: 44px;
  padding: 0 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: all .25s ease;
}
.nct-btn br {
	display: none !important;
}
.nct-btn svg{
  width: 18px;
  height: 18px;
}

/* primary button */
.nct-btn-primary{
  background: #ffffff;
  color: var(--nct-primary);
}

.nct-btn-primary:hover{
  background: #f1f5f9;
}

/* outline button */
.nct-btn-outline{
  border: 1px solid rgba(255,255,255,0.6);
  color: #ffffff;
}

.nct-btn-outline:hover{
  background: rgba(255,255,255,0.12);
}

/* ================================
   CF7 QUOTE FORM – ISOLATED STYLE
   Prefix: cf7q-
================================ */

/* Wrapper */
.cf7q-wrap {
    max-width: 100%;
}

/* Card */
.cf7q-card {
    background: #ffffff;
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Title */
.cf7q-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

/* Grid */
.cf7q-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .cf7q-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Label */
.cf7q-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
    display: block;
}

/* Inputs */
.cf7q-wrap input[type="text"],
.cf7q-wrap input[type="email"],
.cf7q-wrap input[type="tel"],
.cf7q-wrap textarea {
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem;
    color: #111827;
    transition: all 0.2s ease;
		height: auto;
		box-shadow: none;
}

.cf7q-wrap textarea {
    height: auto;
    height: 120px;
    resize: vertical;
}

/* Placeholder */
.cf7q-wrap input::placeholder,
.cf7q-wrap textarea::placeholder {
    color: #9ca3af;
}

/* Focus ring */
.cf7q-wrap input:focus,
.cf7q-wrap textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

/* Submit button */
.cf7q-wrap .wpcf7-submit {
    width: 100%;
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
		margin-bottom: 0;
}

.cf7q-wrap .wpcf7-submit:hover {
    opacity: 0.8;
}

.cf7q-wrap .wpcf7-submit:active {
    transform: scale(0.98);
}

.wpcf7-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
/* CF7 validation */
.cf7q-wrap .wpcf7-not-valid {
    border-color: #dc2626 !important;
}

.cf7q-wrap .wpcf7-not-valid-tip {
    font-size: 0.75rem;
    color: #dc2626;
    margin-top: 0.25rem;
}

.cf7q-wrap .wpcf7-response-output {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.cf7q-wrap .wpcf7-mail-sent-ok {
    border: 1px solid #16a34a;
    background: #ecfdf5;
    color: #065f46;
}

.cf7q-wrap .wpcf7-validation-errors,
.cf7q-wrap .wpcf7-mail-sent-ng {
    border: 1px solid #dc2626;
    background: #fef2f2;
    color: #7f1d1d;
}