/* Taxi Cai Lay P04 — /bang-gia final UI/UX layer
   Loaded after all legacy/sitewide styles through page_final_styles. */
body.taxicailay-price-p04{
  --p04-ink:#10243a;
  --p04-muted:#607286;
  --p04-blue:#075fac;
  --p04-blue-dark:#064b87;
  --p04-line:#d9e4ed;
  --p04-soft:#f5f9fc;
  --p04-yellow:#ffc51b;
  --p04-shell:1280px;
  background:#fff;
}
body.taxicailay-price-p04 .p75-shell{width:min(var(--p04-shell),calc(100% - 40px));}
body.taxicailay-price-p04 main{overflow:hidden;}

/* Hero */
body.taxicailay-price-p04 .p75-hero{
  padding:42px 0 44px;
  background:linear-gradient(135deg,#f4faff 0%,#fff 65%);
  border-bottom:1px solid #e3edf4;
}
body.taxicailay-price-p04 .p75-breadcrumb{margin-bottom:16px;font-size:13px;}
body.taxicailay-price-p04 .p75-hero-grid{
  grid-template-columns:minmax(0,1.45fr) minmax(310px,.55fr);
  gap:34px;
  align-items:stretch;
}
body.taxicailay-price-p04 .p75-hero-grid>div:first-child{align-self:center;}
body.taxicailay-price-p04 .p75-hero h1{
  max-width:760px;
  margin:0 0 14px;
  font-size:clamp(38px,4.2vw,56px);
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--p04-ink);
}
body.taxicailay-price-p04 .p75-hero p{
  max-width:760px;
  font-size:17px;
  line-height:1.68;
  color:var(--p04-muted);
}
body.taxicailay-price-p04 .p75-actions{margin-top:20px;gap:10px;}
body.taxicailay-price-p04 .p75-btn{
  min-height:46px;
  border-radius:12px;
  padding:0 18px;
  white-space:nowrap;
}
body.taxicailay-price-p04 .p75-btn.primary{
  background:var(--p04-yellow);
  border-color:var(--p04-yellow);
  color:#10243a;
  box-shadow:0 8px 20px rgba(255,197,27,.22);
}
body.taxicailay-price-p04 .p75-btn.primary:hover{background:#f1b900;border-color:#f1b900;color:#10243a;}
body.taxicailay-price-p04 .p75-hero-card{
  height:100%;
  min-height:250px;
  padding:24px 25px;
  border-color:#d8e6f0;
  border-radius:20px;
  box-shadow:0 16px 38px rgba(16,66,102,.08);
  background:#fff;
}
body.taxicailay-price-p04 .p75-hero-card strong{display:block;font-size:18px;color:var(--p04-ink);}
body.taxicailay-price-p04 .p75-hero-card ul{margin-top:15px;padding:0;list-style:none;display:grid;gap:10px;}
body.taxicailay-price-p04 .p75-hero-card li{
  position:relative;
  padding:10px 12px 10px 38px;
  margin:0;
  border-radius:11px;
  background:var(--p04-soft);
  color:#40566b;
  line-height:1.45;
}
body.taxicailay-price-p04 .p75-hero-card li:before{
  content:'✓';position:absolute;left:13px;top:10px;
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:#e2f2fb;color:var(--p04-blue);font-size:11px;font-weight:900;
}

/* Sections */
body.taxicailay-price-p04 .p75-section{padding:46px 0;}
body.taxicailay-price-p04 .p75-section.soft{background:#f7fafc;}
body.taxicailay-price-p04 .p75-heading{margin-bottom:20px;}
body.taxicailay-price-p04 .p75-heading h2,
body.taxicailay-price-p04 .p75-two h2{
  color:var(--p04-ink);
  letter-spacing:-.02em;
}
body.taxicailay-price-p04 .p75-heading h2{font-size:clamp(28px,3vw,38px);}
body.taxicailay-price-p04 .p75-heading.split{align-items:end;gap:28px;}
body.taxicailay-price-p04 .p75-heading.split>p{max-width:480px;}

/* Four pricing factors */
body.taxicailay-price-p04 .p75-card-grid.four{gap:14px;}
body.taxicailay-price-p04 .p75-card-grid.four article{
  padding:20px;
  border-radius:16px;
  border:1px solid var(--p04-line);
  box-shadow:0 7px 20px rgba(25,59,85,.035);
  min-width:0;
}
body.taxicailay-price-p04 .p75-card-grid article>span{width:38px;height:38px;border-radius:11px;}
body.taxicailay-price-p04 .p75-card-grid h3{margin:13px 0 6px;font-size:18px;}
body.taxicailay-price-p04 .p75-card-grid p{font-size:14px;line-height:1.6;}

/* Pricing table */
body.taxicailay-price-p04 .p75-table-wrap{
  border:1px solid #d7e4ed;
  border-radius:17px;
  box-shadow:0 10px 28px rgba(20,56,82,.05);
  overflow:hidden;
}
body.taxicailay-price-p04 .p75-table{min-width:850px;table-layout:fixed;}
body.taxicailay-price-p04 .p75-table th,
body.taxicailay-price-p04 .p75-table td{padding:15px 16px;vertical-align:middle;}
body.taxicailay-price-p04 .p75-table th{
  background:#edf6fb;
  color:#36546b;
  font-size:12px;
  font-weight:900;
  letter-spacing:.035em;
}
body.taxicailay-price-p04 .p75-table th:first-child,
body.taxicailay-price-p04 .p75-table td:first-child{width:31%;}
body.taxicailay-price-p04 .p75-table th:last-child,
body.taxicailay-price-p04 .p75-table td:last-child{width:18%;}
body.taxicailay-price-p04 .p75-table tbody tr:hover{background:#fbfdff;}
body.taxicailay-price-p04 .p75-table td{color:#344b5f;}
body.taxicailay-price-p04 .p75-table td a{display:inline-flex;gap:6px;align-items:center;color:var(--p04-blue);font-weight:900;}

/* Empty pricing state — important because DB can legitimately have no publishable route rows */
body.taxicailay-price-p04 .p75-empty{
  padding:26px 28px;
  border-radius:18px;
  border:1px solid #d6e4ee;
  background:#fff;
  box-shadow:0 10px 28px rgba(20,56,82,.045);
}
body.taxicailay-price-p04 .p75-empty h2{margin:4px 0 7px;font-size:26px;color:var(--p04-ink);}
body.taxicailay-price-p04 .p75-empty p{margin:0;color:var(--p04-muted);line-height:1.6;}

/* Guidance cards */
body.taxicailay-price-p04 .p75-two{gap:18px;}
body.taxicailay-price-p04 .p75-two>article{
  padding:25px;
  border-radius:18px;
  border-color:var(--p04-line);
  box-shadow:0 8px 24px rgba(20,56,82,.035);
}
body.taxicailay-price-p04 .p75-two h2{font-size:27px;margin-bottom:10px;}
body.taxicailay-price-p04 .p75-two p{line-height:1.65;}
body.taxicailay-price-p04 .p75-check{margin-bottom:0;}
body.taxicailay-price-p04 .p75-steps{margin-top:14px;}
body.taxicailay-price-p04 .p75-steps li{margin:12px 0;}

/* Related pages */
body.taxicailay-price-p04 .p75-link-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
body.taxicailay-price-p04 .p75-link-grid a{
  min-width:0;
  padding:16px 17px;
  border-radius:14px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
body.taxicailay-price-p04 .p75-link-grid a:hover{
  transform:translateY(-2px);
  border-color:#9bc7e0;
  box-shadow:0 9px 22px rgba(20,82,119,.07);
}
body.taxicailay-price-p04 .p75-link-grid strong{overflow-wrap:anywhere;line-height:1.35;}

@media(max-width:1024px){
  body.taxicailay-price-p04 .p75-hero-grid{grid-template-columns:1fr;gap:20px;}
  body.taxicailay-price-p04 .p75-hero-card{min-height:0;}
  body.taxicailay-price-p04 .p75-card-grid.four{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.taxicailay-price-p04 .p75-link-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:700px){
  body.taxicailay-price-p04 .p75-shell{width:calc(100% - 24px);}
  body.taxicailay-price-p04 .p75-hero{padding:28px 0 30px;}
  body.taxicailay-price-p04 .p75-breadcrumb{margin-bottom:12px;}
  body.taxicailay-price-p04 .p75-hero h1{font-size:34px;line-height:1.08;margin-bottom:10px;}
  body.taxicailay-price-p04 .p75-hero p{font-size:15.5px;line-height:1.62;}
  body.taxicailay-price-p04 .p75-actions{display:grid;grid-template-columns:1fr;margin-top:16px;}
  body.taxicailay-price-p04 .p75-btn{width:100%;box-sizing:border-box;}
  body.taxicailay-price-p04 .p75-hero-card{padding:19px;border-radius:16px;}
  body.taxicailay-price-p04 .p75-hero-card ul{gap:7px;}
  body.taxicailay-price-p04 .p75-hero-card li{padding:9px 10px 9px 35px;font-size:14px;}
  body.taxicailay-price-p04 .p75-section{padding:32px 0;}
  body.taxicailay-price-p04 .p75-heading{margin-bottom:15px;}
  body.taxicailay-price-p04 .p75-heading h2{font-size:27px;line-height:1.14;}
  body.taxicailay-price-p04 .p75-card-grid.four,
  body.taxicailay-price-p04 .p75-link-grid{grid-template-columns:1fr;}
  body.taxicailay-price-p04 .p75-card-grid.four article{padding:18px;}
  body.taxicailay-price-p04 .p75-two{grid-template-columns:1fr;gap:14px;}
  body.taxicailay-price-p04 .p75-two>article{padding:20px;}
  body.taxicailay-price-p04 .p75-two h2{font-size:24px;}
  body.taxicailay-price-p04 .p75-empty{align-items:stretch;padding:20px;gap:16px;}
  body.taxicailay-price-p04 .p75-empty h2{font-size:23px;}

  /* Convert the wide desktop price table into readable route cards on mobile. */
  body.taxicailay-price-p04 .p75-table-wrap{overflow:visible;border:0;background:transparent;box-shadow:none;}
  body.taxicailay-price-p04 .p75-table,
  body.taxicailay-price-p04 .p75-table tbody,
  body.taxicailay-price-p04 .p75-table tr,
  body.taxicailay-price-p04 .p75-table td{display:block;width:100%!important;min-width:0;box-sizing:border-box;}
  body.taxicailay-price-p04 .p75-table{min-width:0;}
  body.taxicailay-price-p04 .p75-table thead{display:none;}
  body.taxicailay-price-p04 .p75-table tbody{display:grid;gap:12px;}
  body.taxicailay-price-p04 .p75-table tr{
    overflow:hidden;
    border:1px solid #d7e4ed;
    border-radius:15px;
    background:#fff;
    box-shadow:0 7px 18px rgba(20,56,82,.04);
  }
  body.taxicailay-price-p04 .p75-table td{
    display:grid;
    grid-template-columns:minmax(90px,.42fr) minmax(0,.58fr);
    gap:12px;
    align-items:start;
    padding:11px 14px;
    border-bottom:1px solid #e7eef3;
    text-align:right;
    overflow-wrap:anywhere;
  }
  body.taxicailay-price-p04 .p75-table td:last-child{border-bottom:0;}
  body.taxicailay-price-p04 .p75-table td:before{
    content:attr(data-label);
    color:#728291;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.035em;
    text-align:left;
  }
  body.taxicailay-price-p04 .p75-table td:first-child{
    grid-template-columns:1fr;
    padding:14px;
    background:#f2f8fc;
    text-align:left;
  }
  body.taxicailay-price-p04 .p75-table td:first-child:before{display:none;}
  body.taxicailay-price-p04 .p75-table td:first-child a{font-size:16px;line-height:1.4;}
}