.portal-page{
  --portal-green:#0d5c40;
  --portal-green-2:#157451;
  --portal-ink:#20332a;
  --portal-muted:#52685d;
  --portal-gold:#e8a428;
  --portal-cream:#fffaf0;
  --portal-line:rgba(13,92,64,.14);
  background:
    radial-gradient(circle at 8% 8%,rgba(232,164,40,.10),transparent 26rem),
    radial-gradient(circle at 92% 22%,rgba(13,92,64,.08),transparent 30rem),
    #f8fbf9;
  color:var(--portal-ink);
}
.portal-page *{box-sizing:border-box}
/* Đủ 4 class để chắc chắn thắng .main_bg > .wrap > .main trong site.css,
   không phụ thuộc thứ tự nạp file CSS. */
.main_bg.portal-page > .wrap > .portal-main{padding:1rem 0 3.5rem;overflow:clip}
.portal-breadcrumb{margin-bottom:.85rem}

.portal-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  min-height:430px;
  overflow:hidden;
  border:1px solid rgba(13,92,64,.15);
  border-radius:28px;
  background:
    linear-gradient(115deg,rgba(255,255,255,.98) 0 53%,rgba(13,92,64,.96) 53% 100%);
  box-shadow:0 24px 64px rgba(20,54,39,.12);
  isolation:isolate;
}
.portal-hero::before{
  content:"";
  position:absolute;
  width:310px;
  height:310px;
  left:-130px;
  bottom:-190px;
  border:55px solid rgba(232,164,40,.10);
  border-radius:50%;
  pointer-events:none;
}
.portal-hero__copy{
  position:relative;
  z-index:2;
  align-self:center;
  padding:3.25rem clamp(1.4rem,4vw,4.5rem);
}
.portal-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin-bottom:.85rem;
  color:#79510a;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.portal-eyebrow::before{
  content:"";
  width:28px;
  height:2px;
  background:var(--portal-gold);
  box-shadow:10px 0 0 rgba(232,164,40,.35);
}
.portal-hero h1{
  max-width:720px;
  margin:0;
  color:#153d2c;
  font-size:clamp(2rem,4vw,3.45rem);
  font-weight:850;
  letter-spacing:-.045em;
  line-height:1.06;
}
.portal-hero__copy>p{
  max-width:650px;
  margin:1.1rem 0 0;
  color:var(--portal-muted);
  font-size:clamp(.96rem,1.5vw,1.08rem);
  line-height:1.75;
}
.portal-hero__stats{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:1.45rem;
}
.portal-hero__stats span{
  display:flex;
  align-items:baseline;
  gap:.35rem;
  min-height:38px;
  padding:.48rem .8rem;
  border:1px solid var(--portal-line);
  border-radius:999px;
  background:#fff;
  color:#4c6257;
  font-size:.76rem;
  font-weight:650;
  box-shadow:0 7px 18px rgba(13,92,64,.06);
}
.portal-hero__stats strong{color:var(--portal-green);font-size:1rem}

.portal-hero__visual{
  position:relative;
  min-height:430px;
  perspective:900px;
}
.portal-globe{
  position:absolute;
  z-index:2;
  width:190px;
  height:190px;
  left:50%;
  top:50%;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%) rotateX(10deg) rotateY(-12deg);
  border:1px solid rgba(255,255,255,.28);
  border-radius:38%;
  background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.06));
  box-shadow:
    0 28px 60px rgba(0,29,18,.34),
    inset 0 1px 1px rgba(255,255,255,.35);
  backdrop-filter:blur(5px);
  animation:portal-float 5s ease-in-out infinite;
}
.portal-globe svg{width:135px;height:135px}
.portal-globe circle,.portal-globe path{
  fill:none;
  stroke:rgba(255,255,255,.9);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.portal-globe circle:last-child{fill:var(--portal-gold);stroke:#ffe8b4}
.portal-orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  transform:translate(-50%,-50%) rotateX(67deg) rotateZ(-14deg);
}
.portal-orbit::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  top:-5px;
  left:50%;
  border-radius:50%;
  background:var(--portal-gold);
  box-shadow:0 0 18px rgba(232,164,40,.9);
}
.portal-orbit--one{width:300px;height:300px;animation:portal-orbit 14s linear infinite}
.portal-orbit--two{width:380px;height:210px;transform:translate(-50%,-50%) rotateX(58deg) rotateZ(28deg);animation:portal-orbit-alt 18s linear infinite}
.portal-node{
  position:absolute;
  z-index:3;
  padding:.48rem .8rem;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  background:rgba(255,255,255,.94);
  color:#174a34;
  font-size:.72rem;
  font-weight:800;
  box-shadow:0 12px 26px rgba(0,35,21,.23);
}
.portal-node--bird{left:10%;top:20%;transform:rotate(-5deg)}
.portal-node--duck{right:9%;top:24%;transform:rotate(5deg)}
.portal-node--feed{right:10%;bottom:17%;transform:rotate(-3deg)}

.portal-jump{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:1rem;
  margin:1rem 0 2.2rem;
  padding:.85rem 1rem;
  border:1px solid var(--portal-line);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 30px rgba(22,62,43,.07);
}
.portal-jump>span{
  color:#2c493b;
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
}
.portal-jump>div{display:flex;gap:.5rem;overflow:auto;scrollbar-width:thin;padding:.1rem}
.portal-jump a{
  flex:0 0 auto;
  padding:.45rem .72rem;
  border-radius:999px;
  background:#eef6f1;
  color:#185a3e;
  font-size:.75rem;
  font-weight:750;
  text-decoration:none;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.portal-jump a:hover,.portal-jump a:focus-visible{background:var(--portal-green);color:#fff;transform:translateY(-1px)}

.portal-groups{display:grid;gap:2.8rem}
.portal-section{scroll-margin-top:100px}
.portal-section__head{
  display:grid;
  grid-template-columns:minmax(250px,.75fr) minmax(280px,1.25fr);
  align-items:end;
  gap:1.5rem;
  margin-bottom:1.05rem;
  padding:0 .2rem;
}
.portal-section__label{
  display:block;
  margin-bottom:.3rem;
  color:#79510a;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.portal-section h2{
  margin:0;
  color:#183d2d;
  font-size:clamp(1.45rem,2.4vw,2rem);
  letter-spacing:-.025em;
  line-height:1.2;
}
.portal-section__head p{
  max-width:700px;
  margin:0;
  color:var(--portal-muted);
  font-size:.88rem;
  line-height:1.65;
}
.portal-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.85rem;
  perspective:1200px;
}
.portal-card{
  position:relative;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 34px;
  align-items:center;
  gap:.85rem;
  min-height:146px;
  overflow:hidden;
  padding:1rem;
  border:1px solid var(--portal-line);
  border-radius:18px;
  background:linear-gradient(145deg,#fff 0%,#fbfdfc 75%);
  color:var(--portal-ink);
  text-decoration:none;
  transform-style:preserve-3d;
  box-shadow:0 8px 22px rgba(18,63,42,.07);
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease,
    border-color .25s ease;
}
.portal-card__shine{
  position:absolute;
  width:130px;
  height:220px;
  left:-170px;
  top:-45px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  transform:rotate(22deg);
  transition:left .6s ease;
  pointer-events:none;
}
.portal-card__icon{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border:1px solid rgba(13,92,64,.13);
  border-radius:17px;
  background:
    radial-gradient(circle at 30% 25%,#fff 0 8%,transparent 9%),
    linear-gradient(145deg,#eaf5ef,#d8ebdf);
  color:#126044;
  font-size:.73rem;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:inset 0 1px 0 #fff,0 8px 16px rgba(13,92,64,.09);
  transform:translateZ(22px);
}
.portal-card__body{position:relative;z-index:1;display:block;min-width:0;transform:translateZ(13px)}
.portal-card__body strong{
  display:block;
  margin-bottom:.3rem;
  color:#173c2c;
  font-size:.96rem;
  line-height:1.3;
}
.portal-card__body>span{
  display:-webkit-box;
  overflow:hidden;
  color:#566c61;
  font-size:.78rem;
  line-height:1.5;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.portal-card__body small{
  display:block;
  overflow:hidden;
  margin-top:.43rem;
  color:#27694e;
  font-size:.65rem;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.portal-card__arrow{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#eef6f1;
  color:var(--portal-green);
  transform:translateZ(18px);
  transition:background .25s ease,color .25s ease,transform .3s ease;
}
.portal-card__arrow svg{width:17px;height:17px}
.portal-card__arrow path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (hover:hover) and (pointer:fine){
  .portal-card:hover{
    z-index:2;
    border-color:rgba(13,92,64,.35);
    transform:translateY(-7px) rotateX(2.5deg) rotateY(-2deg);
    box-shadow:0 22px 42px rgba(18,63,42,.16);
  }
  .portal-card:nth-child(3n+2):hover{transform:translateY(-7px) rotateX(2.5deg) rotateY(2deg)}
  .portal-card:hover .portal-card__shine{left:115%}
  .portal-card:hover .portal-card__arrow{background:var(--portal-green);color:#fff;transform:translateZ(24px) rotate(4deg)}
}
.portal-card:focus-visible{outline:3px solid rgba(232,164,40,.75);outline-offset:3px}

.portal-trust{
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  gap:1rem;
  align-items:center;
  margin-top:3rem;
  padding:1.25rem;
  border:1px solid rgba(232,164,40,.3);
  border-radius:20px;
  background:linear-gradient(110deg,#fff9eb,#fff 65%);
  box-shadow:0 15px 36px rgba(66,48,12,.07);
}
.portal-trust__mark{
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border-radius:18px;
  background:#fff;
  color:#a86c08;
  box-shadow:0 8px 20px rgba(126,82,8,.12);
}
.portal-trust__mark svg{width:34px;height:34px}
.portal-trust__mark path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.portal-trust h2{margin:0 0 .25rem;color:#3e321b;font-size:1.05rem}
.portal-trust p{margin:0;color:#655c4d;font-size:.82rem;line-height:1.6}

@keyframes portal-float{
  0%,100%{transform:translate(-50%,-50%) rotateX(10deg) rotateY(-12deg) translateY(0)}
  50%{transform:translate(-50%,-50%) rotateX(7deg) rotateY(-6deg) translateY(-9px)}
}
@keyframes portal-orbit{
  to{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(346deg)}
}
@keyframes portal-orbit-alt{
  to{transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-332deg)}
}

@media (max-width:980px){
  .portal-hero{grid-template-columns:minmax(0,1fr) 300px;min-height:390px}
  .portal-hero__visual{min-height:390px}
  .portal-globe{width:155px;height:155px}
  .portal-globe svg{width:108px;height:108px}
  .portal-orbit--one{width:240px;height:240px}
  .portal-orbit--two{width:295px;height:170px}
  .portal-node--feed{right:4%}
  .portal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .portal-main{padding-top:.65rem}
  .portal-hero{
    grid-template-columns:1fr;
    background:linear-gradient(170deg,#fff 0 62%,#0d5c40 62% 100%);
  }
  .portal-hero__copy{padding:2rem 1.15rem 1.1rem}
  .portal-hero h1{font-size:clamp(2rem,10vw,3rem)}
  .portal-hero__visual{min-height:285px}
  .portal-globe{width:140px;height:140px}
  .portal-orbit--one{width:220px;height:220px}
  .portal-orbit--two{width:280px;height:155px}
  .portal-node--bird{left:8%;top:18%}
  .portal-node--duck{right:7%;top:19%}
  .portal-node--feed{right:8%;bottom:12%}
  .portal-jump{grid-template-columns:1fr;gap:.55rem;margin-bottom:2rem}
  .portal-section__head{grid-template-columns:1fr;gap:.45rem}
  .portal-groups{gap:2.3rem}
}
@media (max-width:560px){
  .portal-main{padding-bottom:2.5rem}
  .portal-hero{border-radius:20px}
  .portal-hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
  .portal-hero__stats span{display:block;min-width:0;padding:.5rem .25rem;text-align:center;border-radius:12px}
  .portal-hero__stats strong{display:block}
  .portal-grid{grid-template-columns:1fr;gap:.65rem}
  .portal-card{grid-template-columns:52px minmax(0,1fr) 30px;min-height:126px;padding:.85rem;gap:.7rem;border-radius:16px}
  .portal-card__icon{width:52px;height:52px;border-radius:15px}
  .portal-card__body strong{font-size:.93rem}
  .portal-card__body>span{font-size:.76rem}
  .portal-card__arrow{width:30px;height:30px}
  .portal-trust{grid-template-columns:48px minmax(0,1fr);padding:1rem}
  .portal-trust__mark{width:48px;height:48px;border-radius:14px}
  .portal-trust__mark svg{width:28px;height:28px}
}
@media (max-width:360px){
  .portal-hero__copy{padding-inline:.9rem}
  .portal-hero__stats span{font-size:.67rem}
  .portal-node{font-size:.65rem;padding:.4rem .58rem}
  .portal-card{grid-template-columns:46px minmax(0,1fr) 28px;padding:.75rem;gap:.55rem}
  .portal-card__icon{width:46px;height:46px;font-size:.65rem}
}
@media (prefers-reduced-motion:reduce){
  .portal-page *{scroll-behavior:auto!important}
  .portal-globe,.portal-orbit{animation:none!important}
  .portal-card,.portal-card__shine,.portal-card__arrow,.portal-jump a{transition:none!important}
}
@media print{
  .portal-hero{display:block;min-height:0;background:#fff;box-shadow:none}
  .portal-hero__copy{padding:1rem}
  .portal-hero__visual,.portal-jump,.portal-card__arrow,.portal-card__shine{display:none}
  .portal-grid{grid-template-columns:repeat(2,1fr)}
  .portal-card{break-inside:avoid;box-shadow:none}
}