/* CSS tổng thể: * , html, header, header_container, logo, ul, a */
* {
    margin: 0;
    padding: 0
}
html {
    font-size: 62.5%;
    font-family: Arial, sans-serif;
    color: #333333
}
header {
    font-size: 1.8rem
}
.header_container {
    box-sizing: border-box;
    border-bottom: 0.1rem solid #dddddd;
    max-width: 120rem;
    padding: 0.8rem 0;
    margin: 0 auto
}
.header_logo {
    width: 3.8rem;
    margin-left: 1.2rem;
    margin-right: 1.5rem;
    border-radius: 0.8rem;
    vertical-align: middle
}
.navigation_container ul {
    list-style-type: none
}
.navigation_container a {
    text-decoration: none;
    color: #333333;
    transition: color .2s ease-out
}


/* CSS Main menu items */
/* Đặt inline-block để tất cả nằm ngang trên 1 hàng */
.navigation_container,
.nav_main {
    display: inline-block;
    vertical-align: middle
}
.nav_main {
    text-decoration: none
}
.nav_item {
    padding: .6rem 0;
    margin-left: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    position: relative
}
/* Icon mũi tên xuống */
.triangle_icon--down {
    color: #555555;
    font-size: 1rem;
    display: inline-block;
    vertical-align: middle;
    padding-left: 0.3rem;
    padding-right: 1.5rem;
    margin-top: -0.3rem;
}
/* Transition khi hover (đổi màu và underline) */
.nav_item:hover > a,
.nav_item:hover .triangle_icon--down {
    color: #d62828
}
.nav_item > a::before {
    content: "";
    width: calc(100% - 1.5rem); /* Trừ padding của icon mũi tên */
    height: .2rem; /* Underline 2px khi hover */
    bottom: 0;
    left: 0;
    background-color: #d62828;
    position: absolute;
    opacity: 0;
    transition: opacity .2s ease-in
}
.nav_item:hover > a::before {
    opacity: 1
}
/* Làm cầu giả để khi rê chuột xuống khoảng trống giữa item và dropdown không bị mất hover effect */
.nav_item::before {
    content:"";
    width: calc(100% + 2rem);
    height: 2rem;
    position: absolute;
    top: 90%;
    left: -1rem;
    background-color: transparent
}


/* CSS Submenu cấp 1 */
.nav_submenu {
    position: absolute;
    top: calc(100% + 0.2rem);
    min-width: 20rem;
    border: 0.1rem solid #dddddd;
    background-color: #ffffff;
    display: none
}
.nav_submenu_item {
    /* Padding theo đề là 6px trên dưới và khoảng cách là 25px giữa các item nên phải dùng margin,
    tuy nhiên padding 6px theo trải nghiệm cá nhân là hơi nhỏ nên xin phép bỏ margin và dùng padding
    12.5px cho top và bottom để đảm bảo khoảng cách 25px */
    padding: 1.25rem 1rem;
    position: relative;
    cursor: pointer;
    transition: background-color .2s ease-in
}
/* Icon mũi tên phải */
.triangle_icon--right {
    color: #777777;
    font-size: 1rem;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 0;
    padding-right: 1.5rem
}
/* Hover (hiển thị dropdown, đổi màu chữ và nền) */
.nav_submenu_item:hover {
    background-color: #f5f5f5
}
.nav_submenu_item:hover .triangle_icon--right,
.nav_submenu_item:hover > a {
    color: #d62828
}
.nav_item:hover > .nav_submenu {
    display: block
}


/* CSS Submenu cấp 2 */
.nav_submenu_expand {
    display: none;
    position: absolute;
    min-width: 20rem;
    left: 20rem;
    top: 0rem;
    background-color: #ffffff;
    border: 0.1rem solid #dddddd
}
.nav_submenu_expand_item {
    padding: 1.25rem 1rem;
    transition: background-color .2s ease-in
}
/* Hover (hiển thị side-expand-menu, đổi màu chữ và nền) */
.nav_submenu_item:hover .nav_submenu_expand {
    display: block
}
.nav_submenu_expand_item:hover {
    background-color: #f5f5f5
}
.nav_submenu_expand_item:hover > a {
    color: #d62828
}