/* NGOC PROPERTY V5.8.142 — subtle decorative depth for public subpages.
   CSS-only gradients/patterns: no extra image requests, no content/route changes. */

:root{
  --np-decor-navy:#082f49;
  --np-decor-navy-2:#0b3b57;
  --np-decor-teal:#0f6e72;
  --np-decor-gold:#d7b56a;
  --np-decor-paper:#f7f6f2;
  --np-decor-line:rgba(26,112,112,.12);
  --np-decor-shadow:0 18px 46px rgba(8,47,73,.08);
}

/* Shared subpage canvas: restrained, warm and readable. */
body.p360-page,
body.np-catalog-page,
body.np-site.publishing-site{
  background:
    radial-gradient(circle at 8% 14%,rgba(27,139,137,.045),transparent 25rem),
    radial-gradient(circle at 92% 34%,rgba(215,181,106,.045),transparent 24rem),
    var(--np-decor-paper);
}

/* ---------------- PROJECT 360 ---------------- */
body.p360-page .p360-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 18%,rgba(50,177,174,.18),transparent 28rem),
    linear-gradient(118deg,#082f49 0%,#07364c 54%,#0a5058 100%);
}
body.p360-page .p360-hero::before{
  content:"360";
  position:absolute;
  z-index:-1;
  left:max(-18px,calc(50% - 760px));
  top:12px;
  font:700 clamp(150px,18vw,310px)/.9 Georgia,serif;
  letter-spacing:-.06em;
  color:rgba(255,255,255,.035);
  pointer-events:none;
}
body.p360-page .p360-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:560px;height:560px;
  right:-180px;top:-260px;
  border:1px solid rgba(223,194,124,.10);
  border-radius:50%;
  box-shadow:0 0 0 42px rgba(223,194,124,.025),0 0 0 92px rgba(27,139,137,.025);
  pointer-events:none;
}
body.p360-page .p360-facts>*{
  border-color:rgba(203,225,224,.16)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 34px rgba(0,21,33,.10);
  backdrop-filter:blur(4px);
}
body.p360-page .p360-tabs{
  background:rgba(249,250,247,.92)!important;
  border-bottom:1px solid rgba(24,104,105,.10);
  box-shadow:0 8px 26px rgba(8,47,73,.045);
  backdrop-filter:blur(8px);
}
body.p360-page .p360-card{
  border-color:rgba(30,113,112,.12)!important;
  box-shadow:var(--np-decor-shadow)!important;
}
body.p360-page .p360-main{position:relative;isolation:isolate}
body.p360-page .p360-main::before{
  content:"";
  position:absolute;z-index:-1;
  inset:0;
  background-image:
    linear-gradient(var(--np-decor-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--np-decor-line) 1px,transparent 1px);
  background-size:64px 64px;
  opacity:.14;
  mask-image:linear-gradient(to bottom,transparent,black 14%,black 70%,transparent);
  pointer-events:none;
}

/* ---------------- INVENTORY / BẢNG HÀNG ---------------- */
body.np-catalog-page .page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 22%,rgba(35,153,150,.15),transparent 25rem),
    linear-gradient(116deg,#082f49,#083c54 58%,#0a4f58)!important;
}
body.np-catalog-page .page-hero::before{
  content:"";
  position:absolute;z-index:-1;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(90deg,black,transparent 78%);
  pointer-events:none;
}
body.np-catalog-page .page-hero::after{
  content:"";
  position:absolute;z-index:-1;
  width:340px;height:340px;right:4%;top:-210px;
  border:1px solid rgba(219,187,112,.15);border-radius:50%;
  box-shadow:0 0 0 36px rgba(219,187,112,.025);
  pointer-events:none;
}
body.np-catalog-page .catalog-form{
  border:1px solid rgba(26,112,112,.13)!important;
  box-shadow:0 22px 52px rgba(8,47,73,.09)!important;
  background:rgba(255,255,255,.965)!important;
  backdrop-filter:blur(6px);
}
body.np-catalog-page .catalog-view-switch button,
body.np-catalog-page .catalog-tools .btn{
  box-shadow:0 7px 18px rgba(8,47,73,.045);
}
body.np-catalog-page .catalog-section{
  position:relative;isolation:isolate;
}
body.np-catalog-page .catalog-section::before{
  content:"";position:absolute;z-index:-1;
  left:-8vw;right:-8vw;top:0;height:360px;
  background:radial-gradient(ellipse at center,rgba(25,126,124,.045),transparent 66%);
  pointer-events:none;
}

/* ---------------- SALES POLICY ---------------- */
body.np-site.publishing-site .nps-page{position:relative;isolation:isolate}
body.np-site.publishing-site .nps-page::before{
  content:"";
  position:absolute;z-index:-2;
  inset:-70px -16vw auto;
  height:520px;
  background:
    radial-gradient(circle at 76% 18%,rgba(33,153,150,.095),transparent 24rem),
    radial-gradient(circle at 24% 12%,rgba(215,181,106,.075),transparent 20rem);
  pointer-events:none;
}
body.np-site.publishing-site .nps-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(120deg,#082f49,#0a4555 72%,#0b5960)!important;
  border-color:rgba(215,181,106,.14)!important;
  box-shadow:0 20px 48px rgba(8,47,73,.10);
}
body.np-site.publishing-site .nps-hero::after{
  content:"";position:absolute;z-index:-1;
  width:440px;height:180px;right:-90px;top:-80px;
  border-top:1px solid rgba(226,197,127,.24);
  border-radius:50%;
  transform:rotate(-12deg);
  box-shadow:0 -18px 0 -17px rgba(226,197,127,.10),0 -42px 0 -41px rgba(226,197,127,.07);
  pointer-events:none;
}
body.np-site.publishing-site .nps-tabs{
  gap:8px;
  padding:5px;
  border:1px solid rgba(28,111,110,.10);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 26px rgba(8,47,73,.05);
  backdrop-filter:blur(7px);
}
body.np-site.publishing-site .nps-tabs a{border-radius:10px!important}
body.np-site.publishing-site .nps-card{
  border-color:rgba(29,110,110,.12)!important;
  box-shadow:0 20px 46px rgba(8,47,73,.075)!important;
  background:rgba(255,255,255,.975)!important;
}
body.np-site.publishing-site .nps-badge{box-shadow:inset 0 0 0 1px rgba(31,124,111,.05)}

/* ---------------- EDITORIAL / TIN TỨC ---------------- */
body.np-editorial #main-content>.np-editorial-heading{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 12%,rgba(39,149,146,.085),transparent 22rem),
    linear-gradient(125deg,rgba(250,251,247,.98),rgba(243,248,245,.98))!important;
  border-color:rgba(28,111,110,.13)!important;
  box-shadow:0 18px 46px rgba(8,47,73,.06);
}
body.np-editorial #main-content>.np-editorial-heading::before{
  content:"";
  position:absolute;z-index:-1;
  right:-110px;bottom:-160px;
  width:360px;height:360px;border-radius:50%;
  border:1px solid rgba(215,181,106,.13);
  box-shadow:0 0 0 34px rgba(215,181,106,.025),0 0 0 78px rgba(30,127,124,.018);
  pointer-events:none;
}
body.np-editorial #main-content>.np-editorial-heading .np-editorial-heading-visual{
  background:linear-gradient(145deg,#edf4f0,#f8f8f4)!important;
  border-color:rgba(23,115,113,.13)!important;
  box-shadow:0 18px 42px rgba(8,47,73,.09);
}
body.np-editorial #main-content .editorial-grid{
  position:relative;
}
body.np-editorial #main-content .editorial-card{
  border-color:rgba(25,112,111,.11)!important;
  box-shadow:0 14px 34px rgba(8,47,73,.055)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
body.np-editorial #main-content .editorial-card:hover{
  transform:translateY(-2px);
  border-color:rgba(25,112,111,.20)!important;
  box-shadow:0 20px 42px rgba(8,47,73,.085)!important;
}
body.np-news-article #main-content .article-body{
  box-shadow:0 18px 46px rgba(8,47,73,.055)!important;
  border-color:rgba(26,112,112,.10)!important;
}

/* Preserve legibility and reduce ornament on small screens. */
@media(max-width:760px){
  body.p360-page .p360-hero::before{font-size:150px;left:-22px;top:28px}
  body.p360-page .p360-hero::after{width:300px;height:300px;right:-180px;top:-130px}
  body.p360-page .p360-main::before{background-size:48px 48px;opacity:.09}
  body.np-catalog-page .page-hero::after{width:220px;height:220px;right:-120px;top:-110px}
  body.np-catalog-page .page-hero::before{background-size:44px 44px}
  body.np-site.publishing-site .nps-page::before{height:360px;opacity:.72}
  body.np-site.publishing-site .nps-hero::after{width:300px;right:-170px}
  body.np-editorial #main-content>.np-editorial-heading::before{width:240px;height:240px;right:-150px;bottom:-130px}
  body.np-editorial #main-content .editorial-card:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  body.np-editorial #main-content .editorial-card{transition:none}
}

@media print{
  body.p360-page,body.np-catalog-page,body.np-site.publishing-site{background:#fff!important}
  body.p360-page .p360-hero::before,body.p360-page .p360-hero::after,
  body.p360-page .p360-main::before,body.np-catalog-page .page-hero::before,
  body.np-catalog-page .page-hero::after,body.np-site.publishing-site .nps-page::before,
  body.np-site.publishing-site .nps-hero::after,body.np-editorial #main-content>.np-editorial-heading::before{display:none!important}
}

/* ======================================================================
   NGOC PROPERTY V5.8.143 — secondary navigation + desktop card refinement
   Scope: Project 360/subpage navigation and Project 360 desktop content.
   No route/data/lead behavior changes.
   ====================================================================== */

@media(min-width:901px){
  /* Turn the former full-width white strip into a restrained floating nav tray. */
  body.p360-page .p360-tabs{
    top:70px!important;
    padding:8px 0 10px!important;
    background:linear-gradient(180deg,rgba(247,246,242,.88),rgba(247,246,242,.72))!important;
    border-bottom:1px solid rgba(23,101,102,.08)!important;
    box-shadow:0 10px 28px rgba(8,47,73,.045)!important;
    backdrop-filter:blur(16px) saturate(125%);
  }
  body.p360-page #p360Tabs{
    box-sizing:border-box;
    width:min(1440px,calc(100% - 48px))!important;
    max-width:1440px!important;
    margin:0 auto!important;
    padding:6px 8px!important;
    gap:6px!important;
    border:1px solid rgba(26,111,111,.11);
    border-radius:22px;
    background:rgba(255,255,255,.82);
    box-shadow:0 8px 26px rgba(8,47,73,.055),inset 0 1px 0 rgba(255,255,255,.9);
  }
  body.p360-page #p360Tabs>button,
  body.p360-page #p360More>summary{
    min-height:38px!important;
    padding:7px 13px!important;
    border-color:transparent!important;
    background:transparent!important;
    box-shadow:none!important;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
  }
  body.p360-page #p360Tabs>button:hover,
  body.p360-page #p360More>summary:hover{
    border-color:rgba(27,119,116,.12)!important;
    background:rgba(18,111,109,.065)!important;
    color:#0a5f63!important;
  }
  body.p360-page #p360Tabs>button.active{
    border-color:rgba(213,176,88,.42)!important;
    background:linear-gradient(180deg,#fffaf0,#fff4d8)!important;
    color:#795a12!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 5px 14px rgba(136,103,28,.06)!important;
  }
  body.p360-page #p360More{
    margin-left:auto!important;
  }

  /* Use the desktop canvas more confidently while retaining generous margins. */
  body.p360-page .p360-main>.p360-wrap{
    width:min(1460px,calc(100% - 48px))!important;
    max-width:1460px!important;
  }

  /* Parent content cards: softer paper, clearer hierarchy, less 'form box' feeling. */
  body.p360-page .p360-panel>.p360-card{
    padding:26px!important;
    border:1px solid rgba(26,111,111,.11)!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 18px 44px rgba(8,47,73,.065)!important;
  }

  /* Repeated zone/data cards: equal rhythm + subtle brand accent. */
  body.p360-page .p360-grid{
    gap:18px!important;
    align-items:stretch;
  }
  body.p360-page .p360-grid>.p360-card{
    position:relative;
    overflow:hidden;
    min-height:142px;
    margin:0!important;
    padding:22px 22px 20px!important;
    border:1px solid rgba(30,113,112,.105)!important;
    border-radius:17px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.985),rgba(251,253,251,.96))!important;
    box-shadow:0 12px 30px rgba(8,47,73,.05)!important;
    transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease;
  }
  body.p360-page .p360-grid>.p360-card::before{
    content:"";
    position:absolute;
    left:22px;
    top:0;
    width:52px;
    height:3px;
    border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,#1b8783,#d7b56a);
    opacity:.68;
  }
  body.p360-page .p360-grid>.p360-card:hover{
    transform:translateY(-3px);
    border-color:rgba(24,122,119,.19)!important;
    box-shadow:0 18px 38px rgba(8,47,73,.085)!important;
  }
  body.p360-page .p360-grid>.p360-card small{
    display:block;
    margin-bottom:12px;
    color:#6c7e82!important;
    font-size:12px!important;
    line-height:1.35;
    letter-spacing:.015em;
  }
  body.p360-page .p360-grid>.p360-card h3{
    margin:0 0 14px!important;
    color:#083b55!important;
    font-size:clamp(20px,1.4vw,25px)!important;
    line-height:1.18!important;
    text-wrap:balance;
  }
  body.p360-page .p360-grid>.p360-card p{
    margin:0!important;
    color:#345665!important;
    font-size:14.5px!important;
    line-height:1.6!important;
  }
  body.p360-page .p360-grid>.p360-card b{
    display:block;
    margin-top:auto;
    padding-top:6px;
    color:#073b52!important;
    font-size:16px!important;
    line-height:1.35!important;
  }

  /* Softer end-of-page handoff into the dark footer. */
  body.p360-page .p360-main{
    padding-bottom:60px!important;
    background:linear-gradient(180deg,rgba(247,246,242,0) 72%,rgba(8,47,73,.025) 100%);
  }
  body.p360-page .footer{
    border-top:1px solid rgba(215,181,106,.14);
    box-shadow:0 -18px 44px rgba(8,47,73,.035);
  }
}

@media(max-width:900px){
  /* Mobile keeps horizontal swipe but gets a cleaner, tighter glass bar. */
  body.p360-page .p360-tabs{
    background:rgba(248,249,246,.94)!important;
    box-shadow:0 7px 20px rgba(8,47,73,.045)!important;
  }
  body.p360-page #p360Tabs{
    gap:6px!important;
  }
  body.p360-page #p360Tabs>button.active{
    background:#fff6df!important;
    border-color:rgba(215,181,106,.45)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.p360-page .p360-grid>.p360-card{transition:none!important}
  body.p360-page #p360Tabs>button,body.p360-page #p360More>summary{transition:none!important}
}

/* ======================================================================
   NGOC PROPERTY V5.8.144 — Project 360 zone hierarchy refinement
   Goal: remove repeated zone titles, separate zone navigation from live metrics,
   and make the metric value the primary visual signal.
   ====================================================================== */
body.p360-page #p360-zones>.p360-card>h2{
 margin-bottom:20px!important;
 letter-spacing:-.025em;
}
body.p360-page #p360Zones.p360-zones-refined{
 display:block!important;
}
body.p360-page .p360-zone-directory{
 position:relative;
 overflow:hidden;
 margin:0 0 28px!important;
 padding:24px!important;
 border:1px solid rgba(23,112,110,.12)!important;
 border-radius:18px!important;
 background:
  radial-gradient(circle at 92% 10%,rgba(29,139,135,.07),transparent 18rem),
  linear-gradient(145deg,rgba(244,250,247,.98),rgba(249,251,249,.96))!important;
 box-shadow:0 14px 34px rgba(8,47,73,.045);
}
body.p360-page .p360-zone-directory::after{
 content:"";
 position:absolute;
 width:180px;height:180px;
 right:-100px;top:-100px;
 border:1px solid rgba(215,181,106,.16);
 border-radius:50%;
 box-shadow:0 0 0 28px rgba(215,181,106,.025);
 pointer-events:none;
}
body.p360-page .p360-zone-directory .np-zone-heading{
 display:grid;
 gap:5px;
 margin-bottom:16px;
 position:relative;
 z-index:1;
}
body.p360-page .p360-zone-kicker{
 display:block;
 color:#197773;
 font:800 10px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;
 letter-spacing:.13em;
 text-transform:uppercase;
}
body.p360-page .p360-zone-directory .np-zone-heading h3,
body.p360-page .p360-zone-metrics-head h3{
 margin:0!important;
 color:#083b55!important;
 font:700 clamp(22px,1.6vw,28px)/1.2 Georgia,serif!important;
 letter-spacing:-.02em;
}
body.p360-page .p360-zone-directory .np-zone-heading p,
body.p360-page .p360-zone-metrics-head p{
 margin:2px 0 0!important;
 max-width:720px;
 color:#4e6974!important;
 font-size:14px!important;
 line-height:1.6!important;
}
body.p360-page .p360-zone-directory .np-zone-list{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:12px!important;
 margin:0!important;
 position:relative;
 z-index:1;
}
body.p360-page .p360-zone-link-card{
 position:relative;
 min-height:92px;
 padding:17px 48px 16px 17px!important;
 gap:7px!important;
 border:1px solid rgba(25,112,110,.12)!important;
 border-radius:14px!important;
 background:rgba(255,255,255,.92)!important;
 box-shadow:0 7px 20px rgba(8,47,73,.035);
 transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
body.p360-page .p360-zone-link-card b{
 color:#083c56!important;
 font-size:15px!important;
 line-height:1.35;
}
body.p360-page .p360-zone-link-card>span:not(.p360-zone-arrow){
 color:#197773!important;
 font-size:12.5px!important;
 line-height:1.45;
}
body.p360-page .p360-zone-link-card .p360-zone-arrow{
 position:absolute;
 right:16px;top:50%;
 transform:translateY(-50%);
 width:28px;height:28px;
 display:grid;place-items:center;
 border-radius:50%;
 background:#f4f8f6;
 color:#0c6e70;
 font-size:14px;
 transition:background .16s ease,color .16s ease,transform .16s ease;
}
body.p360-page .p360-zone-link-card:hover{
 transform:translateY(-2px);
 border-color:rgba(21,126,121,.22)!important;
 background:#fff!important;
 box-shadow:0 12px 26px rgba(8,47,73,.065);
}
body.p360-page .p360-zone-link-card:hover .p360-zone-arrow{
 background:#0e676a;color:#fff;transform:translateY(-50%) translateX(2px);
}
body.p360-page .p360-zone-metrics{
 margin-top:4px;
 padding-top:26px;
 border-top:1px solid rgba(21,105,104,.11);
}
body.p360-page .p360-zone-metrics-head{
 display:flex;
 justify-content:space-between;
 align-items:end;
 gap:24px;
 margin-bottom:16px;
}
body.p360-page .p360-stat-grid{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:14px;
}
body.p360-page .p360-stat-card{
 position:relative;
 overflow:hidden;
 min-height:176px;
 display:flex;
 flex-direction:column;
 padding:18px 19px 19px;
 border:1px solid rgba(25,111,110,.105);
 border-radius:16px;
 background:linear-gradient(180deg,#fff,#fbfdfc);
 box-shadow:0 10px 26px rgba(8,47,73,.045);
 transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease;
}
body.p360-page .p360-stat-card::before{
 content:"";
 position:absolute;
 top:0;left:0;right:0;
 height:3px;
 background:linear-gradient(90deg,#1a8582,#d6b66e);
 opacity:.72;
}
body.p360-page .p360-stat-card:hover{
 transform:translateY(-3px);
 border-color:rgba(23,126,121,.18);
 box-shadow:0 16px 34px rgba(8,47,73,.075);
}
body.p360-page .p360-stat-top{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 margin-bottom:24px;
}
body.p360-page .p360-stat-badge{
 color:#6a7c81;
 font:700 10px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;
 letter-spacing:.04em;
 text-transform:uppercase;
}
body.p360-page .p360-stat-zone{
 max-width:52%;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 padding:5px 8px;
 border-radius:999px;
 background:#edf6f3;
 color:#126b69;
 font:750 10.5px/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;
}
body.p360-page .p360-stat-value{
 display:block;
 margin:auto 0 8px;
 color:#073b52;
 font:800 clamp(27px,2vw,34px)/1.05 system-ui,-apple-system,"Segoe UI",sans-serif;
 letter-spacing:-.035em;
}
body.p360-page .p360-stat-label{
 margin:0;
 color:#284f5e;
 font:700 14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
 text-transform:none;
}
body.p360-page .p360-stat-area::after,
body.p360-page .p360-stat-products::after,
body.p360-page .p360-stat-units::after{
 position:absolute;
 right:15px;bottom:12px;
 color:rgba(20,108,107,.07);
 font:800 48px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
 pointer-events:none;
}
body.p360-page .p360-stat-area::after{content:"m²"}
body.p360-page .p360-stat-products::after{content:"∑"}
body.p360-page .p360-stat-units::after{content:"⌂"}
@media(max-width:1050px){
 body.p360-page .p360-zone-directory .np-zone-list,
 body.p360-page .p360-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
 body.p360-page .p360-zone-directory{padding:17px!important;margin-bottom:20px!important}
 body.p360-page .p360-zone-directory .np-zone-list,
 body.p360-page .p360-stat-grid{grid-template-columns:1fr!important}
 body.p360-page .p360-zone-link-card{min-height:80px}
 body.p360-page .p360-zone-metrics{padding-top:20px}
 body.p360-page .p360-zone-metrics-head{display:block;margin-bottom:13px}
 body.p360-page .p360-stat-card{min-height:145px;padding:16px}
 body.p360-page .p360-stat-top{margin-bottom:17px}
 body.p360-page .p360-stat-value{font-size:28px}
}
@media(prefers-reduced-motion:reduce){
 body.p360-page .p360-zone-link-card,body.p360-page .p360-stat-card,
 body.p360-page .p360-zone-link-card .p360-zone-arrow{transition:none!important}
}