:root {
  --hv-ink: #312e2a;
  --hv-deep: #101514;
  --hv-green: #204b43;
  --hv-green-2: #153932;
  --hv-jade: #6e9e8d;
  --hv-gold: #b48300;
  --hv-gold-2: #d7ae55;
  --hv-copper: #9a6841;
  --hv-paper: #f5efe8;
  --hv-paper-2: #ebe1d5;
  --hv-line: #d6c9bb;
  --hv-muted: #786f67;
  --hv-white: #fffdf8;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--hv-ink);
  background: var(--hv-paper);
  font-family: "Segoe UI", Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.hv-site {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 44%, rgba(180, 131, 66, .08), transparent 25%),
    linear-gradient(180deg, #f7f1e9, #eee5dc);
}

/* Header */
.hv-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  height: 60px;
  color: #f7eddb;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  background: rgba(14, 19, 18, .93);
  box-shadow: 0 7px 24px rgba(0, 0, 0, .18);
}

.hv-header__inner {
  width: min(1176px, calc(100% - 40px));
  height: 60px;
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  align-items: center;
  gap: 22px;
  margin: 0 auto;
}

.hv-brand,
.hv-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.hv-brand__mark {
  position: relative;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  flex: 0 0 39px;
  color: #f3d18b;
  border: 1px solid rgba(220, 182, 105, .65);
  background:
    linear-gradient(45deg, transparent 46%, rgba(230, 194, 124, .25) 48%, transparent 50%),
    #17352f;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.hv-brand__mark::after {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(235, 209, 158, .18);
  content: "";
}

.hv-brand__mark {
  line-height: 1;
}

.hv-brand strong,
.hv-brand small,
.hv-footer__brand strong,
.hv-footer__brand small {
  display: block;
}

.hv-brand strong {
  color: #f6ead4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  letter-spacing: .14em;
}

.hv-brand small {
  max-width: 170px;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(242, 231, 210, .52);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hv-nav {
  height: 60px;
  display: flex;
  justify-content: center;
  gap: 37px;
}

.hv-nav a {
  position: relative;
  height: 60px;
  display: inline-flex;
  align-items: center;
  color: rgba(252, 243, 208, .8);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 650;
}

.hv-nav a::after {
  position: absolute;
  inset: auto 50% 0;
  width: 0;
  height: 3px;
  background: var(--hv-gold-2);
  content: "";
  transition: width .2s ease, inset .2s ease;
}

.hv-nav a:hover,
.hv-nav a[aria-current="page"] {
  color: #e3bb65;
}

.hv-nav a:hover::after,
.hv-nav a[aria-current="page"]::after {
  right: auto;
  left: 0;
  width: 100%;
}

.hv-header__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

.hv-header__account {
  color: rgba(249, 237, 214, .78);
  font-size: 11px;
  font-weight: 700;
}

.hv-header__account:hover {
  color: #efc775;
}

.hv-header__play,
.hv-button,
.hv-button--ghost {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 21px;
  border: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  transition: transform .2s ease, filter .2s ease, background-color .2s ease;
}

.hv-header__play,
.hv-button {
  color: #251e14;
  background: linear-gradient(135deg, #efd18c, #b9872f);
  box-shadow: 0 8px 20px rgba(172, 121, 43, .2);
}

.hv-button--ghost {
  color: #f4e4c5;
  border: 1px solid rgba(238, 208, 151, .32);
  background: rgba(8, 29, 26, .38);
  backdrop-filter: blur(8px);
}

.hv-header__play:hover,
.hv-button:hover,
.hv-button--ghost:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.hv-mobile-menu {
  display: none;
  position: relative;
}

.hv-mobile-menu summary {
  width: 38px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #efd39c;
  border: 1px solid rgba(240, 215, 164, .27);
  cursor: pointer;
  list-style: none;
  font-size: 18px;
}

.hv-mobile-menu summary::-webkit-details-marker {
  display: none;
}

.hv-mobile-menu nav {
  position: absolute;
  top: 47px;
  right: 0;
  width: 230px;
  padding: 8px;
  border: 1px solid rgba(225, 190, 126, .22);
  background: rgba(12, 20, 19, .98);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
}

.hv-mobile-menu nav a {
  display: block;
  padding: 13px 14px;
  color: #eee2cd;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: 12px;
}

.hv-mobile-menu nav a:last-child {
  border-bottom: 0;
}

/* Homepage hero */
.hv-hero {
  position: relative;
  min-height: 900px;
  overflow: hidden;
  color: #fff;
  background: #0b1716 url("/assets/home-v2/hero-tienkiem-v2.webp") center top / cover no-repeat;
}

.hv-hero::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 12, 12, .18) 15%, rgba(8, 16, 15, .03) 48%, rgba(7, 15, 14, .52) 69%, rgba(7, 13, 13, .93) 100%),
    linear-gradient(90deg, rgba(6, 15, 15, .4), transparent 28%, transparent 72%, rgba(6, 15, 15, .38));
  content: "";
}

.hv-hero::after {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 240px;
  background:
    linear-gradient(90deg, transparent, rgba(211, 171, 91, .15), transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(5, 13, 13, .6));
  content: "";
}

.hv-hero__mist {
  position: absolute;
  z-index: 2;
  width: 610px;
  height: 160px;
  border-radius: 50%;
  background: rgba(239, 233, 218, .12);
  filter: blur(40px);
  pointer-events: none;
}

.hv-hero__mist--one {
  left: -160px;
  bottom: 215px;
}

.hv-hero__mist--two {
  right: -170px;
  bottom: 310px;
}

.hv-hero__content {
  position: relative;
  z-index: 4;
  width: min(900px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: 137px;
  text-align: center;
}

.hv-eyebrow {
  margin: 0 0 12px;
  color: #caa85e;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hv-hero h1 {
  margin: 0;
  color: #654332;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(58px, 7.2vw, 88px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.055em;
  text-shadow:
    0 1px 0 rgba(255, 250, 229, .8),
    0 9px 28px rgba(69, 44, 27, .24);
}

.hv-hero .hv-eyebrow {
  color: #855b2c;
  text-shadow: 0 1px 0 rgba(255, 250, 229, .72);
}

.hv-hero__intro {
  max-width: 510px;
  margin: 20px auto 0;
  color: rgba(57, 58, 50, .76);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.75;
  text-shadow: 0 1px 0 rgba(255, 253, 240, .72);
}

.hv-hero__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.hv-hero__sigil {
  width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
  margin: 42px auto 0;
  color: #efce8c;
  border: 1px solid rgba(231, 199, 137, .42);
  border-radius: 50%;
  background: rgba(12, 28, 26, .46);
  box-shadow:
    0 0 0 9px rgba(10, 27, 25, .23),
    inset 0 0 0 6px rgba(234, 206, 151, .05);
  backdrop-filter: blur(5px);
}

.hv-hero__sigil::before,
.hv-hero__sigil::after {
  position: absolute;
  width: 62px;
  height: 1px;
  background: rgba(231, 199, 137, .38);
  content: "";
}

.hv-hero__sigil::before {
  transform: rotate(45deg);
}

.hv-hero__sigil::after {
  transform: rotate(-45deg);
}

.hv-hero__sigil span,
.hv-hero__sigil small {
  position: absolute;
  z-index: 1;
}

.hv-hero__sigil span {
  margin-top: -15px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 700;
}

.hv-hero__sigil small {
  margin-top: 34px;
  color: rgba(246, 231, 201, .55);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hv-hero__actionbar {
  position: absolute;
  z-index: 8;
  right: 50%;
  bottom: 30px;
  width: min(1176px, calc(100% - 40px));
  min-height: 176px;
  display: grid;
  grid-template-columns: 1.28fr .88fr .96fr;
  border: 1px solid rgba(224, 190, 125, .24);
  background: rgba(7, 18, 17, .89);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .36);
  transform: translateX(50%);
  backdrop-filter: blur(15px);
}

.hv-server {
  min-width: 0;
  padding: 22px 25px;
  border-right: 1px solid rgba(255, 255, 255, .09);
}

.hv-server__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.hv-server__head span,
.hv-server__head small,
.hv-server__head strong {
  display: block;
}

.hv-server__head small {
  margin-bottom: 4px;
  color: rgba(238, 228, 208, .46);
  font-size: 8px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hv-server__head strong {
  color: #f0dba9;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 500;
}

.hv-server__head > a {
  color: #c8a75e;
  font-size: 9px;
  font-weight: 800;
}

.hv-server__rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hv-server__row {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-content: center;
  gap: 2px 9px;
  padding: 0 11px;
  border-right: 1px solid rgba(255, 255, 255, .07);
}

.hv-server__row:first-child {
  padding-left: 0;
}

.hv-server__row:last-child {
  border-right: 0;
}

.hv-server__dot {
  grid-row: span 2;
  width: 6px;
  height: 6px;
  align-self: center;
  border-radius: 50%;
  background: #75cc9a;
  box-shadow: 0 0 0 4px rgba(117, 204, 154, .09);
}

.hv-server__row strong {
  overflow: hidden;
  color: rgba(248, 240, 224, .84);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hv-server__row small {
  color: rgba(235, 226, 208, .4);
  font-size: 7px;
}

.hv-quick {
  display: flex;
  align-items: stretch;
  border-right: 1px solid rgba(255, 255, 255, .09);
}

.hv-quick__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.hv-quick__item {
  display: grid;
  place-content: center;
  gap: 9px;
  padding: 18px 8px;
  color: #efe2ca;
  border-right: 1px solid rgba(255, 255, 255, .075);
  text-align: center;
  transition: background-color .2s ease;
}

.hv-quick__item:last-child {
  border-right: 0;
}

.hv-quick__item:hover {
  background: rgba(180, 131, 0, .13);
}

.hv-quick__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  color: #ddbb70;
  border: 1px solid rgba(222, 186, 112, .35);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  font-size: 8px;
  font-weight: 850;
}

.hv-quick__item > span:last-child,
.hv-quick__item strong,
.hv-quick__item small {
  display: block;
}

.hv-quick__item strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
}

.hv-quick__item small {
  margin-top: 3px;
  color: rgba(236, 226, 207, .42);
  font-size: 7px;
}

.hv-login-card {
  display: grid;
  grid-template-columns: 1fr 110px;
  align-items: center;
  gap: 15px;
  padding: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(211, 173, 94, .15), transparent 35%),
    rgba(26, 74, 64, .5);
}

.hv-login-card small,
.hv-login-card strong {
  display: block;
}

.hv-login-card small {
  color: rgba(238, 223, 194, .47);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hv-login-card strong {
  margin-top: 6px;
  color: #f2dfb8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 500;
}

.hv-login-card p {
  margin: 8px 0 0;
  color: rgba(238, 232, 219, .5);
  font-size: 8px;
  line-height: 1.55;
}

.hv-login-card__actions {
  display: grid;
  gap: 7px;
}

.hv-login-card__actions a {
  min-height: 41px;
  display: grid;
  place-items: center;
  color: #1d261f;
  background: linear-gradient(135deg, #ebcd8b, #b88635);
  font-size: 9px;
  font-weight: 850;
}

.hv-login-card__actions a:last-child {
  color: #efe4d1;
  border: 1px solid rgba(235, 214, 177, .21);
  background: rgba(8, 27, 24, .38);
}

/* News */
.hv-section {
  width: min(1176px, calc(100% - 40px));
  margin: 0 auto;
}

.hv-news {
  padding: 104px 0 120px;
}

.hv-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 31px;
}

.hv-section__head h2,
.hv-world h2 {
  margin: 0;
  color: #292b29;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.hv-tabs {
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid #ddcfc0;
  background: rgba(255, 255, 255, .53);
}

.hv-tabs a {
  padding: 10px 17px;
  color: #746d66;
  font-size: 10px;
  font-weight: 750;
}

.hv-tabs a:hover,
.hv-tabs a[aria-current="page"] {
  color: #fff7e7;
  background: #30423d;
}

.hv-news__layout {
  display: grid;
  grid-template-columns: minmax(0, 518px) minmax(0, 1fr);
  gap: 25px;
}

.hv-featured {
  position: relative;
  min-height: 362px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: white;
  background:
    linear-gradient(180deg, rgba(7, 16, 15, .05) 25%, rgba(8, 18, 17, .95)),
    url("/assets/home-v2/hero-tienkiem-v2.webp") center / cover no-repeat,
    #183c36;
  box-shadow: 0 21px 48px rgba(42, 38, 31, .12);
}

.hv-featured::before {
  position: absolute;
  inset: 17px;
  z-index: 3;
  border: 1px solid rgba(234, 211, 168, .27);
  content: "";
}

.hv-featured::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 16, 15, .03) 24%, rgba(8, 18, 17, .95));
  content: "";
}

.hv-featured__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hv-featured__copy {
  position: relative;
  z-index: 2;
  padding: 37px 38px;
}

.hv-featured__copy small,
.hv-news-row small {
  display: block;
  color: #d1aa60;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.hv-featured__copy strong {
  display: block;
  max-width: 430px;
  margin-top: 10px;
  color: #f8ead0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
  font-weight: 500;
  line-height: 1.24;
}

.hv-featured__copy p {
  max-width: 430px;
  margin: 12px 0 0;
  color: rgba(246, 239, 225, .64);
  font-size: 10px;
  line-height: 1.7;
}

.hv-featured__more {
  display: inline-block;
  margin-top: 19px;
  color: #e1bb73;
  font-size: 9px;
  font-weight: 850;
}

.hv-news-list {
  padding: 5px 25px 0;
  border: 1px solid #dbcec0;
  background: rgba(255, 253, 248, .58);
}

.hv-news-row {
  min-height: 68px;
  display: grid;
  grid-template-columns: 66px 1fr;
  align-items: center;
  gap: 17px;
  padding: 13px 0;
  border-bottom: 1px solid #dfd4c7;
}

.hv-news-row__thumb {
  width: 66px;
  height: 56px;
  display: grid;
  place-items: center;
  color: #e0c187;
  border: 1px solid rgba(209, 172, 103, .23);
  background:
    linear-gradient(135deg, rgba(199, 153, 75, .13), transparent),
    #253f3a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.hv-news-row__copy {
  min-width: 0;
}

.hv-news-row__copy strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #303432;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hv-news-row__copy p {
  display: -webkit-box;
  margin: 5px 0 0;
  overflow: hidden;
  color: #7d756e;
  font-size: 9px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.hv-news__all {
  display: inline-block;
  margin: 18px 0;
  color: #956627;
  font-size: 9px;
  font-weight: 850;
}

.hv-empty {
  padding: 38px;
  color: var(--hv-muted);
  border: 1px solid var(--hv-line);
  background: rgba(255, 255, 255, .55);
  line-height: 1.7;
}

/* Character and feature section */
.hv-world {
  position: relative;
  width: 100%;
  min-height: 930px;
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(460px, 1.28fr);
  gap: 60px;
  align-items: center;
  padding: 105px max(40px, calc((100vw - 1176px) / 2)) 265px;
  overflow: hidden;
  color: #f5eee2;
  background:
    radial-gradient(circle at 74% 36%, rgba(196, 158, 87, .14), transparent 27%),
    linear-gradient(135deg, #1e4a43, #102d29 57%, #0d211f);
}

.hv-world::before {
  position: absolute;
  inset: 0;
  opacity: .2;
  background:
    repeating-linear-gradient(90deg, transparent 0 59px, rgba(232, 220, 193, .055) 60px),
    repeating-linear-gradient(0deg, transparent 0 59px, rgba(232, 220, 193, .04) 60px);
  content: "";
  pointer-events: none;
}

.hv-world__copy,
.hv-world__visual,
.hv-world__cards {
  position: relative;
  z-index: 2;
}

.hv-world h2 {
  max-width: 470px;
  color: #f0d9aa;
}

.hv-world__copy > p:not(.hv-eyebrow) {
  max-width: 450px;
  margin: 22px 0 0;
  color: rgba(241, 234, 221, .61);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  line-height: 1.8;
}

.hv-world__copy > a {
  display: inline-block;
  margin-top: 26px;
  color: #ddb870;
  font-size: 9px;
  font-weight: 850;
}

.hv-world__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 34px;
}

.hv-world__roles span {
  padding: 9px 12px;
  color: rgba(242, 233, 215, .55);
  border: 1px solid rgba(229, 205, 157, .14);
  font-size: 8px;
}

.hv-world__roles span[aria-current="true"] {
  color: #f5d99f;
  border-color: rgba(231, 194, 123, .45);
  background: rgba(221, 177, 94, .08);
}

.hv-world__visual {
  min-height: 524px;
  overflow: hidden;
  border: 1px solid rgba(235, 211, 165, .18);
  background:
    linear-gradient(90deg, rgba(15, 40, 36, .64), transparent 45%),
    linear-gradient(180deg, transparent 55%, rgba(13, 34, 31, .78)),
    url("/assets/home-v2/hero-tienkiem-v2.webp") 67% center / cover no-repeat;
  box-shadow: 0 34px 75px rgba(0, 0, 0, .24);
}

.hv-world__visual::before {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(234, 210, 163, .14);
  content: "";
}

.hv-world__ring {
  position: absolute;
  top: 45px;
  right: 43px;
  width: 115px;
  height: 115px;
  border: 1px solid rgba(235, 204, 145, .28);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(229, 194, 128, .035);
}

.hv-world__caption {
  position: absolute;
  right: 48px;
  bottom: 42px;
  color: rgba(242, 219, 173, .78);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.35;
  text-align: right;
}

.hv-world__cards {
  position: absolute;
  right: max(40px, calc((100vw - 1176px) / 2));
  bottom: 70px;
  left: max(40px, calc((100vw - 1176px) / 2));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(230, 205, 157, .14);
  background: rgba(8, 26, 23, .48);
  backdrop-filter: blur(8px);
}

.hv-world__card {
  min-height: 128px;
  display: grid;
  grid-template-columns: 47px 1fr;
  align-content: center;
  gap: 5px 13px;
  padding: 22px;
  border-right: 1px solid rgba(230, 205, 157, .11);
}

.hv-world__card:last-child {
  border-right: 0;
}

.hv-world__card span {
  grid-row: span 2;
  color: rgba(219, 177, 99, .5);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
}

.hv-world__card strong {
  color: #f0dcb5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 500;
}

.hv-world__card small {
  color: rgba(236, 230, 216, .44);
  font-size: 8px;
  line-height: 1.5;
}

/* Floating rail */
.hv-float {
  position: fixed;
  z-index: 40;
  top: 50%;
  right: 17px;
  width: 92px;
  border: 1px solid rgba(226, 195, 134, .25);
  background: rgba(12, 25, 23, .92);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .23);
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
}

.hv-float a {
  min-height: 82px;
  display: grid;
  place-content: center;
  gap: 4px;
  color: rgba(243, 233, 214, .72);
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  text-align: center;
}

.hv-float a:last-child {
  border-bottom: 0;
}

.hv-float a:hover {
  color: #f0ce89;
  background: rgba(180, 131, 0, .13);
}

.hv-float span,
.hv-float strong {
  display: block;
}

.hv-float span {
  color: #cba65d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
}

.hv-float strong {
  font-size: 7px;
  font-weight: 750;
}

/* Footer */
.hv-footer {
  padding: 58px max(24px, calc((100vw - 1176px) / 2)) 31px;
  color: rgba(236, 229, 215, .57);
  background: #171a19;
}

.hv-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.hv-footer__brand strong {
  color: #efe1c5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  letter-spacing: .1em;
}

.hv-footer__brand small {
  margin-top: 3px;
  font-size: 8px;
}

.hv-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 22px;
  font-size: 8px;
}

.hv-footer nav a:hover {
  color: #e0b96f;
}

.hv-footer__legal {
  margin: 23px 0 0;
  color: rgba(235, 228, 214, .34);
  font-size: 8px;
  line-height: 1.7;
}

/* Public news list and detail */
.news-shell {
  min-height: 100vh;
  padding-top: 60px;
  background:
    radial-gradient(circle at 86% 11%, rgba(190, 145, 73, .12), transparent 22%),
    linear-gradient(180deg, #f5efe8, #eee4da);
}

.news-hero {
  position: relative;
  min-height: 370px;
  display: grid;
  place-content: center;
  padding: 65px 24px 55px;
  overflow: hidden;
  color: #f3e4c7;
  text-align: center;
  background:
    linear-gradient(rgba(8, 23, 21, .57), rgba(8, 23, 21, .91)),
    url("/assets/home-v2/hero-tienkiem-v2.webp") center 38% / cover no-repeat;
}

.news-hero::after {
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(229, 201, 148, .14);
  content: "";
  pointer-events: none;
}

.news-hero > * {
  position: relative;
  z-index: 1;
}

.news-hero > p {
  margin: 0 0 9px;
  color: #d0aa60;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.news-hero h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500;
}

.news-hero__tabs {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 27px;
}

.news-hero__tabs a {
  padding: 10px 16px;
  color: rgba(247, 239, 222, .72);
  border: 1px solid rgba(233, 206, 157, .19);
  background: rgba(4, 19, 17, .35);
  font-size: 9px;
  font-weight: 750;
}

.news-hero__tabs a:hover,
.news-hero__tabs a[aria-current="page"] {
  color: #1d231e;
  background: linear-gradient(135deg, #eed08b, #b88634);
}

.news-page {
  width: min(1040px, calc(100% - 40px));
  margin: 0 auto;
  padding: 68px 0 100px;
}

.news-page__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 19px;
}

.news-card {
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  overflow: hidden;
  border: 1px solid #ddd0c1;
  background:
    linear-gradient(135deg, rgba(204, 157, 82, .055), transparent 40%),
    rgba(255, 253, 248, .82);
  box-shadow: 0 15px 34px rgba(39, 43, 39, .05);
  transition: transform .2s ease, box-shadow .2s ease;
}

.news-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 3px;
  background: var(--hv-gold);
  content: "";
}

.news-card:hover {
  box-shadow: 0 23px 44px rgba(39, 43, 39, .11);
  transform: translateY(-4px);
}

.news-card small {
  color: #9e7132;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.news-card h2 {
  margin: 14px 0 0;
  color: #28332f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
}

.news-card p {
  margin: 13px 0 0;
  color: #756f68;
  font-size: 11px;
  line-height: 1.7;
}

.news-card > span {
  margin-top: auto;
  padding-top: 24px;
  color: #956627;
  font-size: 9px;
  font-weight: 850;
}

.news-article {
  width: min(900px, calc(100% - 40px));
  margin: 0 auto;
  padding: 58px 0 105px;
}

.news-article__breadcrumb {
  margin-bottom: 24px;
  color: #876f4c;
  font-size: 9px;
}

.news-article__breadcrumb a:hover {
  text-decoration: underline;
}

.news-article__paper {
  position: relative;
  padding: clamp(30px, 7vw, 78px);
  border: 1px solid #dccfbe;
  background:
    linear-gradient(90deg, rgba(188, 145, 75, .035), transparent 16%, transparent 84%, rgba(188, 145, 75, .035)),
    #fffdf8;
  box-shadow: 0 27px 64px rgba(37, 43, 39, .09);
}

.news-article__paper::before {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(179, 145, 90, .11);
  content: "";
  pointer-events: none;
}

.news-article__meta {
  position: relative;
  z-index: 1;
  color: #a47736;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.news-article h1 {
  position: relative;
  z-index: 1;
  margin: 18px auto 22px;
  color: #26322e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(31px, 5vw, 48px);
  font-weight: 500;
  line-height: 1.17;
  text-align: center;
}

.news-article__excerpt {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin: 0 auto 36px;
  color: #6f716c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.75;
  text-align: center;
}

.news-article__content {
  position: relative;
  z-index: 1;
  color: #3d403d;
  font-size: 16px;
  line-height: 1.82;
  text-align: justify;
  word-break: break-word;
}

.news-article__content h2,
.news-article__content h3,
.news-article__content h4 {
  margin: 1.8em 0 .7em;
  color: #314b44;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.3;
  text-align: left;
}

.news-article__content h4 {
  color: #b66f48;
  font-size: 20px;
}

.news-article__content a {
  color: #95601f;
  text-decoration: underline;
}

.news-article__content img {
  height: auto;
  display: block;
  margin: 27px auto;
}

.news-article__content table {
  width: 100%;
  border-collapse: collapse;
}

.news-article__content th,
.news-article__content td {
  padding: 10px 12px;
  border: 1px solid #d8cabb;
  text-align: left;
}

.news-article__content tr:nth-child(even) {
  background: #eee8e1;
}

.news-article__back {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-top: 31px;
  color: #92632a;
  font-size: 10px;
  font-weight: 850;
}

.news-not-found {
  width: min(720px, calc(100% - 40px));
  min-height: 560px;
  display: grid;
  place-content: center;
  gap: 12px;
  margin: 0 auto;
  padding: 80px 0;
  text-align: center;
}

.news-not-found h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 5vw, 52px);
}

.news-not-found p {
  color: var(--hv-muted);
}

.news-not-found .hv-button {
  width: max-content;
  margin: 10px auto 0;
}

@media (max-width: 1080px) {
  .hv-header__inner {
    grid-template-columns: 220px 1fr 210px;
  }

  .hv-nav {
    gap: 25px;
  }

  .hv-hero__actionbar {
    grid-template-columns: 1.15fr .72fr .85fr;
  }

  .hv-login-card {
    grid-template-columns: 1fr;
  }

  .hv-login-card p {
    display: none;
  }

  .hv-login-card__actions {
    grid-template-columns: 1fr 1fr;
  }

  .hv-world {
    gap: 35px;
  }

  .hv-float {
    right: 7px;
    width: 64px;
  }
}

@media (max-width: 900px) {
  .hv-header__inner {
    grid-template-columns: 1fr auto;
  }

  .hv-nav {
    display: none;
  }

  .hv-mobile-menu {
    display: block;
  }

  .hv-hero {
    min-height: 820px;
    background-position: 57% top;
  }

  .hv-hero__content {
    padding-top: 125px;
  }

  .hv-hero__actionbar {
    grid-template-columns: 1.12fr .88fr;
  }

  .hv-quick {
    display: none;
  }

  .hv-news__layout {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }

  .hv-world {
    grid-template-columns: .78fr 1.22fr;
    padding-bottom: 270px;
  }

  .hv-world__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .hv-world__card:nth-child(2) {
    border-right: 0;
  }

  .hv-world__card:nth-child(-n+2) {
    border-bottom: 1px solid rgba(230, 205, 157, .11);
  }

  .news-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .hv-header,
  .hv-header__inner {
    height: 60px;
  }

  .hv-header__inner {
    width: calc(100% - 26px);
  }

  .hv-brand strong {
    font-size: 13px;
  }

  .hv-brand small,
  .hv-header__account {
    display: none;
  }

  .hv-header__actions {
    gap: 8px;
  }

  .hv-header__play {
    min-height: 35px;
    padding: 0 13px;
  }

  .hv-hero {
    min-height: 790px;
    background-position: 59% top;
  }

  .hv-hero__content {
    width: calc(100% - 30px);
    padding-top: 108px;
  }

  .hv-hero h1 {
    font-size: clamp(45px, 13vw, 65px);
  }

  .hv-hero__intro {
    max-width: 410px;
    font-size: 12px;
  }

  .hv-hero__sigil {
    width: 85px;
    height: 85px;
    margin-top: 28px;
  }

  .hv-hero__actionbar {
    bottom: 18px;
    width: calc(100% - 28px);
    min-height: 175px;
  }

  .hv-server {
    padding: 20px;
  }

  .hv-server__rows {
    grid-template-columns: 1fr;
  }

  .hv-server__row {
    display: none;
  }

  .hv-server__row:first-child {
    min-height: 52px;
    display: grid;
  }

  .hv-login-card {
    padding: 19px;
  }

  .hv-login-card strong {
    font-size: 14px;
  }

  .hv-news {
    width: calc(100% - 28px);
    padding: 76px 0 83px;
  }

  .hv-section__head {
    display: block;
  }

  .hv-tabs {
    margin-top: 20px;
  }

  .hv-tabs a {
    flex: 1;
    padding-inline: 8px;
    text-align: center;
  }

  .hv-news__layout {
    grid-template-columns: 1fr;
  }

  .hv-featured {
    min-height: 380px;
  }

  .hv-featured__copy {
    padding: 29px;
  }

  .hv-featured__copy strong {
    font-size: 24px;
  }

  .hv-news-list {
    padding-inline: 18px;
  }

  .hv-world {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 74px 24px 365px;
  }

  .hv-world__copy {
    text-align: center;
  }

  .hv-world h2,
  .hv-world__copy > p:not(.hv-eyebrow) {
    margin-right: auto;
    margin-left: auto;
  }

  .hv-world__roles {
    justify-content: center;
  }

  .hv-world__visual {
    min-height: 350px;
  }

  .hv-world__cards {
    right: 24px;
    bottom: 55px;
    left: 24px;
  }

  .hv-world__card {
    min-height: 122px;
  }

  .hv-float {
    inset: auto 0 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-width: 1px 0 0;
    transform: none;
  }

  .hv-float a {
    min-height: 54px;
    border-right: 1px solid rgba(255, 255, 255, .075);
    border-bottom: 0;
  }

  .hv-footer {
    padding: 47px 20px 78px;
  }

  .hv-footer__top {
    display: block;
  }

  .hv-footer nav {
    justify-content: flex-start;
    margin-top: 28px;
    gap: 15px 20px;
  }

  .news-hero {
    min-height: 315px;
  }

  .news-hero__tabs {
    flex-wrap: wrap;
  }

  .news-page {
    width: calc(100% - 28px);
    padding-top: 45px;
  }

  .news-page__grid {
    grid-template-columns: 1fr;
  }

  .news-card {
    min-height: 230px;
  }

  .news-article {
    width: min(553px, calc(100% - 24px));
    padding: 35px 0 70px;
  }

  .news-article__paper {
    padding: 38px 22px 48px;
  }

  .news-article__content {
    font-size: 15px;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .hv-brand > span:last-child {
    display: none;
  }

  .hv-hero {
    min-height: 650px;
    background-position: 60% top;
  }

  .hv-hero__content {
    padding-top: 91px;
  }

  .hv-hero h1 {
    max-width: 320px;
    margin-inline: auto;
    font-size: 47px;
  }

  .hv-hero__intro {
    display: -webkit-box;
    max-width: 330px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .hv-hero__actions {
    margin-top: 19px;
  }

  .hv-hero__actions a {
    min-height: 37px;
    padding-inline: 14px;
  }

  .hv-hero__sigil {
    display: none;
  }

  .hv-hero__actionbar {
    grid-template-columns: 1fr;
    min-height: 152px;
  }

  .hv-login-card {
    display: none;
  }

  .hv-server {
    border-right: 0;
  }

  .hv-featured {
    min-height: 340px;
  }

  .hv-news-row {
    grid-template-columns: 55px 1fr;
    gap: 12px;
  }

  .hv-news-row__thumb {
    width: 55px;
    height: 51px;
  }

  .hv-news-row__copy p {
    display: none;
  }

  .hv-world {
    min-height: 880px;
    padding-bottom: 350px;
  }

  .hv-world__visual {
    min-height: 280px;
  }

  .hv-world__cards {
    grid-template-columns: 1fr 1fr;
  }

  .hv-world__card {
    grid-template-columns: 34px 1fr;
    gap: 4px 8px;
    padding: 15px;
  }

  .hv-world__card span {
    font-size: 21px;
  }

  .news-hero {
    min-height: 280px;
    padding-inline: 15px;
  }

  .news-hero h1 {
    font-size: 37px;
  }

  .news-hero__tabs a {
    padding: 9px 11px;
  }

  .news-article h1 {
    font-size: clamp(28px, 8vw, 38px);
  }

  .news-article__excerpt {
    font-size: 13px;
  }
}