@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700&display=swap');

:root {
  --layout-unit: 1px
}

@media(min-width:1101px) {

  .portal,
  .detail-shared-header,
  .detail-page-footer.portal {
    --layout-unit: calc(100vw / 1366)
  }
}


.portal {
  background: #fff;
  color: #003e88;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: calc(18 * var(--layout-unit));
  line-height: 1.35
}

.portal * {
  box-sizing: border-box
}

.portal-container {
  width: min(calc(1200 * var(--layout-unit)), calc(100% - calc(60 * var(--layout-unit))));
  margin-inline: auto
}

.portal a:hover {
  color: #008cd1
}

.portal button {
  cursor: pointer;
  font-family: inherit
}

.portal a:focus-visible,
.portal button:focus-visible,
.portal input:focus-visible {
  outline: calc(2 * var(--layout-unit)) solid #0065db;
  outline-offset: calc(3 * var(--layout-unit))
}

.portal h1,
.portal h2,
.portal h3,
.portal p {
  margin: 0
}

.portal ul {
  padding: 0;
  margin: 0;
  list-style: none
}

.portal main {
  background: #fff
}

.portal h2,
.portal h3 {
  font-family: "Roboto Condensed", Arial, sans-serif
}

.portal .gateway h2 {
  color: #303743
}

.partner-logo {
  object-fit: contain;
  width: calc(200 * var(--layout-unit));
  height: calc(72 * var(--layout-unit))
}

.sunworld .partner-logo {
  height: calc(70 * var(--layout-unit));
  width: calc(190 * var(--layout-unit))
}

.portal-header {
  background: linear-gradient(#f5f8fc, #fff);
  height: calc(95 * var(--layout-unit))
}

.header-layout {
  height: 100%;
  display: grid;
  grid-template-columns: calc(275 * var(--layout-unit)) minmax(0, 1fr);
  gap: calc(28 * var(--layout-unit));
  align-items: center
}

.portal-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(170 * var(--layout-unit));
  height: calc(90 * var(--layout-unit))
}

.portal-brand img {
  width: calc(115 * var(--layout-unit));
  height: calc(86 * var(--layout-unit));
  object-fit: contain
}

.header-right {
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-around
}

.header-utilities {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--layout-unit))
}

.portal-languages {
  display: flex;
  align-items: center;
  gap: 0
}

.portal-languages button {
  background: none;
  border: 0;
  border-right: calc(1 * var(--layout-unit)) solid #dce0e7;
  padding: 0 calc(9 * var(--layout-unit));
  display: flex;
  align-items: center;
  gap: calc(5 * var(--layout-unit));
  font-size: calc(12 * var(--layout-unit));
  color: #252a36;
  white-space: nowrap
}

.portal-languages button:first-child {
  padding-left: 0
}

.portal-languages img {
  width: calc(19 * var(--layout-unit));
  height: calc(13 * var(--layout-unit));
  object-fit: cover
}

.portal-search {
  width: calc(198 * var(--layout-unit));
  flex: 0 1 calc(198 * var(--layout-unit));
  display: flex;
  height: calc(30 * var(--layout-unit));
  border: calc(1 * var(--layout-unit)) solid #dae0e9;
  border-radius: calc(5 * var(--layout-unit));
  background: #f6f8fc
}

.portal-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: none;
  padding: calc(5 * var(--layout-unit)) calc(10 * var(--layout-unit));
  font-family: inherit;
  font-size: calc(13 * var(--layout-unit))
}

.portal-search button {
  border: 0;
  background: none;
  color: #034897;
  font-size: calc(25 * var(--layout-unit));
  line-height: 1;
  padding: 0 calc(8 * var(--layout-unit))
}

.portal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(18 * var(--layout-unit));
  font-size: calc(14 * var(--layout-unit));
  font-weight: 600;
  color: #252a36
}

.portal-nav a {
  position: relative;
  padding: calc(8 * var(--layout-unit)) 0;
  white-space: nowrap
}

.portal-nav a[aria-current] {
  color: #0056d7
}

.portal-nav a[aria-current]:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(2 * var(--layout-unit));
  background: #0068ef
}

.portal-hamb {
  display: none
}

.portal-video {
  height: calc(410 * var(--layout-unit));
  position: relative;
  overflow: hidden;
  background: #074e65
}

.portal-video video {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.portal-video h1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(49 * var(--layout-unit));
  text-align: center;
  color: #fff;
  font-size: calc(43 * var(--layout-unit));
  font-weight: 700;
  text-shadow: 0 calc(2 * var(--layout-unit)) calc(8 * var(--layout-unit)) #0005
}

.video-toggle {
  position: absolute;
  right: calc(16 * var(--layout-unit));
  bottom: calc(16 * var(--layout-unit));
  border: calc(1 * var(--layout-unit)) solid #ffffff70;
  background: #0003;
  color: #fff;
  border-radius: calc(4 * var(--layout-unit));
  width: calc(36 * var(--layout-unit));
  height: calc(34 * var(--layout-unit));
  opacity: 0;
  transition: opacity .2s
}

.portal-video:hover .video-toggle,
.video-toggle:focus-visible {
  opacity: 1
}

.welcome {
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: calc(2 * var(--layout-unit)) solid #626976;
  height: calc(120 * var(--layout-unit));
  gap: calc(20 * var(--layout-unit));
  margin-bottom: calc(17 * var(--layout-unit))
}

.welcome>img {
  width: calc(68 * var(--layout-unit));
  height: calc(67 * var(--layout-unit));
  object-fit: contain
}

.welcome>p {
  flex: 1;
  text-align: center;
  color: #858893;
  font-size: calc(28 * var(--layout-unit));
  font-weight: 500;
  margin-right: calc(88 * var(--layout-unit))
}

.gateway-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(30 * var(--layout-unit));
  padding-bottom: calc(12 * var(--layout-unit))
}

.gateway {
  border: calc(1 * var(--layout-unit)) solid #cdd1d8;
  border-radius: calc(2 * var(--layout-unit));
  overflow: hidden;
  box-shadow: 0 calc(1 * var(--layout-unit)) calc(2 * var(--layout-unit)) #0001;
  background: #fff;
  min-width: 0
}

.gateway-photo {
  height: calc(216 * var(--layout-unit));
  position: relative;
  overflow: hidden
}

.gateway-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pci-photo:after {
  content: "";
  position: absolute;
  inset: 65% 0 0;
  background: linear-gradient(transparent, #001329)
}

.pci-photo strong {
  position: absolute;
  bottom: calc(-9 * var(--layout-unit));
  left: calc(17 * var(--layout-unit));
  font-family: Arial, sans-serif;
  font-size: calc(68 * var(--layout-unit));
  font-style: italic;
  font-weight: 900;
  color: #78c7f4;
  z-index: 1;
  letter-spacing: calc(-5 * var(--layout-unit))
}

.pci-photo strong span {
  color: #fff
}

.welcome-photo strong {
  position: absolute;
  top: calc(45 * var(--layout-unit));
  left: 0;
  right: 0;
  text-align: center;
  font-family: Arial, sans-serif;
  font-weight: 900;
  font-size: calc(65 * var(--layout-unit));
  color: #77a4ff;
  text-shadow: 0 calc(2 * var(--layout-unit)) calc(5 * var(--layout-unit)) #072c72
}

.gateway-content {
  padding: calc(12 * var(--layout-unit)) calc(21 * var(--layout-unit)) calc(16 * var(--layout-unit));
  min-height: calc(195 * var(--layout-unit))
}

.gateway h2 {
  font-size: calc(25 * var(--layout-unit));
  color: #303743;
  margin-bottom: calc(6 * var(--layout-unit));
  font-weight: 700
}

.gateway li {
  position: relative;
  padding-left: calc(17 * var(--layout-unit));
  font-size: calc(20 * var(--layout-unit));
  line-height: 1.28
}

.gateway li:before {
  content: "›";
  position: absolute;
  left: 0;
  color: #0053c8;
  font-weight: 700
}

.partner-strip {
  border-top: calc(8 * var(--layout-unit)) solid #00628a;
  margin-top: 0
}

.partners {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  min-height: calc(168 * var(--layout-unit));
  gap: calc(30 * var(--layout-unit))
}

.partner {
  text-align: center;
  color: #282f3c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(140 * var(--layout-unit))
}

.partner p {
  font-size: calc(17 * var(--layout-unit));
  margin: calc(7 * var(--layout-unit)) 0
}

.deepc-wordmark {
  font-family: Arial, sans-serif;
  font-size: calc(36 * var(--layout-unit));
  letter-spacing: calc(2 * var(--layout-unit));
  color: #063ca3
}

.deepc-wordmark span {
  color: #00a537
}

.deepc-wordmark i {
  font-size: calc(45 * var(--layout-unit));
  color: #0472ad
}

.deepc small {
  font-size: calc(12 * var(--layout-unit));
  letter-spacing: calc(4 * var(--layout-unit));
  color: #00419b
}

.sunworld strong {
  font-size: calc(46 * var(--layout-unit));
  font-weight: 900;
  color: #ed1c24;
  letter-spacing: calc(-2 * var(--layout-unit));
  line-height: 1
}

.sunworld strong span {
  color: #e82326
}

.sunworld b {
  color: #ed1c24;
  font-size: calc(22 * var(--layout-unit))
}

.amata strong {
  font-size: calc(36 * var(--layout-unit));
  letter-spacing: calc(2 * var(--layout-unit));
  color: #078969;
  border-bottom: calc(2 * var(--layout-unit)) solid #75af99
}

.amata small {
  font-size: calc(17 * var(--layout-unit));
  color: #00a7d4
}

.vingroup strong {
  font-family: Arial, sans-serif;
  font-size: calc(28 * var(--layout-unit));
  font-weight: 900;
  color: #d71930;
  line-height: 1
}

.vingroup-symbol {
  background: #ec1c2b;
  border-radius: 50%;
  color: #ffdc25;
  font-family: Georgia, serif;
  font-size: calc(44 * var(--layout-unit));
  font-style: italic;
  width: calc(68 * var(--layout-unit));
  height: calc(68 * var(--layout-unit));
  line-height: calc(68 * var(--layout-unit))
}

.portal-map {
  position: relative;
  height: calc(334 * var(--layout-unit));
  overflow: hidden;
  background: #004e6c;
  color: #fff
}

.map-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s;
}

.map-tabs {
  display: flex;
  border-bottom: calc(1 * var(--layout-unit)) solid #b1d7e0
}

.map-tabs button {
  border: 0;
  border-right: calc(1 * var(--layout-unit)) solid #ffffff25;
  background: #102e4366;
  padding: calc(9 * var(--layout-unit)) calc(12 * var(--layout-unit));
  color: #fff;
  font-size: calc(14 * var(--layout-unit))
}

.map-tabs button[aria-selected=true] {
  background: #c9dfef;
  color: #00498f
}

.map-mini {
  position: absolute;
  right: calc(30 * var(--layout-unit));
  bottom: calc(10 * var(--layout-unit));
  width: calc(211 * var(--layout-unit));
  height: calc(92 * var(--layout-unit));
  background: #fff;
  border-radius: calc(6 * var(--layout-unit));
  overflow: hidden;
  border: calc(2 * var(--layout-unit)) solid white
}

.map-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.map-mini span {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #133b4cbf;
  padding: calc(8 * var(--layout-unit)) calc(18 * var(--layout-unit));
  font-size: calc(13 * var(--layout-unit))
}

.project-chains {
  padding: calc(10 * var(--layout-unit)) 0 calc(15 * var(--layout-unit))
}

.portal h2 {
  color: #0050ae
}

.project-chains h2,
.projects-layout h2,
.portal-updates h2,
.portal-tools h2 {
  font-size: calc(19 * var(--layout-unit));
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: calc(7 * var(--layout-unit))
}

.portal h2 small {
  font-weight: 400;
  font-size: calc(13 * var(--layout-unit))
}

.chain-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(12 * var(--layout-unit))
}

.chain {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--layout-unit));
  padding: calc(8 * var(--layout-unit)) calc(10 * var(--layout-unit));
  border: calc(1 * var(--layout-unit)) solid;
  border-radius: calc(6 * var(--layout-unit));
  min-height: calc(78 * var(--layout-unit));
  color: #0656c7;
  background: #f2f7ff;
  border-color: #aacbff;
  font-size: calc(13 * var(--layout-unit))
}

.chain>span {
  border-radius: 50%;
  background: #d7e7ff;
  color: #005dff;
  font-size: calc(34 * var(--layout-unit));
  width: calc(53 * var(--layout-unit));
  height: calc(53 * var(--layout-unit));
  text-align: center;
  flex-shrink: 0;
  line-height: calc(53 * var(--layout-unit))
}

.chain b,
.chain small {
  display: block
}

.chain b {
  font-weight: 600
}

.chain small {
  margin-top: calc(6 * var(--layout-unit));
  font-size: calc(12 * var(--layout-unit));
  color: #14477f
}

.chain-1 {
  background: #fff1f1;
  border-color: #ffb4b9;
  color: #ea293b
}

.chain-1>span {
  background: #ffd7d9;
  color: #ee3844
}

.chain-2 {
  background: #f0fbf4;
  border-color: #b8e6c9;
  color: #04752e
}

.chain-2>span {
  background: #d2f1db;
  color: #159346
}

.chain-3 {
  background: #f8f0ff;
  border-color: #dfb4ff;
  color: #9520cd
}

.chain-3>span {
  background: #ecd4ff;
  color: #ae32de
}

.chain-4 {
  background: #fff7ef;
  border-color: #ffd4b6;
  color: #cf6a27
}

.chain-4>span {
  background: #ffe2cb;
  color: #ed7a24
}

.projects-layout {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: calc(56 * var(--layout-unit));
  padding: 0 0 calc(27 * var(--layout-unit))
}

.featured {
  position: relative;
  min-width: 0
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(11 * var(--layout-unit))
}

.project-card {
  min-width: 0;
  text-align: left;
  border: calc(1 * var(--layout-unit)) solid #dfe6ed;
  border-radius: calc(4 * var(--layout-unit));
  overflow: hidden;
  background: #fff;
  padding: 0 0 calc(9 * var(--layout-unit));
  color: #2c3c4c
}

.project-card>img {
  width: 100%;
  height: calc(129 * var(--layout-unit));
  object-fit: cover
}

.project-card h3 {
  font-size: calc(16 * var(--layout-unit));
  color: #0048a5;
  padding: calc(5 * var(--layout-unit)) calc(12 * var(--layout-unit));
  font-weight: 700;
  line-height: 1.2
}

.project-card p {
  font-size: calc(13 * var(--layout-unit));
  margin: calc(4 * var(--layout-unit)) calc(12 * var(--layout-unit))
}

.project-prev,
.project-next {
  position: absolute;
  top: calc(100 * var(--layout-unit));
  border: calc(1 * var(--layout-unit)) solid #e4e8ec;
  border-radius: 50%;
  background: #fff;
  color: #0069d8;
  box-shadow: 0 calc(2 * var(--layout-unit)) calc(6 * var(--layout-unit)) #0002;
  width: calc(39 * var(--layout-unit));
  height: calc(39 * var(--layout-unit));
  font-size: calc(34 * var(--layout-unit));
  line-height: 1
}

.project-prev {
  left: calc(-20 * var(--layout-unit))
}

.project-next {
  right: calc(-20 * var(--layout-unit))
}

.project-detail {
  border: calc(1 * var(--layout-unit)) solid #e4e9ef;
  padding: 0 calc(9 * var(--layout-unit)) calc(8 * var(--layout-unit));
  border-radius: calc(4 * var(--layout-unit));
  min-width: 0
}

.project-detail>h2 {
  margin-left: calc(-9 * var(--layout-unit));
  background: white;
  margin-top: calc(-1 * var(--layout-unit))
}

.project-tabs {
  display: flex;
  justify-content: space-between;
  background: #f6f8fc;
  margin-bottom: calc(10 * var(--layout-unit))
}

.project-tabs button {
  border: 0;
  background: none;
  color: #465262;
  font-size: calc(13 * var(--layout-unit));
  padding: calc(6 * var(--layout-unit)) calc(10 * var(--layout-unit));
  border-top: calc(2 * var(--layout-unit)) solid transparent
}

.project-tabs button[aria-selected=true] {
  color: #005de5;
  border-top-color: #0062ec;
  background: #fff
}

.project-detail h3 {
  font-size: calc(17 * var(--layout-unit));
  font-weight: 700;
  margin-bottom: calc(10 * var(--layout-unit));
  color: #0050ad
}

#projectPanel {
  min-height: calc(127 * var(--layout-unit))
}

.project-overview {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: calc(10 * var(--layout-unit))
}

.project-overview img {
  width: 100%;
  height: calc(126 * var(--layout-unit));
  object-fit: cover
}

.project-overview dl {
  font-size: calc(12 * var(--layout-unit));
  line-height: 1.6;
  margin: 0
}

.project-overview dl div {
  display: flex;
  gap: calc(5 * var(--layout-unit))
}

.project-overview dt {
  font-weight: 600;
  white-space: nowrap
}

.project-overview dt:before {
  content: "› ";
  color: #0063c9
}

.project-overview dd {
  margin: 0
}

.project-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12 * var(--layout-unit));
  margin-top: calc(8 * var(--layout-unit))
}

.project-actions a {
  padding: calc(5 * var(--layout-unit)) calc(6 * var(--layout-unit));
  border: calc(1 * var(--layout-unit)) solid #9db8e1;
  border-radius: calc(3 * var(--layout-unit));
  background: #f0f5ff;
  color: #0054bf;
  text-align: center;
  font-size: calc(13 * var(--layout-unit))
}

.project-actions a:first-child {
  background: #0060d5;
  color: #fff;
  border-color: #0060d5
}

.project-media {
  width: 100%;
  height: calc(127 * var(--layout-unit));
  object-fit: cover
}

.project-panel-copy {
  font-size: calc(14 * var(--layout-unit));
  line-height: 1.6;
  padding: calc(8 * var(--layout-unit))
}

.portal-updates {
  display: grid;
  grid-template-columns: 2.45fr 1fr;
  gap: calc(30 * var(--layout-unit));
  padding-bottom: calc(15 * var(--layout-unit))
}

.investment-news {
  min-width: 0
}

.portal-section-heading {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--layout-unit));
  margin-bottom: calc(10 * var(--layout-unit))
}

.portal-section-heading h2 {
  margin: 0;
  white-space: nowrap
}

.portal-section-heading>a {
  font-size: calc(12 * var(--layout-unit));
  white-space: nowrap;
  margin-left: auto
}

.news-tabs {
  display: flex;
  min-width: 0;
  overflow: auto;
  background: #f5f6f9
}

.news-tabs button {
  border: 0;
  background: none;
  padding: calc(7 * var(--layout-unit)) calc(10 * var(--layout-unit));
  font-size: calc(11 * var(--layout-unit));
  color: #495064;
  white-space: nowrap
}

.news-tabs button[aria-selected=true] {
  background: #0062db;
  color: #fff
}

.investment-news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(10 * var(--layout-unit))
}

.investment-news-card {
  border: calc(1 * var(--layout-unit)) solid #e0e6ef;
  border-radius: calc(4 * var(--layout-unit));
  overflow: hidden;
  padding-bottom: calc(9 * var(--layout-unit));
  min-width: 0
}

.investment-news-card img {
  height: calc(103 * var(--layout-unit));
  width: 100%;
  object-fit: cover
}

.investment-news-card h3 {
  font-size: calc(14 * var(--layout-unit));
  line-height: 1.25;
  padding: calc(8 * var(--layout-unit)) calc(9 * var(--layout-unit));
  min-height: calc(55 * var(--layout-unit))
}

.investment-news-card time {
  font-size: calc(12 * var(--layout-unit));
  color: #7d899b;
  padding: 0 calc(9 * var(--layout-unit))
}

.policy-list .portal-section-heading {
  justify-content: space-between;
  gap: calc(4 * var(--layout-unit))
}

.policy-list h2 {
  font-size: calc(18 * var(--layout-unit))
}

.policy-list>a {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--layout-unit));
  border: calc(1 * var(--layout-unit)) solid #e5e9ee;
  border-bottom: 0;
  padding: calc(3 * var(--layout-unit)) calc(11 * var(--layout-unit));
  min-height: calc(41 * var(--layout-unit));
  color: #333e4f
}

.policy-list>a:last-child {
  border-bottom: calc(1 * var(--layout-unit)) solid #e5e9ee
}

.policy-list b {
  display: block;
  font-size: calc(14 * var(--layout-unit));
  font-weight: 600;
  line-height: 1.2
}

.policy-list small {
  font-size: calc(12 * var(--layout-unit));
  display: block
}

.policy-icon {
  display: grid;
  place-items: center;
  width: calc(33 * var(--layout-unit));
  height: calc(31 * var(--layout-unit));
  color: #0085bb;
  background: #e1f3fb;
  font-size: calc(23 * var(--layout-unit));
  flex-shrink: 0
}

.policy-1 {
  background: #f8f4de;
  color: #a39118
}

.policy-2 {
  background: #fff0df;
  color: #f06415
}

.policy-3 {
  background: #fff1df;
  color: #ee8f00
}

.policy-4 {
  background: #eaf0ff;
  color: #0458eb
}

.visitor-strip {
  background: linear-gradient(100deg, #165d81, #004a71);
  color: #fff
}

.visitors {
  display: flex;
  align-items: center;
  gap: calc(110 * var(--layout-unit));
  padding: calc(12 * var(--layout-unit)) 0
}

.visitor-total b {
  font-size: calc(39 * var(--layout-unit));
  letter-spacing: calc(1 * var(--layout-unit));
  display: block;
  line-height: 1.1;
  font-weight: 600
}

.visitor-total span {
  font-size: calc(20 * var(--layout-unit))
}

.visitor-countries {
  flex: 1
}

.visitor-countries>p {
  font-size: calc(15 * var(--layout-unit));
  margin-bottom: calc(5 * var(--layout-unit))
}

.visitor-countries>div {
  display: flex;
  justify-content: space-between;
  gap: calc(24 * var(--layout-unit))
}

.visitor-countries>div>span {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--layout-unit));
  font-size: calc(13 * var(--layout-unit))
}

.visitor-countries img {
  width: calc(29 * var(--layout-unit));
  height: calc(29 * var(--layout-unit));
  object-fit: cover;
  border-radius: 50%;
  border: calc(3 * var(--layout-unit)) solid #fff
}

.visitor-countries b {
  display: block;
  font-weight: 500
}

.visitor-countries i {
  font-style: normal;
  border-radius: 50%;
  background: #00b6df;
  color: #fff;
  display: grid;
  place-items: center;
  width: calc(29 * var(--layout-unit));
  height: calc(29 * var(--layout-unit));
  font-size: calc(20 * var(--layout-unit))
}

.portal-footer {
  background: #fff;
  color: #536278;
  padding: 0
}

.portal-footer-grid {
  display: grid;
  grid-template-columns: calc(280 * var(--layout-unit)) minmax(0, 1fr) calc(100 * var(--layout-unit)) calc(130 * var(--layout-unit)) calc(150 * var(--layout-unit));
  gap: calc(25 * var(--layout-unit));
  align-items: center;
  min-height: calc(100 * var(--layout-unit));
  padding: calc(12 * var(--layout-unit)) 0
}

.footer-address {
  color: #004c98;
  font-size: calc(13 * var(--layout-unit))
}

.footer-address>b {
  font-size: calc(12 * var(--layout-unit))
}

.footer-address p {
  margin: calc(4 * var(--layout-unit)) 0
}

.footer-address>div {
  display: flex;
  gap: calc(24 * var(--layout-unit))
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--layout-unit));
  font-size: calc(13 * var(--layout-unit))
}

.footer-socials {
  display: flex;
  gap: calc(14 * var(--layout-unit))
}

.footer-socials a {
  width: calc(25 * var(--layout-unit));
  height: calc(25 * var(--layout-unit));
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: Arial, sans-serif;
  background: #1765e8;
  color: #fff;
  font-size: calc(17 * var(--layout-unit));
  font-weight: 700
}

.footer-socials a:first-child {
  background: #ff1428
}

.footer-socials a:nth-child(3) {
  background: #162a43
}

.footer-socials a:last-child {
  font-size: calc(9 * var(--layout-unit))
}

.portal-copyright {
  background: #055274;
  color: #c8dfed
}

.portal-copyright>.portal-container {
  display: flex;
  justify-content: flex-end;
  gap: calc(90 * var(--layout-unit));
  font-size: calc(12 * var(--layout-unit));
  padding: calc(14 * var(--layout-unit)) 0
}

@media(min-width:1500px) {
  .portal-container {
    width: min(calc(1200 * var(--layout-unit)), calc(100% - calc(60 * var(--layout-unit))))
  }

  .portal-map {
    width: min(calc(1260 * var(--layout-unit)), 100%);
    margin-inline: auto
  }
}

@media(max-width:1100px) {
  .header-layout {
    grid-template-columns: calc(170 * var(--layout-unit)) 1fr;
    gap: calc(15 * var(--layout-unit))
  }

  .header-utilities {
    gap: calc(10 * var(--layout-unit))
  }

  .portal-languages button {
    font-size: calc(11 * var(--layout-unit));
    padding: 0 calc(5 * var(--layout-unit))
  }

  .portal-search {
    width: calc(150 * var(--layout-unit))
  }

  .portal-nav {
    font-size: calc(13 * var(--layout-unit));
    gap: calc(12 * var(--layout-unit))
  }

  .gateway-content {
    padding-inline: calc(14 * var(--layout-unit))
  }

  .gateway li {
    font-size: calc(17 * var(--layout-unit))
  }

  .gateway h2 {
    font-size: calc(23 * var(--layout-unit))
  }

  .gateway-photo {
    height: calc(190 * var(--layout-unit))
  }

  .projects-layout {
    gap: calc(28 * var(--layout-unit))
  }

  .portal-section-heading {
    flex-wrap: wrap;
    gap: calc(7 * var(--layout-unit))
  }

  .news-tabs {
    order: 3;
    flex-basis: 100%
  }

  .portal-footer-grid {
    grid-template-columns: calc(220 * var(--layout-unit)) 1fr calc(90 * var(--layout-unit)) calc(110 * var(--layout-unit))
  }

  .footer-socials {
    grid-column: 4
  }

  .chain {
    padding: calc(7 * var(--layout-unit));
    gap: calc(6 * var(--layout-unit))
  }

  .chain>span {
    width: calc(40 * var(--layout-unit));
    height: calc(40 * var(--layout-unit));
    line-height: calc(40 * var(--layout-unit));
    font-size: calc(26 * var(--layout-unit))
  }
}

@media(max-width:760px) {
  .portal {
    font-size: calc(16 * var(--layout-unit))
  }

  .portal-container {
    width: calc(100% - calc(32 * var(--layout-unit)))
  }

  .portal-header {
    height: auto
  }

  .header-layout {
    grid-template-columns: calc(95 * var(--layout-unit)) 1fr;
    gap: calc(12 * var(--layout-unit));
    min-height: calc(88 * var(--layout-unit))
  }

  .portal-brand {
    width: calc(95 * var(--layout-unit));
    height: calc(80 * var(--layout-unit))
  }

  .portal-brand img {
    width: calc(90 * var(--layout-unit));
    height: calc(76 * var(--layout-unit))
  }

  .header-right {
    justify-content: center;
    gap: calc(8 * var(--layout-unit));
    position: relative
  }

  .header-utilities {
    flex-wrap: wrap;
    gap: calc(7 * var(--layout-unit));
    padding: calc(7 * var(--layout-unit)) 0
  }

  .portal-languages {
    flex-wrap: wrap;
    row-gap: calc(6 * var(--layout-unit))
  }

  .portal-languages button {
    font-size: calc(10 * var(--layout-unit));
    padding: 0 calc(4 * var(--layout-unit))
  }

  .portal-languages img {
    width: calc(15 * var(--layout-unit));
    height: calc(10 * var(--layout-unit))
  }

  .portal-search {
    width: calc(100% - calc(45 * var(--layout-unit)));
    flex-basis: calc(100% - calc(45 * var(--layout-unit)))
  }

  .portal-hamb {
    display: block;
    position: absolute;
    right: 0;
    bottom: calc(7 * var(--layout-unit));
    border: 0;
    background: #eaf3fe;
    color: #0054b9;
    border-radius: calc(4 * var(--layout-unit));
    padding: calc(3 * var(--layout-unit)) calc(8 * var(--layout-unit));
    font-size: calc(24 * var(--layout-unit))
  }

  .portal-nav {
    display: none
  }

  .portal-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    left: calc(-107 * var(--layout-unit));
    right: 0;
    top: 100%;
    background: #fff;
    padding: calc(10 * var(--layout-unit)) calc(16 * var(--layout-unit));
    z-index: 20;
    border: calc(1 * var(--layout-unit)) solid #dae4f0;
    box-shadow: 0 calc(8 * var(--layout-unit)) calc(16 * var(--layout-unit)) #1232;
    font-size: calc(16 * var(--layout-unit));
    gap: 0
  }

  .portal-video {
    height: calc(235 * var(--layout-unit));
    width: 100%
  }

  .portal-video h1 {
    font-size: calc(32 * var(--layout-unit));
    bottom: calc(30 * var(--layout-unit))
  }

  .video-toggle {
    opacity: 1
  }

  .welcome {
    height: calc(90 * var(--layout-unit))
  }

  .welcome>img {
    width: calc(50 * var(--layout-unit));
    height: calc(50 * var(--layout-unit))
  }

  .welcome>p {
    font-size: calc(21 * var(--layout-unit));
    margin-right: 0
  }

  .gateway-grid {
    grid-template-columns: 1fr;
    gap: calc(16 * var(--layout-unit))
  }

  .gateway-photo {
    height: calc(210 * var(--layout-unit))
  }

  .gateway-content {
    min-height: 0;
    padding: calc(14 * var(--layout-unit)) calc(18 * var(--layout-unit)) calc(18 * var(--layout-unit))
  }

  .gateway h2 {
    font-size: calc(24 * var(--layout-unit))
  }

  .gateway li {
    font-size: calc(18 * var(--layout-unit));
    line-height: 1.5
  }

  .partners {
    grid-template-columns: 1fr 1fr;
    gap: calc(12 * var(--layout-unit));
    padding: calc(12 * var(--layout-unit)) 0
  }

  .partner {
    min-height: calc(130 * var(--layout-unit))
  }

  .portal-map {
    height: calc(380 * var(--layout-unit))
  }

  .map-tabs button {
    font-size: calc(13 * var(--layout-unit));
    padding: calc(8 * var(--layout-unit))
  }

  .map-mini {
    width: calc(130 * var(--layout-unit));
    height: calc(76 * var(--layout-unit));
    right: calc(16 * var(--layout-unit))
  }

  .chain-grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(9 * var(--layout-unit))
  }

  .chain {
    min-height: calc(85 * var(--layout-unit))
  }

  .chain b {
    font-size: calc(14 * var(--layout-unit))
  }

  .chain small {
    font-size: calc(13 * var(--layout-unit))
  }

  .projects-layout {
    grid-template-columns: 1fr;
    gap: calc(22 * var(--layout-unit))
  }

  .featured-grid {
    grid-template-columns: 1fr;
    gap: calc(12 * var(--layout-unit))
  }

  .project-card {
    display: grid;
    grid-template-columns: 40% 1fr;
    padding: 0;
    column-gap: calc(5 * var(--layout-unit))
  }

  .project-card>img {
    grid-row: 1/5;
    height: calc(150 * var(--layout-unit))
  }

  .project-card h3 {
    font-size: calc(18 * var(--layout-unit));
    padding: calc(8 * var(--layout-unit)) calc(10 * var(--layout-unit)) 0
  }

  .project-card p {
    font-size: calc(14 * var(--layout-unit));
    margin: calc(2 * var(--layout-unit)) calc(10 * var(--layout-unit))
  }

  .project-prev,
  .project-next {
    display: none
  }

  .project-detail {
    padding: calc(10 * var(--layout-unit))
  }

  .project-tabs button {
    font-size: calc(15 * var(--layout-unit))
  }

  .project-overview dl {
    font-size: calc(15 * var(--layout-unit))
  }

  .project-detail h3 {
    font-size: calc(19 * var(--layout-unit))
  }

  .project-actions a {
    font-size: calc(15 * var(--layout-unit));
    padding: calc(8 * var(--layout-unit))
  }

  .portal-updates {
    grid-template-columns: 1fr;
    gap: calc(20 * var(--layout-unit))
  }

  .investment-news-grid {
    grid-template-columns: 1fr 1fr
  }

  .investment-news-card h3 {
    font-size: calc(16 * var(--layout-unit))
  }

  .investment-news-card img {
    height: calc(125 * var(--layout-unit))
  }

  .news-tabs button {
    font-size: calc(13 * var(--layout-unit))
  }

  .policy-list b {
    font-size: calc(16 * var(--layout-unit))
  }

  .policy-list small {
    font-size: calc(14 * var(--layout-unit))
  }

  .policy-list>a {
    min-height: calc(54 * var(--layout-unit))
  }

  .visitors {
    gap: calc(16 * var(--layout-unit));
    flex-direction: column;
    align-items: flex-start;
    padding: calc(15 * var(--layout-unit)) 0
  }

  .visitor-countries {
    width: 100%
  }

  .visitor-countries>div {
    gap: calc(10 * var(--layout-unit));
    flex-wrap: wrap
  }

  .portal-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(18 * var(--layout-unit));
    padding: calc(18 * var(--layout-unit)) 0
  }

  .footer-address {
    grid-column: 1/-1
  }

  .footer-address {
    font-size: calc(14 * var(--layout-unit))
  }

  .footer-address>div {
    flex-wrap: wrap;
    gap: calc(8 * var(--layout-unit))
  }

  .footer-links {
    font-size: calc(15 * var(--layout-unit))
  }

  .footer-socials {
    grid-column: 1/-1
  }

  .portal-copyright>.portal-container {
    flex-direction: column;
    gap: calc(6 * var(--layout-unit));
    font-size: calc(11 * var(--layout-unit))
  }

  .project-chains h2 {
    margin-top: calc(4 * var(--layout-unit))
  }
}

@media(min-width:761px) and (max-width:1100px) {
  .portal-container {
    width: calc(100% - calc(42 * var(--layout-unit)))
  }

  .portal-header {
    height: calc(67 * var(--layout-unit))
  }

  .header-layout {
    grid-template-columns: calc(205 * var(--layout-unit)) 1fr;
    gap: calc(20 * var(--layout-unit))
  }

  .portal-brand {
    height: calc(63 * var(--layout-unit));
    width: calc(170 * var(--layout-unit))
  }

  .portal-brand img {
    width: calc(86 * var(--layout-unit));
    height: calc(62 * var(--layout-unit))
  }

  .header-utilities {
    gap: calc(15 * var(--layout-unit))
  }

  .portal-languages button {
    font-size: calc(10 * var(--layout-unit));
    padding: 0 calc(6 * var(--layout-unit));
    gap: calc(3 * var(--layout-unit))
  }

  .portal-languages img {
    width: calc(14 * var(--layout-unit));
    height: calc(10 * var(--layout-unit))
  }

  .portal-search {
    width: calc(140 * var(--layout-unit));
    flex-basis: calc(140 * var(--layout-unit));
    height: calc(22 * var(--layout-unit))
  }

  .portal-search input {
    font-size: calc(10 * var(--layout-unit))
  }

  .portal-nav {
    font-size: calc(10 * var(--layout-unit));
    gap: calc(12 * var(--layout-unit))
  }

  .portal-nav a {
    padding: calc(4 * var(--layout-unit)) 0
  }

  .portal-video {
    height: auto;
    aspect-ratio: 845/288
  }

  .portal-video h1 {
    font-size: calc(32 * var(--layout-unit));
    bottom: calc(33 * var(--layout-unit))
  }

  .welcome {
    height: calc(85 * var(--layout-unit));
    margin-bottom: calc(12 * var(--layout-unit))
  }

  .welcome>p {
    font-size: calc(21 * var(--layout-unit))
  }

  .welcome>img {
    width: calc(48 * var(--layout-unit));
    height: calc(48 * var(--layout-unit))
  }

  .gateway-grid {
    gap: calc(22 * var(--layout-unit));
    width: calc(100% - calc(68 * var(--layout-unit)));
    padding-bottom: calc(9 * var(--layout-unit))
  }

  .gateway-photo {
    height: auto;
    aspect-ratio: 260/152
  }

  .gateway-content {
    min-height: calc(139 * var(--layout-unit));
    padding: calc(9 * var(--layout-unit)) calc(15 * var(--layout-unit)) calc(12 * var(--layout-unit))
  }

  .gateway h2 {
    font-size: calc(20 * var(--layout-unit))
  }

  .gateway li {
    font-size: calc(14 * var(--layout-unit));
    line-height: 1.3;
    padding-left: calc(12 * var(--layout-unit))
  }

  .partner-strip {
    border-top-width: calc(6 * var(--layout-unit))
  }

  .partners {
    min-height: calc(118 * var(--layout-unit));
    gap: calc(22 * var(--layout-unit))
  }

  .partner {
    min-height: calc(110 * var(--layout-unit))
  }

  .partner p {
    font-size: calc(13 * var(--layout-unit));
    margin: calc(5 * var(--layout-unit)) 0
  }

  .partner-logo {
    width: calc(145 * var(--layout-unit));
    height: calc(51 * var(--layout-unit))
  }

  .sunworld .partner-logo {
    width: calc(132 * var(--layout-unit));
    height: calc(46 * var(--layout-unit))
  }

  .sunworld b {
    font-size: calc(17 * var(--layout-unit))
  }

  .portal-map {
    height: calc(234 * var(--layout-unit))
  }

  .map-tabs button {
    padding: calc(6 * var(--layout-unit)) calc(9 * var(--layout-unit));
    font-size: calc(11 * var(--layout-unit))
  }

  .map-mini {
    width: calc(150 * var(--layout-unit));
    height: calc(65 * var(--layout-unit));
    right: calc(21 * var(--layout-unit));
    bottom: calc(7 * var(--layout-unit))
  }

  .map-mini span {
    padding: calc(5 * var(--layout-unit)) calc(10 * var(--layout-unit));
    font-size: calc(10 * var(--layout-unit))
  }

  .project-chains {
    width: calc(100% - calc(52 * var(--layout-unit)));
    padding: calc(8 * var(--layout-unit)) 0 calc(11 * var(--layout-unit))
  }

  .project-chains h2,
  .projects-layout h2,
  .portal-updates h2,
  .portal-tools h2 {
    font-size: calc(14 * var(--layout-unit))
  }

  .portal h2 small {
    font-size: calc(10 * var(--layout-unit))
  }

  .chain-grid {
    gap: calc(9 * var(--layout-unit))
  }

  .chain {
    padding: calc(5 * var(--layout-unit)) calc(7 * var(--layout-unit));
    min-height: calc(56 * var(--layout-unit));
    gap: calc(7 * var(--layout-unit));
    font-size: calc(10 * var(--layout-unit))
  }

  .chain b {
    font-size: calc(10 * var(--layout-unit))
  }

  .chain small {
    font-size: calc(9 * var(--layout-unit));
    margin-top: calc(4 * var(--layout-unit))
  }

  .chain>span {
    width: calc(37 * var(--layout-unit));
    height: calc(37 * var(--layout-unit));
    font-size: calc(25 * var(--layout-unit));
    line-height: calc(37 * var(--layout-unit))
  }

  .projects-layout {
    width: calc(100% - calc(52 * var(--layout-unit)));
    gap: calc(40 * var(--layout-unit));
    padding-bottom: calc(22 * var(--layout-unit))
  }

  .featured-grid {
    gap: calc(8 * var(--layout-unit))
  }

  .project-card>img {
    height: calc(90 * var(--layout-unit))
  }

  .project-card h3 {
    font-size: calc(12 * var(--layout-unit));
    padding: calc(4 * var(--layout-unit)) calc(9 * var(--layout-unit))
  }

  .project-card p {
    font-size: calc(10 * var(--layout-unit));
    margin: calc(3 * var(--layout-unit)) calc(9 * var(--layout-unit))
  }

  .project-prev,
  .project-next {
    width: calc(29 * var(--layout-unit));
    height: calc(29 * var(--layout-unit));
    font-size: calc(25 * var(--layout-unit));
    top: calc(70 * var(--layout-unit))
  }

  .project-prev {
    left: calc(-14 * var(--layout-unit))
  }

  .project-next {
    right: calc(-14 * var(--layout-unit))
  }

  .project-tabs button {
    font-size: calc(10 * var(--layout-unit));
    padding: calc(4 * var(--layout-unit)) calc(7 * var(--layout-unit))
  }

  .project-detail h3 {
    font-size: calc(13 * var(--layout-unit));
    margin-bottom: calc(7 * var(--layout-unit))
  }

  .project-overview {
    gap: calc(6 * var(--layout-unit))
  }

  .project-overview img {
    height: calc(87 * var(--layout-unit))
  }

  .project-overview dl {
    font-size: calc(9 * var(--layout-unit))
  }

  .project-overview dl div {
    gap: calc(3 * var(--layout-unit))
  }

  #projectPanel {
    min-height: calc(90 * var(--layout-unit))
  }

  .project-actions {
    gap: calc(8 * var(--layout-unit));
    margin-top: calc(5 * var(--layout-unit))
  }

  .project-actions a {
    font-size: calc(10 * var(--layout-unit));
    padding: calc(4 * var(--layout-unit))
  }

  .project-media {
    height: calc(90 * var(--layout-unit))
  }

  .portal-updates {
    width: calc(100% - calc(52 * var(--layout-unit)));
    gap: calc(21 * var(--layout-unit));
    padding-bottom: calc(10 * var(--layout-unit))
  }

  .portal-section-heading {
    flex-wrap: nowrap;
    gap: calc(12 * var(--layout-unit));
    margin-bottom: calc(8 * var(--layout-unit))
  }

  .portal-section-heading>a {
    font-size: calc(9 * var(--layout-unit))
  }

  .news-tabs {
    order: 0;
    flex-basis: auto
  }

  .news-tabs button {
    font-size: calc(8 * var(--layout-unit));
    padding: calc(5 * var(--layout-unit)) calc(8 * var(--layout-unit))
  }

  .investment-news-grid {
    gap: calc(8 * var(--layout-unit))
  }

  .investment-news-card img {
    height: calc(73 * var(--layout-unit))
  }

  .investment-news-card h3 {
    font-size: calc(10 * var(--layout-unit));
    padding: calc(5 * var(--layout-unit)) calc(7 * var(--layout-unit));
    min-height: calc(38 * var(--layout-unit))
  }

  .investment-news-card time {
    font-size: calc(9 * var(--layout-unit));
    padding: 0 calc(7 * var(--layout-unit))
  }

  .policy-list h2 {
    font-size: calc(14 * var(--layout-unit))
  }

  .policy-list>a {
    padding: calc(2 * var(--layout-unit)) calc(8 * var(--layout-unit));
    min-height: calc(30 * var(--layout-unit));
    gap: calc(8 * var(--layout-unit))
  }

  .policy-list b {
    font-size: calc(10 * var(--layout-unit))
  }

  .policy-list small {
    font-size: calc(9 * var(--layout-unit))
  }

  .policy-icon {
    width: calc(24 * var(--layout-unit));
    height: calc(22 * var(--layout-unit));
    font-size: calc(16 * var(--layout-unit))
  }

  .visitors {
    gap: calc(77 * var(--layout-unit));
    padding: calc(9 * var(--layout-unit)) 0
  }

  .visitor-total b {
    font-size: calc(28 * var(--layout-unit))
  }

  .visitor-total span {
    font-size: calc(15 * var(--layout-unit))
  }

  .visitor-countries>p {
    font-size: calc(11 * var(--layout-unit))
  }

  .visitor-countries>div {
    gap: calc(16 * var(--layout-unit))
  }

  .visitor-countries>div>span {
    font-size: calc(10 * var(--layout-unit));
    gap: calc(8 * var(--layout-unit))
  }

  .visitor-countries img,
  .visitor-countries i {
    width: calc(21 * var(--layout-unit));
    height: calc(21 * var(--layout-unit));
    font-size: calc(15 * var(--layout-unit))
  }

  .portal-footer-grid {
    grid-template-columns: calc(200 * var(--layout-unit)) minmax(0, 1fr) calc(70 * var(--layout-unit)) calc(93 * var(--layout-unit)) calc(107 * var(--layout-unit));
    gap: calc(18 * var(--layout-unit));
    min-height: calc(71 * var(--layout-unit));
    padding: calc(9 * var(--layout-unit)) 0
  }

  .footer-socials {
    grid-column: auto;
    gap: calc(10 * var(--layout-unit))
  }

  .footer-address {
    font-size: calc(9 * var(--layout-unit))
  }

  .footer-address>b {
    font-size: calc(9 * var(--layout-unit))
  }

  .footer-address>div {
    gap: calc(16 * var(--layout-unit))
  }

  .footer-links {
    font-size: calc(10 * var(--layout-unit))
  }

  .footer-socials a {
    width: calc(19 * var(--layout-unit));
    height: calc(19 * var(--layout-unit));
    font-size: calc(13 * var(--layout-unit))
  }

  .footer-socials a:last-child {
    font-size: calc(7 * var(--layout-unit))
  }

  .portal-copyright>.portal-container {
    gap: calc(60 * var(--layout-unit));
    font-size: calc(9 * var(--layout-unit));
    padding: calc(10 * var(--layout-unit)) 0
  }
}

.portal .gateway h2 {
  color: #303743
}

.portal-video h1 {
  font-family: "Roboto Condensed", Arial, sans-serif
}

@media(min-width:761px) and (max-width:1100px) {
  .chain b {
    font-size: calc(9 * var(--layout-unit))
  }

  .chain small {
    font-size: calc(9 * var(--layout-unit));
    white-space: nowrap
  }

  .chain {
    min-height: calc(56 * var(--layout-unit));
    max-height: calc(56 * var(--layout-unit))
  }

  .chain>div {
    min-width: 0
  }

  .project-card h3 {
    font-size: calc(11 * var(--layout-unit));
    padding: calc(4 * var(--layout-unit)) calc(9 * var(--layout-unit));
    min-height: calc(26 * var(--layout-unit))
  }

  .project-card p {
    font-size: calc(10 * var(--layout-unit));
    line-height: 1.15;
    margin: calc(2 * var(--layout-unit)) calc(9 * var(--layout-unit))
  }

  .projects-layout {
    padding-bottom: calc(18 * var(--layout-unit))
  }

  .investment-news-card h3 {
    min-height: calc(36 * var(--layout-unit))
  }
}

@media(max-width:760px) {

  .partner-logo {
    max-width: 100%
  }
}

.visually-hidden,
.portal-video h1.visually-hidden {
  position: absolute;
  width: calc(1 * var(--layout-unit));
  height: calc(1 * var(--layout-unit));
  padding: 0;
  margin: calc(-1 * var(--layout-unit));
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.gateway-photo-link {
  position: absolute;
  inset: 0;
  z-index: 3
}

.investment-chat {
  position: fixed;
  right: calc(24 * var(--layout-unit));
  bottom: calc(24 * var(--layout-unit));
  z-index: 1000;
  font-family: "Be Vietnam Pro", Arial, sans-serif;
  color: #173b62
}

.investment-chat svg {
  width: calc(25 * var(--layout-unit));
  height: calc(25 * var(--layout-unit));
  flex-shrink: 0
}







.chat-panel[hidden] {
  display: none !important
}

.chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(72 * var(--layout-unit));
  width: calc(370 * var(--layout-unit));
  height: calc(540 * var(--layout-unit));
  max-height: calc(100dvh - calc(120 * var(--layout-unit)));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: calc(1 * var(--layout-unit)) solid #dce7f4;
  border-radius: calc(18 * var(--layout-unit));
  box-shadow: 0 calc(16 * var(--layout-unit)) calc(50 * var(--layout-unit)) #002d6533;
  overflow: hidden
}

.chat-header {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--layout-unit));
  background: linear-gradient(120deg, #034490, #086ee5);
  padding: calc(16 * var(--layout-unit)) calc(15 * var(--layout-unit));
  color: #fff;
  flex-shrink: 0
}

.chat-header h2 {
  font-size: calc(14 * var(--layout-unit));
  line-height: 1.4;
  margin: 0;
  color: #fff
}

.chat-header p {
  font-size: calc(10 * var(--layout-unit));
  margin: calc(5 * var(--layout-unit)) 0 0;
  color: #d4e9ff
}

.chat-avatar {
  display: grid;
  place-items: center;
  width: calc(38 * var(--layout-unit));
  height: calc(38 * var(--layout-unit));
  background: #ffffff20;
  border-radius: calc(12 * var(--layout-unit));
  flex-shrink: 0
}

.chat-online {
  display: inline-block;
  width: calc(6 * var(--layout-unit));
  height: calc(6 * var(--layout-unit));
  border-radius: 50%;
  background: #53e9b3;
  margin-right: calc(4 * var(--layout-unit))
}

.chat-close {
  display: grid;
  place-items: center;
  width: calc(34 * var(--layout-unit));
  height: calc(34 * var(--layout-unit));
  margin-left: auto;
  background: #ffffff16;
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: calc(25 * var(--layout-unit));
  cursor: pointer;
  flex-shrink: 0
}

.chat-close:hover {
  background: #ffffff30
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: calc(18 * var(--layout-unit)) calc(14 * var(--layout-unit));
  background: #f5f8fc;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--layout-unit))
}

.chat-message {
  max-width: 94%;
  align-self: flex-start
}

.chat-message--user {
  align-self: flex-end
}

.chat-message-author {
  display: block;
  font-size: calc(9 * var(--layout-unit));
  color: #6b819a;
  margin: 0 calc(4 * var(--layout-unit)) calc(5 * var(--layout-unit))
}

.chat-message--user .chat-message-author {
  text-align: right
}

.chat-bubble {
  background: #fff;
  border: calc(1 * var(--layout-unit)) solid #e2eaf4;
  border-radius: calc(2 * var(--layout-unit)) calc(13 * var(--layout-unit)) calc(13 * var(--layout-unit));
  padding: calc(11 * var(--layout-unit)) calc(12 * var(--layout-unit));
  font-size: calc(12 * var(--layout-unit));
  line-height: 1.7
}

.chat-bubble p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

.chat-message--user .chat-bubble {
  background: #0866dd;
  color: #fff;
  border-color: #0866dd;
  border-radius: calc(13 * var(--layout-unit)) calc(2 * var(--layout-unit)) calc(13 * var(--layout-unit)) calc(13 * var(--layout-unit))
}

.chat-article-links {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--layout-unit));
  margin-top: calc(10 * var(--layout-unit));
  padding-top: calc(9 * var(--layout-unit));
  border-top: calc(1 * var(--layout-unit)) solid #e1ebf7
}

.chat-article-links a {
  font-size: calc(11 * var(--layout-unit));
  color: #0862cd;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none
}

.chat-article-links a:hover {
  text-decoration: underline
}

.chat-typing .chat-bubble {
  color: #74879e;
  font-style: italic
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--layout-unit));
  padding: calc(11 * var(--layout-unit)) calc(12 * var(--layout-unit)) calc(4 * var(--layout-unit));
  border-top: calc(1 * var(--layout-unit)) solid #e2eaf4
}

.chat-suggestions button {
  border: calc(1 * var(--layout-unit)) solid #cbdff5;
  background: #f3f8ff;
  color: #16599f;
  border-radius: calc(14 * var(--layout-unit));
  padding: calc(5 * var(--layout-unit)) calc(8 * var(--layout-unit));
  font-family: inherit;
  font-size: calc(10 * var(--layout-unit));
  cursor: pointer
}

.chat-suggestions button:hover {
  background: #e5f0ff
}

.chat-form {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--layout-unit));
  padding: calc(10 * var(--layout-unit)) calc(12 * var(--layout-unit)) calc(4 * var(--layout-unit))
}

.chat-form input {
  width: 100%;
  min-width: 0;
  border: calc(1 * var(--layout-unit)) solid #d3dfed;
  border-radius: calc(10 * var(--layout-unit));
  padding: calc(10 * var(--layout-unit)) calc(11 * var(--layout-unit));
  min-height: calc(42 * var(--layout-unit));
  font-family: inherit;
  font-size: calc(12 * var(--layout-unit));
  background: #fff;
  color: #173b62
}

.chat-form button {
  display: grid;
  place-items: center;
  width: calc(42 * var(--layout-unit));
  height: calc(42 * var(--layout-unit));
  flex-shrink: 0;
  border: 0;
  border-radius: calc(10 * var(--layout-unit));
  background: #0866dd;
  color: #fff;
  cursor: pointer
}

.chat-footnote {
  margin: 0;
  padding: calc(6 * var(--layout-unit)) calc(12 * var(--layout-unit)) calc(11 * var(--layout-unit));
  color: #8190a4;
  font-size: calc(9 * var(--layout-unit));
  text-align: center
}

.investment-chat button:focus-visible,
.investment-chat a:focus-visible,
.investment-chat input:focus-visible {
  outline: calc(2 * var(--layout-unit)) solid #00a5ef;
  outline-offset: calc(3 * var(--layout-unit))
}

.investment-chat button:disabled {
  opacity: .55;
  cursor: wait
}

@media(max-width:760px) {
  .investment-chat {
    right: calc(16 * var(--layout-unit));
    bottom: calc(16 * var(--layout-unit))
  }

  .chat-panel {
    width: min(calc(370 * var(--layout-unit)), calc(100vw - calc(32 * var(--layout-unit))));
    bottom: calc(66 * var(--layout-unit));
    height: calc(540 * var(--layout-unit));
    max-height: calc(100dvh - calc(102 * var(--layout-unit)))
  }



  .chat-bubble {
    font-size: calc(14 * var(--layout-unit))
  }

  .chat-form input {
    font-size: calc(16 * var(--layout-unit))
  }

  .chat-form button {
    width: calc(44 * var(--layout-unit));
    height: calc(44 * var(--layout-unit))
  }

  .chat-suggestions button {
    font-size: calc(11 * var(--layout-unit));
    padding: calc(7 * var(--layout-unit)) calc(9 * var(--layout-unit))
  }

  .chat-header h2 {
    font-size: calc(14 * var(--layout-unit))
  }

  .chat-close {
    min-width: calc(40 * var(--layout-unit));
    min-height: calc(40 * var(--layout-unit))
  }
}

.article-read-time {
  color: #718198;
  font-size: calc(11 * var(--layout-unit))
}

.article-toc {
  padding: calc(20 * var(--layout-unit)) calc(24 * var(--layout-unit));
  background: #f1f6fd;
  border-left: calc(3 * var(--layout-unit)) solid #1268ce;
  margin-bottom: calc(30 * var(--layout-unit))
}

.article-toc h2 {
  font-size: calc(17 * var(--layout-unit));
  color: #0a4eb7;
  margin: 0 0 calc(12 * var(--layout-unit))
}

.article-toc ol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(9 * var(--layout-unit)) calc(24 * var(--layout-unit));
  padding-left: calc(18 * var(--layout-unit));
  margin: 0;
  font-size: calc(12 * var(--layout-unit));
  color: #315680
}

.article-toc a:hover {
  color: #0863ea;
  text-decoration: underline
}

.article-section {
  scroll-margin-top: calc(24 * var(--layout-unit));
  margin: 0 0 calc(26 * var(--layout-unit))
}

.article-section h2,
.article-collection h2,
.article-sources h2 {
  margin: 0 0 calc(12 * var(--layout-unit));
  color: #0a4eb7;
  font-size: calc(20 * var(--layout-unit));
  line-height: 1.4
}

.article-section p {
  font-size: calc(14 * var(--layout-unit));
  line-height: 1.85
}

.article-section ul {
  margin: calc(14 * var(--layout-unit)) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: calc(8 * var(--layout-unit))
}

.article-section li {
  position: relative;
  background: #f8fafd;
  padding: calc(9 * var(--layout-unit)) calc(14 * var(--layout-unit)) calc(9 * var(--layout-unit)) calc(32 * var(--layout-unit));
  border-left: calc(2 * var(--layout-unit)) solid #d5e7fc;
  font-size: calc(13 * var(--layout-unit));
  line-height: 1.65
}

.article-section li:before {
  content: '✓';
  position: absolute;
  left: calc(12 * var(--layout-unit));
  color: #0764da;
  font-weight: 700
}

.article-sources {
  padding: calc(20 * var(--layout-unit)) calc(24 * var(--layout-unit));
  background: #f6f9fd;
  border-top: calc(1 * var(--layout-unit)) solid #dce6f3
}

.article-sources h2 {
  font-size: calc(16 * var(--layout-unit))
}

.article-sources ul {
  margin: 0;
  padding-left: calc(18 * var(--layout-unit));
  font-size: calc(12 * var(--layout-unit))
}

.article-sources a {
  color: #0a61c8;
  text-decoration: underline
}

.article-collection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(16 * var(--layout-unit));
  margin: calc(16 * var(--layout-unit)) 0 calc(26 * var(--layout-unit))
}

.article-collection-card {
  overflow: hidden;
  border: calc(1 * var(--layout-unit)) solid #dce6f0;
  background: #fff;
  border-radius: calc(8 * var(--layout-unit))
}

.article-collection-card img {
  width: 100%;
  height: calc(140 * var(--layout-unit));
  object-fit: cover
}

.article-collection-card h3 {
  font-size: calc(15 * var(--layout-unit));
  color: #0a4eb7;
  margin: calc(14 * var(--layout-unit)) calc(16 * var(--layout-unit)) calc(8 * var(--layout-unit));
  line-height: 1.4
}

.article-collection-card p {
  font-size: calc(12 * var(--layout-unit));
  line-height: 1.6;
  margin: 0 calc(16 * var(--layout-unit)) calc(16 * var(--layout-unit))
}

.detail-shared-header {
  border-bottom: calc(1 * var(--layout-unit)) solid #e1eaf4
}

.detail-page .detail-page-shell {
  padding-top: calc(16 * var(--layout-unit))
}

.detail-page-shell>.detail-page-back,
.detail-page-shell>.detail-breadcrumb {
  display: none
}

.detail-page-shell>.detail-article,
.detail-page-shell>.detail-sidebar {
  grid-row: 1
}

.detail-page-footer.portal .portal-footer-grid {
  max-width: calc(1200 * var(--layout-unit))
}

@media(max-width:760px) {
  .article-toc ol {
    grid-template-columns: 1fr;
    font-size: calc(14 * var(--layout-unit))
  }

  .article-section p,
  .article-section li {
    font-size: calc(16 * var(--layout-unit))
  }

  .article-section h2 {
    font-size: calc(21 * var(--layout-unit))
  }

  .article-toc {
    padding: calc(16 * var(--layout-unit))
  }

  .article-collection-grid {
    grid-template-columns: 1fr
  }

  .article-collection-card h3 {
    font-size: calc(18 * var(--layout-unit))
  }

  .article-collection-card p {
    font-size: calc(16 * var(--layout-unit))
  }

  .article-read-time {
    font-size: calc(12 * var(--layout-unit))
  }

  .article-sources ul {
    font-size: calc(14 * var(--layout-unit))
  }
}

@media(min-width:761px) and (max-width:1100px) {
}

@media(max-width:760px) {
}


.portal .portal-container,
.detail-shared-header .portal-container,
.detail-page-footer.portal .portal-container,
.detail-page .detail-page-shell.container {
  width: 80%;
  max-width: none;
  margin-inline: auto;
}

.portal .portal-video {
  width: 100%;
  max-width: none;
  margin: 0;
  height: clamp(calc(280 * var(--layout-unit)), 32vw, calc(620 * var(--layout-unit)));
  aspect-ratio: auto;
}

.portal .portal-map {
  width: 80%;
  max-width: none;
  margin-inline: auto
}

.portal .gateway-photo {
  height: auto;
  aspect-ratio: 260/152
}

.portal-nav {
  min-width: 0;
  overflow-x: auto
}

.article-section p {
  max-width: 78ch
}

.portal-section-heading {
  flex-wrap: wrap
}

.portal-section-heading .news-tabs {
  order: 3;
  flex-basis: 100%
}

.portal-footer-grid {
  grid-template-columns: calc(230 * var(--layout-unit)) minmax(0, 1fr) calc(100 * var(--layout-unit)) calc(130 * var(--layout-unit)) calc(140 * var(--layout-unit))
}

@media(min-width:761px) and (max-width:1100px) {
  .portal-footer-grid {
    grid-template-columns: calc(150 * var(--layout-unit)) minmax(0, 1fr) calc(70 * var(--layout-unit)) calc(90 * var(--layout-unit));
    gap: calc(12 * var(--layout-unit))
  }

  .portal-footer-grid .footer-socials {
    grid-column: 4
  }

  .footer-address>div {
    flex-wrap: wrap;
    gap: calc(6 * var(--layout-unit))
  }

  .projects-layout {
    grid-template-columns: 1.65fr 1fr;
    gap: calc(24 * var(--layout-unit))
  }

  .portal-updates {
    grid-template-columns: 2fr 1fr
  }

  .portal .chain {
    max-height: none;
    min-height: calc(68 * var(--layout-unit))
  }

  .chain small {
    white-space: normal
  }

  .header-layout {
    grid-template-columns: calc(150 * var(--layout-unit)) minmax(0, 1fr);
    gap: calc(15 * var(--layout-unit))
  }

  .portal-brand {
    width: calc(140 * var(--layout-unit))
  }

  .header-utilities {
    flex-wrap: wrap;
    gap: calc(4 * var(--layout-unit))
  }

  .portal-search {
    flex-basis: calc(140 * var(--layout-unit))
  }
}

@media(max-width:760px) {

  .portal .portal-container,
  .detail-shared-header .portal-container,
  .detail-page-footer.portal .portal-container,
  .detail-page .detail-page-shell.container {
    width: calc(100% - calc(32 * var(--layout-unit)))
  }

  .portal .portal-video {
    width: 100%;
    height: clamp(calc(220 * var(--layout-unit)), 60vw, calc(360 * var(--layout-unit)))
  }

  .portal .portal-map {
    width: calc(100% - calc(32 * var(--layout-unit)))
  }

  .portal-footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

.portal-tools {
  padding: calc(5 * var(--layout-unit)) 0 calc(32 * var(--layout-unit))
}

.portal-tools h2 {
  margin-bottom: calc(10 * var(--layout-unit));
  text-wrap: balance
}

.portal-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(24 * var(--layout-unit))
}

.portal-tool {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #003e881a;
  border-radius: calc(8 * var(--layout-unit));
  background: #fff
}

.portal-tool header {
  padding: calc(18 * var(--layout-unit)) calc(18 * var(--layout-unit)) 0
}

.portal-tool h3 {
  font-size: calc(21 * var(--layout-unit));
  font-weight: 600;
  text-wrap: balance
}

.portal-tool p {
  margin-top: calc(5 * var(--layout-unit));
  font-size: calc(15 * var(--layout-unit));
  color: #536686;
  text-wrap: pretty
}

.portal-tool img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: contain
}

.portal-tool a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--layout-unit));
  min-height: 48px;
  margin: auto calc(18 * var(--layout-unit)) calc(18 * var(--layout-unit));
  padding: calc(10 * var(--layout-unit));
  border-radius: calc(4 * var(--layout-unit));
  background: #0062db;
  color: #fff;
  font-size: calc(16 * var(--layout-unit));
  font-weight: 600;
  text-align: center
}

.portal-tool a:hover {
  background: #0050ae;
  color: #fff
}

@media(max-width:1100px) {
  .portal-tools-grid {
    gap: 16px
  }

  .portal-tool header {
    padding: 16px 12px 0;
    min-height: 110px
  }

  .portal-tool h3 {
    font-size: 20px
  }

  .portal-tool p {
    font-size: 16px
  }

  .portal-tool a {
    margin-inline: 12px;
    font-size: 16px
  }
}

@media(max-width:760px) {
  .portal-tools-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px
  }

  .portal-tool header {
    min-height: 0;
    padding: 18px 18px 0
  }

  .portal-tool a {
    margin: 0 18px 18px
  }
}


.planning-depth {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin: 28px 0;
  background: #f7f9fc;
  border-radius: 12px;
  padding: 20px
}

.planning-depth[hidden] {
  display: none
}

.planning-depth-stage {
  height: clamp(320px, 28vw, 560px);
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y
}

.planning-depth-stage>div {
  pointer-events: none
}

.planning-depth-layer {
  width: 640px;
  height: 400px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 28px 45px #103d6230;
  backface-visibility: hidden
}

.planning-depth-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none
}

.planning-depth-layer.is-selected {
  outline: 4px solid #0062db;
  outline-offset: 3px
}

.planning-depth-controls {
  display: grid;
  gap: 14px;
  min-width: 0
}

.detail-article .planning-depth-controls h2 {
  font-size: clamp(18px, 1.1vw, 26px);
  margin: 0 0 4px;
  color: #003e88
}

.planning-depth-choice {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 94px;
  padding: 18px;
  text-align: left;
  font: inherit;
  color: #24405f;
  background: #fff;
  border: 1px solid #003e881a;
  border-radius: 12px;
  box-shadow: 0 6px 18px #103d620a;
  cursor: pointer
}

.planning-depth-number {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #e7f2ff;
  color: #0062db;
  font-weight: 700
}

.planning-depth-choice>span:last-child {
  display: grid;
  gap: 6px;
  min-width: 0
}

.planning-depth-choice strong {
  font-size: clamp(17px, 1.1vw, 24px);
  line-height: 1.3
}

.planning-depth-choice>span>span {
  font-size: 16px;
  line-height: 1.5;
  color: #536686
}

.planning-depth-choice:hover,
.planning-depth-choice[aria-pressed=true] {
  border-color: #0062db;
  background: #edf5ff
}

.planning-depth-choice:disabled {
  cursor: default;
  opacity: .65
}

.planning-depth-reset {
  justify-self: start;
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  color: #0062db;
  background: #fff;
  border: 1px solid #bcd3ed;
  border-radius: 6px;
  cursor: pointer
}

.planning-depth button:focus-visible {
  outline: 3px solid #0062db;
  outline-offset: 3px
}

.detail-article .planning-depth-status,
.detail-article .planning-depth-note {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: #536686
}

.planning-depth:not(.is-ready) {
  grid-template-columns: 1fr
}

.planning-depth:not(.is-ready) .planning-depth-stage {
  display: none
}

@media(max-width:1100px) {
  .planning-depth {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
    gap: 16px
  }

  .planning-depth-stage {
    height: 360px
  }

  .planning-depth-choice {
    min-height: 80px;
    padding: 14px
  }
}

@media(max-width:480px) {
  .planning-depth-stage {
    height: 280px
  }

  .planning-depth {
    margin-inline: -8px;
    padding: 12px
  }
}

@media print {
  .planning-depth {
    display: none !important
  }

  .detail-article:has(.planning-depth.is-ready) #detailFigure {
    display: block !important
  }
}


#homePage .projects-layout,
#homePage .portal-updates {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: calc(24 * var(--layout-unit));
}

.policy-list .portal-section-heading h2 {
  white-space: normal;
  min-width: 0;
  flex: 1
}

@media(max-width:760px) {

  #homePage .projects-layout,
  #homePage .portal-updates {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(20 * var(--layout-unit))
  }
}

/* Logo ở góc trái header (vị trí gốc); cột logo ôm vừa logo */
.header-layout {
  grid-template-columns: auto minmax(0, 1fr)
}

.portal-brand {
  width: auto;
  justify-self: start;
  justify-content: flex-start
}

/* Nhóm chọn ngôn ngữ nằm giữa header; ô tìm kiếm giữ bên phải */
.portal-languages button:first-child {
  padding-left: calc(9 * var(--layout-unit))
}

.portal-languages button:last-child {
  border-right: 0
}

@media(min-width:761px) {
  .header-utilities {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center
  }

  .header-utilities .portal-languages {
    grid-column: 2;
    justify-content: center
  }

  .header-utilities .portal-search {
    grid-column: 3;
    justify-self: end
  }
}

@media(max-width:760px) {
  .portal-languages {
    justify-content: center
  }
}

/* Click video -> ẩn video, hiện bản đồ ngay vị trí video */
.portal-video[hidden],
.portal-map[hidden] {
  display: none !important
}

.portal-video video {
  cursor: pointer
}

.portal .portal-map {
  width: 100%;
  max-width: none;
  margin: 0;
  height: clamp(calc(280 * var(--layout-unit)), 32vw, calc(620 * var(--layout-unit)))
}

@media(max-width:760px) {
  .portal .portal-map {
    width: 100%;
    height: clamp(calc(220 * var(--layout-unit)), 60vw, calc(360 * var(--layout-unit)))
  }
}

/* Thanh nút dưới video: Thích / Không thích / Lặp lại / Tải lên */
.video-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(10 * var(--layout-unit));
  padding: calc(12 * var(--layout-unit)) 0
}

.video-actions[hidden] {
  display: none !important
}

.video-actions-reactions {
  display: flex;
  gap: calc(10 * var(--layout-unit))
}

.video-action {
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--layout-unit));
  border: calc(1 * var(--layout-unit)) solid #dae0e9;
  background: #f6f8fc;
  color: #252a36;
  border-radius: calc(20 * var(--layout-unit));
  padding: calc(7 * var(--layout-unit)) calc(14 * var(--layout-unit));
  font: inherit;
  font-size: calc(13 * var(--layout-unit));
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s
}

.video-action:hover {
  background: #eaf3fe;
  border-color: #b9d4f5
}

.video-action:focus-visible {
  outline: calc(2 * var(--layout-unit)) solid #0068ef;
  outline-offset: calc(2 * var(--layout-unit))
}

.video-action[aria-pressed="true"] {
  background: #0068ef;
  border-color: #0068ef;
  color: #fff
}

.video-action-icon {
  width: calc(18 * var(--layout-unit));
  height: calc(18 * var(--layout-unit));
  flex: none
}

.video-action-icon.is-flipped {
  transform: rotate(180deg)
}

.video-action b {
  font-weight: 600;
  min-width: 1ch
}

.video-actions-note {
  font-size: calc(12 * var(--layout-unit));
  color: #5b6372;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

@media(max-width:760px) {
  .video-action {
    padding: calc(7 * var(--layout-unit)) calc(11 * var(--layout-unit));
    font-size: calc(12 * var(--layout-unit))
  }

  .video-actions-note {
    flex-basis: 100%
  }
}

/* Nút chỉ có biểu tượng */
.video-action {
  padding: calc(9 * var(--layout-unit)) calc(14 * var(--layout-unit))
}

/* Thanh biểu tượng dạng đường viền, không nền (giống mẫu) */
.video-actions {
  gap: calc(4 * var(--layout-unit))
}

.video-action {
  background: none;
  border: 0;
  border-radius: calc(8 * var(--layout-unit));
  color: #3c4250;
  padding: calc(8 * var(--layout-unit)) calc(11 * var(--layout-unit))
}

.video-action:hover {
  background: #eef1f5;
  border-color: transparent;
  color: #0a0d14
}

.video-action-icon {
  width: calc(20 * var(--layout-unit));
  height: calc(20 * var(--layout-unit))
}

/* Ẩn thanh tìm kiếm trên cùng (giữ nguyên trong HTML để portal.js không bị lỗi) */
.portal-search {
  display: none !important
}

/* Nhóm chọn ngôn ngữ: căn giữa theo cả chiều ngang và chiều dọc của header (desktop/tablet) */
@media(min-width:761px) {
  .header-layout {
    position: relative
  }

  .header-layout .portal-languages {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: calc(100% - 220 * var(--layout-unit));
    justify-content: center;
    flex-wrap: wrap
  }

  .header-layout .portal-nav:not(.open) {
    display: none
  }
}

/* Mobile: menu đang trống nên đặt nhóm ngôn ngữ giữa chiều dọc header */
@media(max-width:760px) {
  .header-right {
    justify-content: center
  }
}

/* Chatbot gắn cố định vào dải "welcome" (thay cho dòng chữ cũ); popup giữ nguyên vị trí góc phải dưới */
.welcome .investment-chat {
  position: absolute;
  inset: 0;
  right: 0;
  bottom: 0;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none
}

.welcome .chat-panel {
  pointer-events: auto
}

.welcome .chat-panel {
  position: fixed;
  right: calc(24 * var(--layout-unit));
  bottom: calc(96 * var(--layout-unit));
  z-index: 1000
}

@media(max-width:760px) {
  .welcome .chat-panel {
    right: calc(16 * var(--layout-unit));
    bottom: calc(82 * var(--layout-unit))
  }
}

/* Footer: chỉ còn 2 khối (thương hiệu + địa chỉ) nên căn lại, không để chữ bị đè lên nhau */
@media(min-width:761px) {
  .portal-footer-grid {
    grid-template-columns: auto fit-content(calc(620 * var(--layout-unit)));
    justify-content: center;
    column-gap: calc(56 * var(--layout-unit));
    align-items: center
  }

  .footer-address {
    text-align: left
  }
}

@media(max-width:760px) {
}

/* Phóng to logo ở header (góc phải) cho rõ hơn */
.portal-header {
  height: calc(115 * var(--layout-unit))
}

.portal-brand {
  height: auto
}

.portal-brand img {
  width: calc(142 * var(--layout-unit));
  height: calc(106 * var(--layout-unit))
}

@media(min-width:761px) and (max-width:1100px) {
  .portal-header {
    height: calc(84 * var(--layout-unit))
  }

  .portal-brand img {
    width: calc(108 * var(--layout-unit));
    height: calc(78 * var(--layout-unit))
  }
}

@media(max-width:760px) {
  .portal-header {
    height: auto
  }

  .header-layout {
    min-height: calc(104 * var(--layout-unit))
  }

  .portal-brand img {
    width: calc(110 * var(--layout-unit));
    height: calc(92 * var(--layout-unit))
  }
}

/* Nút gợi ý nhỏ trên video: bấm vào video để xem bản đồ */
.video-map-hint {
  position: absolute;
  left: calc(16 * var(--layout-unit));
  bottom: calc(16 * var(--layout-unit));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--layout-unit));
  padding: calc(7 * var(--layout-unit)) calc(12 * var(--layout-unit));
  border: calc(1 * var(--layout-unit)) solid #ffffff80;
  border-radius: calc(20 * var(--layout-unit));
  background: #0a1e3c99;
  color: #fff;
  font: inherit;
  font-size: calc(12 * var(--layout-unit));
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background .15s
}

.video-map-hint:hover {
  background: #0a1e3ccc
}

.video-map-hint:focus-visible {
  outline: calc(2 * var(--layout-unit)) solid #fff;
  outline-offset: calc(2 * var(--layout-unit))
}

.video-map-hint svg {
  width: calc(16 * var(--layout-unit));
  height: calc(16 * var(--layout-unit));
  flex: none
}