/* =========================================================
TERRA-X HERO SECTION
FONT: ARIAL
========================================================= */
.terra-hero {
width: 100%;
min-height: 520px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
background-image: url(“https://terra-x.top/wp-content/uploads/2026/09/9d1f27c4-d7fa-4f40-b5f7-0edb7c794ed9.jpg”);
background-color: #222;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-sizing: border-box;
}
.terra-hero::before {
content: “”;
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.48) 0%,
rgba(0, 0, 0, 0.28) 48%,
rgba(0, 0, 0, 0.12) 100%
);
z-index: 1;
pointer-events: none;
}
.terra-hero-container {
position: relative;
z-index: 2;
width: 100%;
max-width: 1380px;
margin: 0 auto;
padding: 65px 70px;
display: grid;
grid-template-columns: 1.08fr 0.92fr;
align-items: center;
gap: 65px;
box-sizing: border-box;
}
.terra-hero-left {
max-width: 670px;
color: #ffffff;
}
.terra-hero-eyebrow {
margin: 0 0 18px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.4;
font-weight: 300;
letter-spacing: 5px;
text-transform: uppercase;
color: #ffffff;
}
.terra-hero-title {
margin: 0 0 22px;
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(60px, 6.2vw, 86px);
line-height: 0.95;
font-weight: 700;
letter-spacing: 1px;
color: #ffffff;
}
.terra-hero-description {
max-width: 520px;
margin: 0 0 34px;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
line-height: 1.65;
font-weight: 400;
color: #ffffff;
}
.terra-hero-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 20px;
min-width: 180px;
height: 58px;
padding: 0 25px;
background: #ffffff;
color: #222222;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
border-radius: 4px;
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
box-sizing: border-box;
}
.terra-hero-button span {
font-size: 20px;
line-height: 1;
transition: transform 0.3s ease;
}
.terra-hero-button:hover {
background: #D9822B;
color: #ffffff;
transform: translateY(-2px);
}
.terra-hero-button:hover span {
transform: translateX(5px);
}
.terra-hero-products {
width: 100%;
max-width: 455px;
margin-left: auto;
color: #ffffff;
transform: translate(20px, 8px);
box-sizing: border-box;
}
.terra-products-heading {
margin: 0 0 14px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.4;
font-weight: 700;
letter-spacing: 0.2px;
text-transform: uppercase;
color: #ffffff;
}
.terra-product-item {
width: 100%;
display: flex;
align-items: center;
gap: 22px;
min-height: 86px;
padding: 13px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
box-sizing: border-box;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.terra-product-item:last-child {
border-bottom: none;
}
.terra-product-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.95);
transition: color 0.3s ease, transform 0.3s ease;
}
.terra-product-icon svg {
width: 46px;
height: 46px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.45;
stroke-linecap: round;
stroke-linejoin: round;
}
.terra-product-content {
flex: 1;
min-width: 0;
}
.terra-product-name {
margin: 0 0 6px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.3;
font-weight: 700;
letter-spacing: 0.3px;
color: #ffffff;
}
.terra-product-desc {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5;
font-weight: 400;
color: rgba(255, 255, 255, 0.88);
}
.terra-product-item:hover {
transform: translateX(5px);
border-bottom-color: rgba(217, 130, 43, 0.6);
}
.terra-product-item:hover .terra-product-icon {
color: #D9822B;
transform: scale(1.06);
}
/* TABLET */
@media (max-width: 1100px) {
.terra-hero-container {
grid-template-columns: 1fr 0.9fr;
gap: 40px;
padding: 60px 45px;
}
.terra-hero-title {
font-size: 65px;
}
.terra-hero-description {
font-size: 15px;
}
.terra-hero-products {
max-width: 420px;
transform: translate(12px, 6px);
}
.terra-product-item {
min-height: 80px;
gap: 17px;
}
.terra-product-icon,
.terra-product-icon svg {
width: 42px;
height: 42px;
}
.terra-product-name {
font-size: 14px;
}
.terra-product-desc {
font-size: 11px;
}
}
/* TABLET NHỎ */
@media (max-width: 900px) {
.terra-hero {
min-height: 500px;
}
.terra-hero-container {
grid-template-columns: 1fr 1fr;
gap: 30px;
padding: 55px 35px;
}
.terra-hero-title {
font-size: 58px;
}
.terra-hero-eyebrow {
font-size: 12px;
letter-spacing: 4px;
}
.terra-hero-description {
font-size: 14px;
}
.terra-hero-products {
max-width: 100%;
transform: translate(8px, 5px);
}
.terra-products-heading {
font-size: 13px;
}
.terra-product-item {
gap: 14px;
min-height: 75px;
}
.terra-product-icon,
.terra-product-icon svg {
width: 38px;
height: 38px;
}
.terra-product-name {
font-size: 13px;
}
.terra-product-desc {
font-size: 10px;
}
}
/* MOBILE */
@media (max-width: 767px) {
.terra-hero {
min-height: auto;
background-position: 62% center;
}
.terra-hero::before {
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.58),
rgba(0, 0, 0, 0.32)
);
}
.terra-hero-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 45px;
padding: 60px 24px;
}
.terra-hero-left {
max-width: 100%;
}
.terra-hero-eyebrow {
font-size: 11px;
letter-spacing: 3.5px;
font-weight: 300;
margin-bottom: 15px;
}
.terra-hero-title {
font-size: 48px;
letter-spacing: 1px;
margin-bottom: 18px;
}
.terra-hero-description {
max-width: 360px;
font-size: 14px;
line-height: 1.6;
margin-bottom: 25px;
}
.terra-hero-button {
min-width: 165px;
height: 52px;
font-size: 12px;
gap: 16px;
}
.terra-hero-products {
width: 100%;
max-width: 100%;
margin-left: 0;
transform: none;
}
.terra-products-heading {
font-size: 13px;
margin-bottom: 10px;
}
.terra-product-item {
width: 100%;
min-height: 75px;
gap: 15px;
padding: 12px 0;
}
.terra-product-icon,
.terra-product-icon svg {
width: 38px;
height: 38px;
}
.terra-product-name {
font-size: 13px;
}
.terra-product-desc {
font-size: 10px;
}
}
/* MOBILE NHỎ */
@media (max-width: 480px) {
.terra-hero-container {
padding: 50px 20px;
}
.terra-hero-title {
font-size: 42px;
}
.terra-hero-description {
font-size: 13px;
}
.terra-product-item {
gap: 13px;
}
.terra-product-name {
font-size: 12px;
}
.terra-product-desc {
font-size: 9.5px;
}
}

BORN TO EXPLORE

TERRA-X

Không chỉ là một đôi giày,
mà là người bạn đồng hành trên mọi hành trình.

KHÁM PHÁ NGAY
→

3 DÒNG SẢN PHẨM

TERRA-X LITE

Nhẹ nhàng · Linh hoạt · Mỗi ngày

TERRA-X CORE

Cân bằng · Đa năng · Mọi địa hình

TERRA-X PRO

Mạnh mẽ · Chuyên dụng · Không giới hạn

/* =========================================================
TERRA-X HERO SECTION
FONT: ARIAL
========================================================= */
.terra-hero {
width: 100%;
min-height: 520px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
background-image: url(“https://terra-x.top/wp-content/uploads/2026/09/9d1f27c4-d7fa-4f40-b5f7-0edb7c794ed9.jpg”);
background-color: #222;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-sizing: border-box;
}
.terra-hero::before {
content: “”;
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.48) 0%,
rgba(0, 0, 0, 0.28) 48%,
rgba(0, 0, 0, 0.12) 100%
);
z-index: 1;
pointer-events: none;
}
.terra-hero-container {
position: relative;
z-index: 2;
width: 100%;
max-width: 1380px;
margin: 0 auto;
padding: 65px 70px;
display: grid;
grid-template-columns: 1.08fr 0.92fr;
align-items: center;
gap: 65px;
box-sizing: border-box;
}
.terra-hero-left {
max-width: 670px;
color: #ffffff;
}
.terra-hero-eyebrow {
margin: 0 0 18px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.4;
font-weight: 300;
letter-spacing: 5px;
text-transform: uppercase;
color: #ffffff;
}
.terra-hero-title {
margin: 0 0 22px;
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(60px, 6.2vw, 86px);
line-height: 0.95;
font-weight: 700;
letter-spacing: 1px;
color: #ffffff;
}
.terra-hero-description {
max-width: 520px;
margin: 0 0 34px;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
line-height: 1.65;
font-weight: 400;
color: #ffffff;
}
.terra-hero-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 20px;
min-width: 180px;
height: 58px;
padding: 0 25px;
background: #ffffff;
color: #222222;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
border-radius: 4px;
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
box-sizing: border-box;
}
.terra-hero-button span {
font-size: 20px;
line-height: 1;
transition: transform 0.3s ease;
}
.terra-hero-button:hover {
background: #D9822B;
color: #ffffff;
transform: translateY(-2px);
}
.terra-hero-button:hover span {
transform: translateX(5px);
}
.terra-hero-products {
width: 100%;
max-width: 455px;
margin-left: auto;
color: #ffffff;
transform: translate(20px, 8px);
box-sizing: border-box;
}
.terra-products-heading {
margin: 0 0 14px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.4;
font-weight: 700;
letter-spacing: 0.2px;
text-transform: uppercase;
color: #ffffff;
}
.terra-product-item {
width: 100%;
display: flex;
align-items: center;
gap: 22px;
min-height: 86px;
padding: 13px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
box-sizing: border-box;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.terra-product-item:last-child {
border-bottom: none;
}
.terra-product-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.95);
transition: color 0.3s ease, transform 0.3s ease;
}
.terra-product-icon svg {
width: 46px;
height: 46px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.45;
stroke-linecap: round;
stroke-linejoin: round;
}
.terra-product-content {
flex: 1;
min-width: 0;
}
.terra-product-name {
margin: 0 0 6px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.3;
font-weight: 700;
letter-spacing: 0.3px;
color: #ffffff;
}
.terra-product-desc {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5;
font-weight: 400;
color: rgba(255, 255, 255, 0.88);
}
.terra-product-item:hover {
transform: translateX(5px);
border-bottom-color: rgba(217, 130, 43, 0.6);
}
.terra-product-item:hover .terra-product-icon {
color: #D9822B;
transform: scale(1.06);
}
/* TABLET */
@media (max-width: 1100px) {
.terra-hero-container {
grid-template-columns: 1fr 0.9fr;
gap: 40px;
padding: 60px 45px;
}
.terra-hero-title {
font-size: 65px;
}
.terra-hero-description {
font-size: 15px;
}
.terra-hero-products {
max-width: 420px;
transform: translate(12px, 6px);
}
.terra-product-item {
min-height: 80px;
gap: 17px;
}
.terra-product-icon,
.terra-product-icon svg {
width: 42px;
height: 42px;
}
.terra-product-name {
font-size: 14px;
}
.terra-product-desc {
font-size: 11px;
}
}
/* TABLET NHỎ */
@media (max-width: 900px) {
.terra-hero {
min-height: 500px;
}
.terra-hero-container {
grid-template-columns: 1fr 1fr;
gap: 30px;
padding: 55px 35px;
}
.terra-hero-title {
font-size: 58px;
}
.terra-hero-eyebrow {
font-size: 12px;
letter-spacing: 4px;
}
.terra-hero-description {
font-size: 14px;
}
.terra-hero-products {
max-width: 100%;
transform: translate(8px, 5px);
}
.terra-products-heading {
font-size: 13px;
}
.terra-product-item {
gap: 14px;
min-height: 75px;
}
.terra-product-icon,
.terra-product-icon svg {
width: 38px;
height: 38px;
}
.terra-product-name {
font-size: 13px;
}
.terra-product-desc {
font-size: 10px;
}
}
/* MOBILE */
@media (max-width: 767px) {
.terra-hero {
min-height: auto;
background-position: 62% center;
}
.terra-hero::before {
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.58),
rgba(0, 0, 0, 0.32)
);
}
.terra-hero-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 45px;
padding: 60px 24px;
}
.terra-hero-left {
max-width: 100%;
}
.terra-hero-eyebrow {
font-size: 11px;
letter-spacing: 3.5px;
font-weight: 300;
margin-bottom: 15px;
}
.terra-hero-title {
font-size: 48px;
letter-spacing: 1px;
margin-bottom: 18px;
}
.terra-hero-description {
max-width: 360px;
font-size: 14px;
line-height: 1.6;
margin-bottom: 25px;
}
.terra-hero-button {
min-width: 165px;
height: 52px;
font-size: 12px;
gap: 16px;
}
.terra-hero-products {
width: 100%;
max-width: 100%;
margin-left: 0;
transform: none;
}
.terra-products-heading {
font-size: 13px;
margin-bottom: 10px;
}
.terra-product-item {
width: 100%;
min-height: 75px;
gap: 15px;
padding: 12px 0;
}
.terra-product-icon,
.terra-product-icon svg {
width: 38px;
height: 38px;
}
.terra-product-name {
font-size: 13px;
}
.terra-product-desc {
font-size: 10px;
}
}
/* MOBILE NHỎ */
@media (max-width: 480px) {
.terra-hero-container {
padding: 50px 20px;
}
.terra-hero-title {
font-size: 42px;
}
.terra-hero-description {
font-size: 13px;
}
.terra-product-item {
gap: 13px;
}
.terra-product-name {
font-size: 12px;
}
.terra-product-desc {
font-size: 9.5px;
}
}

BORN TO EXPLORE

TERRA-X

Không chỉ là một đôi giày,
mà là người bạn đồng hành trên mọi hành trình.

KHÁM PHÁ NGAY
→

3 DÒNG SẢN PHẨM

TERRA-X LITE

Nhẹ nhàng · Linh hoạt · Mỗi ngày

TERRA-X CORE

Cân bằng · Đa năng · Mọi địa hình

TERRA-X PRO

Mạnh mẽ · Chuyên dụng · Không giới hạn

/* Khung chứa chính của thanh tìm kiếm – NỀN TRẮNG */
.search-bar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1200px;
background-color: #ffffff; /* Nền trắng */
border: 1px solid #e5e7eb; /* Viền nhẹ quanh thanh tìm kiếm */
border-radius: 10px;
padding: 8px 10px 8px 18px;
gap: 15px;
box-sizing: border-box;
font-family: Arial, sans-serif;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Đổ bóng nhẹ */
}
/* Ô nhập liệu tìm kiếm */
.search-input-box {
display: flex;
align-items: center;
flex: 1;
gap: 10px;
}
.search-icon {
width: 18px;
height: 18px;
stroke: #6b7280; /* Màu kính lúp tối hơn để rõ trên nền trắng */
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.search-input {
width: 100%;
background: transparent;
border: none;
outline: none;
color: #111827; /* Màu chữ đen/xám đậm */
font-size: 14px;
}
.search-input::placeholder {
color: #9ca3af;
}
/* Vùng chứa các khung chọn lọc (Dropdowns) */
.filters-box {
display: flex;
align-items: center;
gap: 20px;
}
.filter-item {
position: relative;
display: flex;
align-items: center;
}
.filter-select {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: none;
color: #374151; /* Màu chữ tùy chọn tối */
font-size: 14px;
padding-right: 18px;
cursor: pointer;
outline: none;
}
.filter-select:hover {
color: #111827;
}
.filter-select option {
background-color: #ffffff; /* Menu chọn màu trắng */
color: #111827;
}
.arrow-icon {
position: absolute;
right: 0;
pointer-events: none;
width: 10px;
height: 10px;
fill: none;
stroke: #6b7280;
stroke-width: 2;
}
/* Nút TÌM KIẾM */
.search-btn {
background-color: #d88a53;
color: #ffffff; /* Chữ trắng trên nút cam */
font-weight: bold;
font-size: 13px;
border: none;
border-radius: 6px;
padding: 10px 24px;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.2s;
}
.search-btn:hover {
background-color: #c77942;
}
/* Co giãn trên màn hình nhỏ */
@media (max-width: 768px) {
.search-bar {
flex-direction: column;
align-items: stretch;
}
.filters-box {
justify-content: space-between;
}
}

Dòng sản phẩm
TERRA-X LITE
TERRA-X CORE
TERRA-X PRO

Màu sắc
Savanna Trail
Canyon Earth
Midnight Forest

Size
38
39
40
41
42
43
44

TÌM KIẾM

/* =========================================================
TERRA-X PRODUCT SECTION
ONLINE VERSION
Font: Arial
========================================================= */
.terra-x-products {
width: 100%;
display: flex;
gap: 14px;
justify-content: center;
align-items: stretch;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.terra-x-products *,
.terra-x-products *::before,
.terra-x-products *::after {
box-sizing: border-box;
}
/* =========================================================
PRODUCT CARD
========================================================= */
.terra-card {
position: relative;
width: calc(33.333% – 10px);
min-height: 540px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 18px 15px 15px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.75);
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #ffffff;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
text-decoration: none;
}
/* =========================================================
DARK OVERLAY
========================================================= */
.terra-card::before {
content: “”;
position: absolute;
inset: 0;
background:
linear-gradient(
to bottom,
rgba(0,0,0,0.08) 0%,
rgba(0,0,0,0.10) 30%,
rgba(0,0,0,0.40) 65%,
rgba(0,0,0,0.84) 100%
);
z-index: 0;
pointer-events: none;
}
/* Nội dung nằm trên overlay */
.terra-card > * {
position: relative;
z-index: 2;
}
/* =========================================================
HOVER CARD
========================================================= */
.terra-card:hover {
transform: translateY(-6px);
box-shadow:
0 16px 35px rgba(0,0,0,0.40);
}
/* =========================================================
BACKGROUND — LITE
========================================================= */
.terra-lite {
background-image:
url(“https://terrax.infinityfreeapp.com/wp-content/uploads/2026/09/89def99f-ac3b-49c8-970b-91c1024231db.jpg”);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* =========================================================
BACKGROUND — CORE
========================================================= */
.terra-core {
background-image:
url(“https://terrax.infinityfreeapp.com/wp-content/uploads/2026/09/e5671e0d-3434-4af4-8c7d-d4327c249574.jpg”);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* =========================================================
BACKGROUND — PRO
========================================================= */
.terra-pro {
background-image:
url(“https://terrax.infinityfreeapp.com/wp-content/uploads/2026/09/4771726d-d053-44c5-91d6-2f6024226d8b.jpg”);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* =========================================================
TOP AREA
========================================================= */
.terra-top {
width: 100%;
}
/* =========================================================
BEST SELLER
========================================================= */
.terra-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 11px;
margin-bottom: 8px;
border-radius: 20px;
background: #D9822B;
color: #111111 !important;
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.4px;
text-transform: uppercase;
}
.terra-label.empty {
visibility: hidden;
}
/* =========================================================
PRODUCT TITLE
========================================================= */
.terra-title {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 29px;
line-height: 1.05;
font-weight: 800;
letter-spacing: 0.3px;
text-transform: uppercase;
color: #ffffff !important;
}
.terra-title span {
font-weight: 900;
}
/* =========================================================
SUBTITLE
========================================================= */
.terra-subtitle {
margin-top: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.4;
font-weight: 700;
letter-spacing: 0.25px;
text-transform: uppercase;
color: #ffffff !important;
}
/* =========================================================
MAIN VISUAL AREA
========================================================= */
.terra-image-box {
width: 100%;
height: 230px;
display: flex;
justify-content: center;
align-items: center;
margin: 4px 0 5px;
}
/* =========================================================
BOTTOM
========================================================= */
.terra-bottom {
width: 100%;
margin-top: auto;
}
/* =========================================================
VARIANTS
========================================================= */
.terra-variants {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 6px;
margin: 0 0 14px;
}
.terra-variant {
flex: 1;
min-width: 0;
text-align: center;
cursor: pointer;
}
/* =========================================================
SMALL SHOE IMAGE
========================================================= */
.terra-variant-image {
width: 100%;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 5px;
}
.terra-variant-image img {
width: 100%;
max-width: 105px;
height: 64px;
object-fit: contain;
display: block;
filter:
drop-shadow(
0 5px 5px rgba(0,0,0,0.55)
);
transition:
transform 0.25s ease;
}
.terra-variant:hover
.terra-variant-image img {
transform:
scale(1.12)
translateY(-3px);
}
/* =========================================================
COLOR NAME
========================================================= */
.terra-variant-name {
display: block;
margin: 0 0 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.2;
font-weight: 700;
white-space: nowrap;
color: #ffffff !important;
}
/* =========================================================
SIZE
========================================================= */
.terra-variant-size {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 1.2;
font-weight: 600;
color: #ffffff !important;
}
/* =========================================================
PRODUCT BUTTON
========================================================= */
.terra-button {
width: 100%;
min-height: 40px;
display: flex;
justify-content: center;
align-items: center;
gap: 9px;
border-radius: 4px;
border: 1px solid #ffffff;
background: rgba(0,0,0,0.25);
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
text-decoration: none;
transition:
background 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
cursor: pointer;
}
/* =========================================================
BUTTON ARROW
========================================================= */
.terra-button-arrow {
font-size: 17px;
line-height: 1;
color: #ffffff !important;
transition:
transform 0.25s ease;
}
/* =========================================================
BUTTON HOVER
========================================================= */
.terra-button:hover {
background: #D9822B;
border-color: #ffffff;
color: #ffffff !important;
transform: translateY(-2px);
}
.terra-button:hover
.terra-button-arrow {
transform: translateX(4px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.terra-x-products {
gap: 10px;
}
.terra-card {
min-height: 500px;
padding:
15px
11px
12px;
}
.terra-title {
font-size: 24px;
}
.terra-subtitle {
font-size: 8.5px;
}
.terra-image-box {
height: 205px;
}
.terra-variant-image {
height: 58px;
}
.terra-variant-image img {
height: 58px;
}
.terra-variant-name {
font-size: 8px;
}
.terra-variant-size {
font-size: 8px;
}
.terra-button {
font-size: 9px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.terra-x-products {
width: 100%;
flex-direction: column;
gap: 18px;
}
.terra-card {
width: 100%;
min-height: 550px;
padding:
20px
18px
16px;
}
.terra-title {
font-size: 29px;
}
.terra-subtitle {
font-size: 9px;
}
.terra-image-box {
height: 245px;
}
.terra-variant-image {
height: 70px;
}
.terra-variant-image img {
max-width: 120px;
height: 70px;
}
.terra-variant-name {
font-size: 10px;
}
.terra-variant-size {
font-size: 9px;
}
.terra-button {
min-height: 42px;
font-size: 10px;
}
}

BÁN CHẠY NHẤT

TERRA-X LITE

NHẸ HƠN · LINH HOẠT HƠN · SẴN SÀNG KHÁM PHÁ


Savanna Trail
× 38 – 44


Canyon Earth
× 38 – 44


Midnight Forest
× 38 – 44


XEM CHI TIẾT
→


★ BÁN CHẠY NHẤT

TERRA-X CORE

CÂN BẰNG · ỔN ĐỊNH · VƯỢT MỌI ĐỊA HÌNH


Savanna Trail
× 38 – 44


Canyon Earth
× 38 – 44


Midnight Forest
× 38 – 44


XEM CHI TIẾT
→


BÁN CHẠY NHẤT

TERRA-X PRO

MẠNH MẼ · BỀN BỈ · CHINH PHỤC GIỚI HẠN


Savanna Trail
× 38 – 44


Canyon Earth
× 38 – 44


Midnight Forest
× 38 – 44


XEM CHI TIẾT
→

/* =========================================================
TERRA-X – FEATURE BENEFITS
Nền trong suốt – Font Arial
Màu chủ đạo: Cam đất #D9822B
========================================================= */
.terra-benefits {
width: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
font-family: Arial, Helvetica, sans-serif;
background: transparent;
padding: 20px 0;
box-sizing: border-box;
}
/* ===== TỪNG Ô ===== */
.terra-benefit {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px 25px;
box-sizing: border-box;
}
/* ===== ĐƯỜNG PHÂN CÁCH ===== */
.terra-benefit:not(:last-child)::after {
content: “”;
position: absolute;
right: 0;
top: 12%;
height: 76%;
width: 1px;
background: rgba(217, 130, 43, 0.35);
}
/* ===== ICON ===== */
.terra-benefit-icon {
width: 68px;
height: 68px;
border: 1.5px solid #D9822B;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
box-sizing: border-box;
transition: all 0.3s ease;
}
/* ===== ICON SVG ===== */
.terra-benefit-icon svg {
width: 34px;
height: 34px;
stroke: #D9822B;
fill: none;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ===== HIỆU ỨNG HOVER ===== */
.terra-benefit:hover .terra-benefit-icon {
background: #D9822B;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(217, 130, 43, 0.20);
}
.terra-benefit:hover .terra-benefit-icon svg {
stroke: #ffffff;
}
/* ===== TIÊU ĐỀ ===== */
.terra-benefit-title {
margin: 0 0 7px;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
line-height: 1.3;
font-weight: 700;
color: #222222;
letter-spacing: 0.2px;
}
/* ===== MÔ TẢ ===== */
.terra-benefit-text {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
font-weight: 400;
color: #666666;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.terra-benefits {
grid-template-columns: repeat(5, 1fr);
padding: 15px 0;
}
.terra-benefit {
padding: 8px 12px;
}
.terra-benefit-icon {
width: 55px;
height: 55px;
margin-bottom: 13px;
}
.terra-benefit-icon svg {
width: 28px;
height: 28px;
}
.terra-benefit-title {
font-size: 13px;
}
.terra-benefit-text {
font-size: 11px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.terra-benefits {
grid-template-columns: repeat(2, 1fr);
row-gap: 25px;
padding: 20px 5px;
}
.terra-benefit {
padding: 8px 12px;
}
.terra-benefit:nth-child(2)::after,
.terra-benefit:nth-child(4)::after {
display: none;
}
.terra-benefit:nth-child(5) {
grid-column: 1 / -1;
}
.terra-benefit:nth-child(5)::after {
display: none;
}
.terra-benefit-icon {
width: 52px;
height: 52px;
margin-bottom: 10px;
}
.terra-benefit-icon svg {
width: 27px;
height: 27px;
}
.terra-benefit-title {
font-size: 13px;
}
.terra-benefit-text {
font-size: 11px;
}
}

ĐỘ BÁM VƯỢT TRỘI

Tối ưu cho mọi địa hình

BỀN BỈ & AN TOÀN

Chất liệu cao cấp

ÊM ÁI, THOẢI MÁI

Công nghệ đệm tiên tiến

THOÁNG KHÍ & CHỐNG NƯỚC

Giữ chân khô ráo

THIẾT KẾ BỀN VỮNG

Vì một hành tinh xanh

/* =========================================================
TERRA-X HERO BANNER
FINAL ONLINE VERSION
FONT: ARIAL
========================================================= */
.terra-x-banner {
width: 100%;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: #ffffff;
/* ẢNH NỀN ONLINE */
background-image: url(“https://terrax.infinityfreeapp.com/wp-content/uploads/2026/09/6354067a-ff6b-4027-b7a0-31cabb0b44ed.jpg”);
background-color: #333333;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
aspect-ratio: 1500 / 376;
}
/* =========================================================
OVERLAY
========================================================= */
.terra-x-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* =========================================================
ĐƯỜNG CHÉO Ở GIỮA
========================================================= */
.terra-x-diagonal {
position: absolute;
top: 0;
bottom: 0;
left: 49.1%;
width: 65px;
background: rgba(0, 0, 0, 0.58);
clip-path: polygon(
55% 0,
100% 0,
45% 100%,
0 100%
);
z-index: 1;
pointer-events: none;
}
/* =========================================================
BÊN TRÁI
========================================================= */
.terra-x-left {
position: absolute;
left: 5.25%;
width: 43%;
top: 50%;
transform: translateY(-53%);
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
z-index: 3;
text-shadow:
0 1px 3px rgba(0, 0, 0, 0.40);
}
/* =========================================================
HÀNH TRÌNH KHÔNG GIỚI HẠN
========================================================= */
.terra-x-small {
margin: 0 0 10px 0;
padding: 0;
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: clamp(11px, 1vw, 15px);
line-height: 1.2;
font-weight: 400;
letter-spacing: 3.5px;
text-transform: uppercase;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.30);
}
/* =========================================================
TIÊU ĐỀ CHÍNH
========================================================= */
.terra-x-title {
margin: 0 0 13px 0;
padding: 0;
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: clamp(28px, 2.75vw, 42px);
line-height: 1.04;
font-weight: 700;
letter-spacing: 0.1px;
text-transform: uppercase;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.38);
}
/* =========================================================
MÔ TẢ BÊN TRÁI
========================================================= */
.terra-x-desc {
margin: 0 0 24px 0;
padding: 0;
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: clamp(12px, 1.1vw, 17px);
line-height: 1.35;
font-weight: 400;
letter-spacing: 0;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.28);
}
/* =========================================================
NÚT KHÁM PHÁ NGAY
========================================================= */
.terra-x-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 205px;
height: 46px;
padding: 0 24px;
box-sizing: border-box;
border: 2px solid #ffffff;
border-radius: 7px;
background: rgba(0, 0, 0, 0.15);
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 14px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.2px;
text-decoration: none !important;
text-shadow: none;
transition:
all 0.25s ease;
}
.terra-x-btn:hover {
background: #ffffff;
color: #111111 !important;
}
.terra-x-btn-arrow {
margin-left: 17px;
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 21px;
line-height: 1;
transition:
transform 0.25s ease;
}
.terra-x-btn:hover .terra-x-btn-arrow {
color: #111111 !important;
transform: translateX(3px);
}
/* =========================================================
BÊN PHẢI
========================================================= */
.terra-x-right {
position: absolute;
left: 56%;
top: 50%;
width: 36%;
transform: translateY(-54%);
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
z-index: 3;
text-shadow:
0 1px 3px rgba(0, 0, 0, 0.38);
}
/* =========================================================
TERRA-X
========================================================= */
.terra-x-brand {
margin: 0 0 5px 0;
padding: 0;
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: clamp(25px, 2.4vw, 37px);
line-height: 1;
font-weight: 800;
font-style: italic;
letter-spacing: 0.3px;
text-shadow:
0 1px 3px rgba(0, 0, 0, 0.42);
}
/* =========================================================
CÔNG NGHỆ VƯỢT TRỘI
========================================================= */
.terra-x-subtitle {
margin: 0 0 25px 0;
padding: 0;
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: clamp(12px, 1.05vw, 16px);
line-height: 1.2;
font-weight: 700;
letter-spacing: 0;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.32);
}
/* =========================================================
FEATURE
========================================================= */
.terra-x-feature {
display: flex;
align-items: center;
margin: 0 0 13px 0;
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
}
/* =========================================================
ICON TRÒN
========================================================= */
.terra-x-icon {
width: 43px;
height: 43px;
min-width: 43px;
margin-right: 14px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: 2px solid #D9822B;
border-radius: 50%;
background: rgba(0, 0, 0, 0.25);
color: #ffffff !important;
box-shadow:
inset 0 0 7px rgba(0, 0, 0, 0.12),
0 1px 3px rgba(0, 0, 0, 0.25);
}
/* =========================================================
SVG ICON
========================================================= */
.terra-x-icon svg {
width: 21px;
height: 21px;
display: block;
stroke: #ffffff;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
NỘI DUNG FEATURE
========================================================= */
.terra-x-feature-content {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
/* =========================================================
TIÊU ĐỀ FEATURE
========================================================= */
.terra-x-feature-title {
margin: 0 0 4px 0;
padding: 0;
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: clamp(11px, 1.02vw, 15px);
line-height: 1.15;
font-weight: 400;
letter-spacing: 0.15px;
text-transform: uppercase;
white-space: nowrap;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.30);
}
/* =========================================================
MÔ TẢ FEATURE
========================================================= */
.terra-x-feature-desc {
margin: 0;
padding: 0;
color: rgba(255, 255, 255, 0.90) !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: clamp(10px, 0.88vw, 13px);
line-height: 1.2;
font-weight: 400;
letter-spacing: 0;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.25);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.terra-x-left {
left: 5%;
width: 44%;
top: 50%;
transform: translateY(-53%);
}
.terra-x-right {
left: 55.5%;
width: 39%;
top: 50%;
transform: translateY(-54%);
}
.terra-x-title {
font-size: 30px;
}
.terra-x-desc {
font-size: 13px;
margin-bottom: 18px;
}
.terra-x-btn {
min-width: 175px;
height: 40px;
font-size: 11px;
}
.terra-x-icon {
width: 37px;
height: 37px;
min-width: 37px;
margin-right: 10px;
}
.terra-x-icon svg {
width: 18px;
height: 18px;
}
.terra-x-feature {
margin-bottom: 9px;
}
.terra-x-feature-title {
font-size: 11px;
font-weight: 400;
}
.terra-x-feature-desc {
font-size: 10px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.terra-x-banner {
aspect-ratio: 900 / 620;
background-position: center center;
}
.terra-x-left {
left: 5.5%;
width: 53%;
top: 50%;
transform: translateY(-53%);
}
.terra-x-right {
left: 57%;
width: 40%;
top: 50%;
transform: translateY(-54%);
}
.terra-x-small {
font-size: 8px;
margin-bottom: 7px;
font-weight: 400;
letter-spacing: 2.5px;
}
.terra-x-title {
font-size: 21px;
line-height: 1.04;
margin-bottom: 9px;
font-weight: 700;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.35);
}
.terra-x-desc {
font-size: 8px;
margin-bottom: 12px;
}
.terra-x-btn {
min-width: 125px;
height: 32px;
padding: 0 12px;
border-width: 1px;
border-radius: 5px;
font-size: 8px;
}
.terra-x-btn-arrow {
margin-left: 8px;
font-size: 14px;
}
.terra-x-brand {
font-size: 19px;
}
.terra-x-subtitle {
font-size: 8px;
margin-bottom: 13px;
}
.terra-x-feature {
margin-bottom: 7px;
}
.terra-x-icon {
width: 27px;
height: 27px;
min-width: 27px;
margin-right: 6px;
border-width: 1px;
}
.terra-x-icon svg {
width: 13px;
height: 13px;
}
.terra-x-feature-title {
font-size: 7px;
font-weight: 400;
white-space: normal;
}
.terra-x-feature-desc {
font-size: 6.5px;
}
}

HÀNH TRÌNH KHÔNG GIỚI HẠN

BẠN ĐÃ SẴN SÀNG
KHÁM PHÁ?

TERRA-X – Đồng hành cùng bạn trên mọi cung đường.


KHÁM PHÁ NGAY
→



TERRA-X

CÔNG NGHỆ VƯỢT TRỘI

ĐẾ NGOÀI CHỐNG TRƯỢT
Bám đường tốt hơn


ĐỆM EVA CAO CẤP
Giảm chấn, êm ái


CHẤT LIỆU THOÁNG KHÍ
Giữ chân khô thoáng

/* =========================================================
TERRA-X – NEWSLETTER / EMAIL BANNER
Font: Arial
========================================================= */
.terra-email-banner {
width: 100%;
min-height: 390px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
/* =====================================================
ẢNH NỀN ONLINE
===================================================== */
background-color: #333333;
background-image: url(“https://terrax.infinityfreeapp.com/wp-content/uploads/2026/09/d587d331-da6a-4dc3-ad8b-3f34e8027fc0.jpg”);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-sizing: border-box;
}
/* =========================================================
LỚP PHỦ TỐI
========================================================= */
.terra-email-banner::before {
content: “”;
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.42);
z-index: 1;
}
/* =========================================================
NỘI DUNG
========================================================= */
.terra-email-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1150px;
padding: 50px 30px;
text-align: center;
color: #ffffff;
box-sizing: border-box;
}
/* =========================================================
TIÊU ĐỀ
========================================================= */
.terra-email-title {
margin: 0 0 22px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
line-height: 1.2;
font-weight: 400;
color: #ffffff;
letter-spacing: 0.3px;
}
/* =========================================================
MÔ TẢ
========================================================= */
.terra-email-description {
margin: 0 0 40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5;
font-weight: 400;
color: #ffffff;
}
/* =========================================================
FORM
========================================================= */
.terra-email-form {
width: 100%;
max-width: 1150px;
margin: 0 auto;
display: flex;
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}
/* =========================================================
Ô EMAIL
========================================================= */
.terra-email-input {
flex: 1;
width: 100%;
height: 62px;
padding: 0 25px;
border: none;
outline: none;
background: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 400;
color: #333333;
box-sizing: border-box;
}
.terra-email-input::placeholder {
color: #999999;
opacity: 1;
}
.terra-email-input:focus {
outline: none;
}
/* =========================================================
NÚT GỬI NGAY
========================================================= */
.terra-email-button {
width: 210px;
min-width: 210px;
height: 62px;
border: none;
background: #D9822B;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background 0.3s ease,
transform 0.2s ease;
box-sizing: border-box;
}
/* =========================================================
HOVER
========================================================= */
.terra-email-button:hover {
background: #BD6D20;
color: #ffffff;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.terra-email-banner {
min-height: 360px;
}
.terra-email-content {
padding: 45px 25px;
}
.terra-email-title {
font-size: 28px;
}
.terra-email-description {
font-size: 15px;
margin-bottom: 32px;
}
.terra-email-form {
max-width: 90%;
}
.terra-email-button {
width: 180px;
min-width: 180px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.terra-email-banner {
min-height: 420px;
background-position: center center;
}
.terra-email-content {
padding: 40px 20px;
}
.terra-email-title {
font-size: 25px;
margin-bottom: 16px;
}
.terra-email-description {
font-size: 14px;
line-height: 1.5;
margin-bottom: 28px;
}
.terra-email-form {
max-width: 100%;
flex-direction: column;
background: transparent;
overflow: visible;
gap: 10px;
box-shadow: none;
}
.terra-email-input {
width: 100%;
height: 55px;
border-radius: 12px;
font-size: 14px;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.15);
}
.terra-email-button {
width: 100%;
min-width: 100%;
height: 55px;
border-radius: 12px;
font-size: 14px;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.15);
}
}

NHẬP EMAIL

Để nhận tin tức khuyến mãi từ cửa hàng của chúng tôi

Gửi ngay