@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap');
@font-face {
    font-family: 'IvyOra Text';
    src: url('../fonts/IvyOraText-Light.eot');
    src: 
        url('../fonts/IvyOraText-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/IvyOraText-Light.woff2') format('woff2'),
        url('../fonts/IvyOraText-Light.woff') format('woff'),
        url('../fonts/IvyOraText-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IvyOra Text';
    src: url('../fonts/IvyOraText-LightItalic.eot');
    src: 
        url('../fonts/IvyOraText-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/IvyOraText-LightItalic.woff2') format('woff2'),
        url('../fonts/IvyOraText-LightItalic.woff') format('woff'),
        url('../fonts/IvyOraText-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter18pt-Light.woff2') format('woff2'),
        url('../fonts/Inter18pt-Light.woff') format('woff'),
        url('../fonts/Inter18pt-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter18pt-Regular.woff2') format('woff2'),
        url('../fonts/Inter18pt-Regular.woff') format('woff'),
        url('../fonts/Inter18pt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root {
    --font-size-base: 16px;
    --font-size-h0: min(max(50px, calc(2.25rem + (155 - 50) * ((100vw - 768px) / (1200 - 768)))), 155px);
    --font-size-h1: min(max(30px, calc(2.25rem + (60 - 30) * ((100vw - 768px) / (1200 - 768)))), 60px);
    --font-size-h2: min(max(30px, calc(2.25rem + (70 - 17) * ((100vw - 768px) / (1200 - 768)))), 70px);
    --font-size-h3: min(max(30px, calc(1.5625rem + (50 - 25) * ((100vw - 768px) / (1200 - 768)))), 50px);
    --font-size-h4: min(max(30px, calc(1.125rem + (35 - 30) * ((100vw - 768px) / (1200 - 768)))), 35px);
    --font-size-h5: min(max(30px, calc(1.125rem + (40 - 30) * ((100vw - 768px) / (1200 - 768)))), 40px);
    --color-text: #2D2D2D;
    --color-background: #F1F0ED;
    --color-white: #fff;
    --font-family-base: 'Inter', sans-serif;
    --font-family-heading: 'IvyOra Text', sans-serif;
}

body{
  background: var(--color-background);
  overflow-x: hidden;
}

main#main, #wpadminbar {
    overflow: hidden;
}

.container {
    max-width: 1400px;
    padding: 0 20px;
    margin: 0 auto;
}

* {
    box-sizing: border-box;
}
html, html body,
html p, html .p, html li, html textarea, html input, html select {
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    color: var(--color-text);
    letter-spacing: 0;
    font-weight: 300;
    line-height: 22px;
    border: 0;
    margin: 0;
}

h1, .h1{
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h1);
    line-height: 1.16;
    letter-spacing: 0;
    font-weight: 300;
    text-transform: capitalize;
    border: 0;
}

h2, .h2{
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    line-height: 1.11;
    letter-spacing: 0;
    font-weight: 300;
    border: 0;
}


h3, .h3{
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h3);
    line-height: 1.2;
    letter-spacing: 0;
    border: 0;
    letter-spacing: 0;
    font-weight: 300;
}

h4, .h4{
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h4);
    border: 0;
    letter-spacing: 0;
    font-weight: 300;
    line-height: 1.14;
}

h5, .h5{
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h5);
    border: 0;
    line-height: 1.25;
    letter-spacing: 0;
    font-weight: 300;
}

h6, .h6 {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    color: rgba(45, 45, 45, 0.3);
    margin: 0 0 4px;
}
.link {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    color: var(--color-text);
    text-decoration: none;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(45, 45, 45, 0.1);
    display: inline-block;
    position: relative;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;           /* chỉ vẽ 1 lần */
    background-position: 0 100%;            /* căn dưới cùng (bottom) */
    background-size: 0% 1px;                /* ẩn ban đầu: width=0%, height=2px */
    transition: background-size 1s ease;
    padding-right: 40px;
    min-width: 98px;
    cursor: pointer;
}

.link:hover {
  background-size: 100% 1px;              /* khi hover, line chạy full width */
}

.link:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    margin: 0 12px 0 4px;
    position: absolute;
    top: 9px;
    left: 3px;
    transition: all 1s;
}

.link:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    position: absolute;
    top: 9px;
    right: 7px;
    opacity: 0;
    transition: all 1s;
}

.link:hover .text {
    transform: translateX(7px);
}

.link .text {
    display: inline-block;
    transform: translateX(30px);
    transition: all 1s;
}
.link:hover:before {
    opacity: 0;
}

.link:hover::after {
    opacity: 1;
}

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

@media (min-width: 768px){
    .large-hide{
        display: none !important;
    }
}
@media (min-width: 1600px){
    .container {
        max-width: 1650px;
    }
    .header-inner.container, .footer .container  {
        max-width: 1886px;
    }
}
@media (max-width: 767px){

.small-hide{
    display: none !important;
}
.link:not(:hover) .text {
    transform: translateX(25px);
}  
h4, .h4, h1, .h1 {
    line-height: 1.26666666667;
    text-transform: initial;
}
h3, .h3, h2, .h2, h5, .h5{
    text-transform: initial;
}
}