/* =============================================
   Camel Beer – Page 1 (Age Gate)
   Canvas: 1920 × 1080 px
   ============================================= */

@font-face {
  font-family: 'VL Bebas Neue';
  src: url('./font/VL%20Bebas/VLBEBASNEUEBOLD.OTF') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'VL Bebas Neue';
  src: url('./font/VL%20Bebas/VLBEBASNEUE-THIN.OTF') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'VL Bebas Neue Regular';
  src: url('./font/VL%20Bebas/VLBEBASNEUEREGULAR.OTF') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Bahnschrift';
  src: url('./font/Bahnschrift/BAHNSCHRIFT.TTF') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}



*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: #fff;
}

body {
  font-family: 'VL Bebas Neue', 'Bebas Neue', sans-serif;
}

button {
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.scene {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 4rem);
  isolation: isolate;
}

.bg,
.decor,
.product-visual,
.promo-visual {
  position: absolute;
  display: block;
  user-select: none;
  pointer-events: none;
}

.bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-base { z-index: -3; }
.bg-foam { z-index: -2; opacity: 1; }

.decor { z-index: -1; }
.decor-header {
  width: clamp(11rem, 24vw, 24rem);
  height: 100vh;
  left: clamp(0px, 2vw, 80px);
  object-position: left top;
  object-fit: fill;

}

.decor-header-right {
  width: clamp(11rem, 24vw, 24rem);
  height: 100vh;
  right: clamp(20px, 8vw, 150px);
  object-position: right top;
  object-fit: contain;
  transform: translateY(-1%);
}

/*.decor-footer {
  width: clamp(20rem, 54vw, 68rem);
  height: auto;
  right: clamp(-8rem, -5vw, -2rem);
  bottom: clamp(-30rem, -23.5vw, -10rem);
}*/

/* Vật thể lon bia bên phải 
.decor-header-right {
  width: clamp(11rem, 24vw, 24rem);
  height: 100vh;
  right: 150px; 
  object-position: right top;
  object-fit: contain;
  z-index: 2;   
}*/

/* Vật thể decor ở dưới footer */
.decor-footer {
  /*width: clamp(35rem, 70vw, 85rem);*/
  width: clamp(50rem, 85vw, 110rem);
  height: clamp(35rem, 60vh, 55rem);
  /*height: auto;*/
  object-fit: contain;
  object-position: right bottom;
  right: 0;     /* Ép sát lề phải, không dùng số âm nữa */
  bottom: 0;    /* Ép sát lề dưới, không dùng số âm nữa */
  z-index: 1;   /* z-index thấp hơn lon bia để tự động chui xuống dưới */
}

.decor-hop { height: auto; opacity: 0.95; }
.decor-hop-1 { width: clamp(4rem, 8vw, 10.625rem); left:10%; top: 8%; }
.decor-hop-2 { width: clamp(3rem, 5.4vw, 6.9375rem); left: 8%; top: 34%; }
.decor-hop-3 { width: clamp(2.5rem, 3.6vw, 4.3125rem); right: 30%; top: 42%; }
.decor-hop-4 { width: clamp(3rem, 5vw, 6.5625rem); right: 15%; top: 8%; }

.age-gate {
  position: relative;
  z-index: 3;
  width: min(100%, 42rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 2.8vw, 2rem);
  text-align: center;
}

.logo {
  width: clamp(9rem, 16vw, 16.5625rem);
  height: auto;
}

.confirm-text {
  max-width: 40.75rem;
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.625rem);
  /* font-size: clamp(14px, 1.04vw, 20px); 15 pt tuong duong 1.04vw  */
  line-height: 1.4;
  color: #ffffff;
  font-family: 'Bahnschrift', 'VL Bebas Neue', 'Bebas Neue', sans-serif;
  font-stretch: condensed;
}

.age-actions {
  display: flex;
  justify-content: center;
  gap: clamp(0.75rem, 2.25vw, 2.6875rem);
  width: 100%;
}

.age-button {
  min-width: clamp(10.5rem, 15vw, 15rem);
  min-height: clamp(3.25rem, 4vw, 4.0625rem);
  padding: calc(0.35rem + 2px) clamp(1rem, 2vw, 1.5rem) calc(0.35rem - 2px);
  border: 2px solid #c8102e;
  border-radius: 999px;
  background: #fff;
  color: #c8102e;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Bahnschrift', 'VL Bebas Neue Regular', 'Bebas Neue', sans-serif;
  font-weight: bold; /*400 default*/
  font-stretch: condensed;
  font-size: clamp(1.25rem, 1.875vw, 2.25rem);
  /*font-size: clamp(14px, 1.04vw, 20px);  15pt tuong duong 1.04vw  */
  line-height: 1;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.age-button:hover,
.age-button:active,
.age-button:focus-visible {
  background: #9c0000;
  color: #fff;
  border-color: #9c0000;
}

.age-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Nút "Tôi đã đủ 18 tuổi" – mặc định nền đỏ */
.age-button--confirm {
  background: #b11117;
  color: #fff;
  border-color: #ffffff;
}

.age-button--confirm:hover,
.age-button--confirm:active,
.age-button--confirm:focus-visible {
  background: #a50e26;
  border-color: #a50e26;
  color: #fff;
}

.age-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1vw, 1rem);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.35vw, 1.625rem);
  /* font-size: clamp(14px, 0.91vw, 17.53px); 13.15pt tuong duong 0.91 vw */
  line-height: 1;
  color: #ffffff;
}

.age-notice img {
  width: clamp(5.5rem, 8vw, 7.4375rem);
  height: auto;
  flex: 0 0 auto;
}

.age-notice span {
  white-space: nowrap;
  font-family: 'Bahnschrift', 'VL Bebas Neue Regular', 'Bebas Neue', sans-serif;
  text-transform: uppercase;
  font-stretch: condensed;
  font-weight: 600; /*600 la semibold*/
}

/*.product-visual {
  z-index: 1;
  width: clamp(18rem, 36vw, 43.8125rem);
  aspect-ratio: 701 / 985;
  right: clamp(-7rem, -3vw, 1rem);
  top: clamp(-4rem, -3vw, 1rem);
}*/

.product-visual {
  z-index: 1;
  width: clamp(18rem, 36vw, 43.8125rem);
  aspect-ratio: 701 / 985;
  right: clamp(-7rem, -3vw, 1rem);
  
  /* Thay đổi dòng này: Tăng giá trị top lên để nó đẩy xuống dưới */
  top: clamp(-2rem, -1vw, 3rem); 
  
  /* Hoặc xóa hẳn thuộc tính 'top' đi và dùng 'bottom' để căn từ dưới lên: */
  /* bottom: 0; */
}

.can {
  position: absolute;
  display: block;
  height: auto;
}

.can-green { width: 67%; left: 33%; top: 0; }
.can-sleek { width: 78.3%; left: 0; top: 33.6%; }

.promo-visual {
  z-index: 2;
  right: clamp(1rem, 4vw, 5.5rem);
  bottom: clamp(1rem, 3vw, 4.625rem);
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.2vw, 1rem);
}

.promo-bike {
  width: clamp(5rem, 9vw, 11.8125rem);
  height: auto;
}

.promo-text {
  width: clamp(9rem, 19vw, 25.5rem);
  height: auto;
}

/* Responsive */
@media (max-width: 1559px) {
		.decor-header-right {
		transform: translateY(10%);
	}
}
@media (max-width: 1559px) and (height: 975px){
		.decor-header-right {
		transform: translateY(9.5%);
	}	
}
/* PC lớn, Laptop lớn, màn hình desktop vừa */
@media (max-width: 1440px) {
	.decor-header-right {
		width: clamp(11rem, 34vw, 24rem);
		transform: translateY(0%);
	}
	.confirm-text{
		max-width: 25.75rem;
	}
	.product-visual{
		top: clamp(-2rem, 0vw, 5rem);
	}

}
/* Laptop - PC nhỏ 13 - 15 inch */
@media (max-width: 1200px) {
	.decor-header-right{
		margin-right: -7%;
		transform: translateY(-2%);
	}
}

@media (max-width: 1200px) and (height: 720px){
	.decor-header-right{
		transform: translateY(-1%);
		}
}
@media (max-width: 1200px) and (height: 750px){
	.decor-header-right{
		transform: translateY(-1%);
		}
}
@media (max-width: 1200px) and (height: 800px){
	.decor-header-right{
		transform: translateY(0%);
		}
}

@media (max-width: 1200px) and (height: 900px){
	.decor-header-right{
		transform: translateY(1%);
		}
}

/* Tablet ngang, iPad ngang, tablet landscape */
@media (max-width: 1024px) {
	.decor-header-right{
		margin-right: 9%;
		transform: translateY(-1%);
	}
  .scene {
    align-items: center;
    padding: clamp(1.25rem, 4vw, 3rem);
  }

  .product-visual {
    width: clamp(16rem, 42vw, 28rem);
    right: clamp(-9rem, -8vw, -2rem);
    /*top: clamp(-2rem, 2vw, 5rem);*/
    /*opacity: 0.9;*/
  }

  .promo-visual {
    right: clamp(1rem, 4vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
  }

  .decor-hop-3 { right: 28%; }
  .decor-hop-4 { right: 9%; }
}
@media (max-width: 1024px) and (height: 640px){
	.decor-header-right{	
		transform: translateY(0%);
		}
}
@media (max-width: 1024px) and (height: 768px){
	.decor-header-right{
		margin-right: 2%;
		transform: translateY(1%);
		}
}
@media (max-width: 1024px) and (height: 800px){
	.decor-header-right{
		margin-right: 1%;
		transform: translateY(1%);
		}
}
@media (max-width: 1024px) and (height: 1366px){
	.decor-header-right{
		margin-right: 1%;
		transform: translateY(40%);
		}
}

@media (max-width: 820px) {
	.decor-header-right{
		margin-right: -6%;
		transform: translateY(43.3%);
	}
	
}
@media (max-width: 820px) and (height: 1180px){
	.decor-header-right{
		margin-right: -6%;
		transform: translateY(43.3%);
	}	
}

/* Tablet dọc, iPad dọc, tablet portrait */
@media (max-width: 768px) {
	.age-gate {
		width: min(50%, 24rem);
		margin-left: 6px;
		gap: clamp(1rem, 4vw, 1.375rem);
	}
  	.confirm-text{
		max-width: 20.75rem;
	}
	.decor-header{
		width: clamp(14rem, 34vw, 32rem);
		left: clamp(-100px, -4vw, -20px);
	}
	.decor-header-right {
		width: clamp(11rem, 75%, 24rem);
		object-position: right bottom;
		margin-right: -2%;
		transform: translateY(-1%);
	}
}
@media (max-width: 768px) and (height: 432px){
	.decor-header-right{
		margin-right: 8%;
		transform: translateY(0%);
	}
	.decor-header{
		top: 0;
	}
}
@media (max-width: 768px) and (height: 480px){
	.decor-header-right{
		margin-right: 5%;
		transform: translateY(-3%);
	}
}
/* Mobile ngang, điện thoại lớn, điện thoại quay ngang hoặc máy nhỏ */
@media (max-width: 700px) {
	.decor-header-right{
		margin-right: 2%;
		transform: translateY(0%);
	}
  .scene {
    min-height: 100svh;
    padding: clamp(1rem, 5vw, 1.5rem);
    place-items: center;
  }

  .age-gate {
    /*width: min(100%, 24rem);*/
	width: min(50%, 24rem);
    gap: clamp(1rem, 4vw, 1.375rem);
	margin-left: 20px;
  }

  .logo {
    width: clamp(7.5rem, 36vw, 10rem);
  }

  .confirm-text {
    font-size: clamp(0.95rem, 4.2vw, 1.2rem);
    line-height: 1.35;
  }

  .age-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .age-button {
    width: 100%;
    min-width: 0;
    min-height: 3.25rem;
    font-size: clamp(1.35rem, 7vw, 1.8rem);
  }

  .age-notice {
    gap: 0.5rem;
    font-size: clamp(0.85rem, 3.7vw, 1rem);
  }

  .age-notice img {
    width: clamp(4.5rem, 23vw, 5.75rem);
  }

  .age-notice span {
    white-space: normal;
    text-align: left;
  }

  .product-visual {
    width: clamp(12rem, 55vw, 18rem);
    right: clamp(-8rem, -10vw, -2rem);
    /*top: clamp(0rem, 6vw, 3rem);
	top: clamp(-11rem, -16vw, -7rem);*/
	top: clamp(-9rem, -12vw, -5rem);
    /*opacity: 0.8;*/
  }

  .promo-bike { width: clamp(3.5rem, 15vw, 4.5rem); }
  .promo-text { width: clamp(7rem, 34vw, 9rem); }

  .decor-header {
    /*width: clamp(15rem, 80vw, 22rem);*/
	width: clamp(10rem, 70vw, 14rem);
    /*left: -9rem;*/
	left: -1rem;
    /*top: -10rem;*/
	top: unset;
  }

  .decor-footer {
    /*width: clamp(14rem, 83vw, 21rem);*/
    width: 100vw;
    height: clamp(20rem, 45vh, 30rem);
    /*right: -2rem;
    bottom: -9rem;*/
    object-fit: cover;
    object-position: right bottom;
    right: 0;
    bottom: 0;
  }

  .decor-hop-1 { left: 5%; top: 12%; }
  .decor-hop-2 { left: 4%; top: 72%; }
  .decor-hop-3 { right: 28%; top: 28%; opacity: 0.6; }
  .decor-hop-4 { right: 15%; top: 15%; opacity: 0.6; }
}
@media (max-width: 700px) and (height: 800px){
	.decor-header-right{
		transform: translateY(-1%);
		}
}
@media (max-width: 700px) and (height: 900px){
	.decor-header-right{
		transform: translateY(-3%);
		}
}
@media (max-width: 700px) and (height: 950px){
	.decor-header-right{
		transform: translateY(-4%);
		}
}

/* Mobile phổ biến iPhone, Android phổ biến */
@media (max-width: 480px) {
    .age-gate {
    width: min(100%, 24rem);
	margin-left:unset;
	}
	.decor-header, .product-visual{display:none;}
}

/* Mobile nhỏ, iPhone mini, màn nhỏ */
@media (max-width: 375px) {
  
}