/*
Theme Name: D3V Templage
Theme URI: https://d3v.website/travel/
Author: d3v Team
Author URI: https://d3v.website/
Description: Designed and developed by d3v
Text Domain: d3v
Tags: thiet ke web, thiet ke web wordpress
*/
/* ======================================
 * FONTS
 * ====================================== */
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&family=Righteous&family=Goldman:wght@400;700&display=swap');
/**
 * GoogleSans Font Family
 * - Bộ font chính được sử dụng trong toàn bộ website
 * - Bao gồm các biến thể: Regular, Medium, Bold và Italic
 */
@font-face {
    font-family: 'GoogleSans';
    src: url('assets/fonts/GoogleSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Giúp tối ưu hiển thị font */
}
@font-face {
    font-family: 'GoogleSans';
    src: url('assets/fonts/GoogleSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GoogleSans';
    src: url('assets/fonts/GoogleSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GoogleSans';
    src: url('assets/fonts/GoogleSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'GoogleSans';
    src: url('assets/fonts/GoogleSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'GoogleSans';
    src: url('assets/fonts/GoogleSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
/* ======================================
 * CSS VARIABLES
 * ====================================== */
:root {
    --c-dark: #212529;
    --c-white: #fff;
    --c-primary: #004aad;
    --c-light: #f53d2d;
    --c-rgb: 238, 77, 45;
    --c-body: #727272;
    --bg-primary-gradient: linear-gradient(-180deg, #004aad, #1974ed);
    --heading-font: "GoogleSans", sans-serif;
    --body-font: "GoogleSans", sans-serif;
    --transition: all 0.5s ease;
}
/* ======================================
 * BASE STYLES
 * ====================================== */
body {
    font-family: var(--body-font);
    font-size: 17px;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}
/* ======================================
 * HEADER STYLES
 * ====================================== */
.header {
    background: var(--bg-primary-gradient);
}
/* ======================================
 * BUTTON STYLES
 * ====================================== */
.btn-brand {
    background: var(--c-brand);
}
.btn-brand:hover {
    background: var(--c-brand-light);
}
/* ======================================
 * BACKGROUND UTILITIES
 * ====================================== */
.bg-brand-gradient {
    background: var(--bg-primary-gradient);
}
/* ======================================
 * TYPOGRAPHY
 * ====================================== */
.heading {
    font-family: var(--heading-font);
}
.brand-primary-text { color: var(--c-primary); }
/* ======================================
 * COMPONENT: SCROLL TO TOP BUTTON
 * ====================================== */
.scroll-top {
    height: 60px;
    width: 60px;
    background-color: var(--c-primary);
    border-radius: 50%;
    position: fixed;
    bottom: 60px;
    right: 20px;
    transform: scale(0);
    display: grid;
    place-items: center;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
    z-index: 100;
}
.scroll-top.active {
    bottom: 80px;
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    animation: scroll-Top 500ms ease-in-out;
    transition: 0.3s;
}
.scroll-top-value {
    height: calc(100% - 6px);
    width: calc(100% - 6px);
    background-color: var(--c-primary);
    color: var(--c-white);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 600;
}
.scroll-top-value i {
    font-size: 20px;
}
/* ======================================
 * SECTION: IMAGE ASPECTS
 * ====================================== */
/*
 * Tỷ lệ khung hình
 * - Sử dụng aspect-ratio để duy trì tỷ lệ ảnh
 * - object-fit: cover để đảm bảo ảnh lấp đầy khung
 */
.img-1x1,
.img-1x2,
.img-2x1 {
    transition: 0.3s;
    object-fit: cover;
    object-position: center;
}
/* Tỷ lệ khung hình vuông hơi dẹt */
.img-1x1 {
    aspect-ratio: 1 / 0.8;
}
/* Tỷ lệ khung hình vuông */
.img-1x2 {
    aspect-ratio: 1 / 1;
}
/* Tỷ lệ khung hình ngang */
.img-2x1 {
    aspect-ratio: 1 / 0.7;
}
.title-limit {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em;
}