/**

 * Xuan Cuong Handicraft - Module: base.css

 * CSS Reset, Base Typography, Headings, Arrows & Containers

 */


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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    color: var(--xc-body-text);
    background-color: var(--xc-body-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    position: relative;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
strong,
span,
input,
select,
textarea,
button,
label {
    font-family: var(--font-main);
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Typography Helpers */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-main);
    font-weight: 700;
    line-height: 1.25;
}

.page-title {
    margin: 4.5rem 0 1.5rem;
}

/* ==========================================================================
   SECTION SUBTITLE / HEADING-SUB (Figma: Luxurious Script, 400, 52px, 100%, 1%, Center, #D6BF89)
   ========================================================================== */
.section-subtitle,
.script-accent-gold,
.script-accent-dark,
.script-accent-brown {
    font-family: var(--font-script, 'Luxurious Script', cursive);
    font-weight: 400;
    font-style: normal;
    font-size: var(--fs-script);
    line-height: 1;
    letter-spacing: 0.01em;
    display: block;
    margin-bottom: 0.25rem;
}

.section-subtitle,
.script-accent-gold {
    color: var(--brown, #534833);
}

.script-accent-dark {
    color: var(--xc-primary, #881111);
}

.script-accent-brown {
    color: #534833;
}

/* ==========================================================================
   SECTION TITLE (DESKTOP: FONT-WEIGHT 700, FONT-SIZE 52PX)
   ========================================================================== */
.section-title,
.materials-title,
.materialstitle,
.curated-title,
.workshop-title,
.workshop-vtv-title,
.partners-heading,
.rfq-headline,
.journal-title,
.process-heading,
.corporate-heading,
.story-main-title,
.team-title,
.projects-title,
.split-title,
.care-title,
.reviews-title,
.favorite-title,
.sale-main-title {
    color: var(--text-black, #1E262B);
    font-size: var(--fs-heading);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.container {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

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

/* ==========================================================================
   ARROWS (SVG Icon fill: currentColor)
   ========================================================================== */
.arrow,
.arrow-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    color: inherit;
    transition: transform 0.25s ease;
}

.arrow svg,
.arrow-symbol svg {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    flex-shrink: 0;
}

.arrow svg path,
.arrow-symbol svg path {
    fill: currentColor;
}

/* Tự động hiển thị mũi tên SVG chuẩn ngay cả khi thẻ <span class="arrow"> rỗng */
.arrow:empty,
.arrow-symbol:empty {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.175 9H0V7H12.175L6.575 1.4L8 0L16 8L8 16L6.575 14.6L12.175 9Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.175 9H0V7H12.175L6.575 1.4L8 0L16 8L8 16L6.575 14.6L12.175 9Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Hiệu ứng hover cho các link có mũi tên */
.link-view-all:hover .arrow,
.material-link:hover .arrow,
.promo-link:hover .arrow,
.link-promo:hover .arrow,
.btn-about-cta:hover .arrow,
.btn-story-red:hover .arrow,
.btn-hero-red:hover .arrow-symbol,
.btn-buy-red:hover .arrow {
    transform: translateX(4px);
}

/* Liên kết neo (#section) từ trang khác: chừa khoảng cho header cố định */
section[id],
div[id].page-faq {
    scroll-margin-top: 100px;
}