html {
  scroll-behavior: smooth; /* cuộn mượt */
}
body > footer,
body > header {
    background: var(--pico-card-background-color);
    box-shadow: var(--pico-card-box-shadow);
}

.gg-captcha-container {
    justify-content: center;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    margin: 1rem;
}
.show-xs {
    display: block;
}

.hide-xs {
    display: none;
}

/*HEADER*/
body > header {
    height: var(--mb-stick-height);
}
body > header nav ul li {
    padding: 10px 5px;
}
body > header nav svg  {
    height: 30px;
    width: 30px;
}

body > header nav ul li a[role=button] {
    margin-top: 0;
}
body > header nav ul li a[role=button]  span {white-space: nowrap;}
body > header nav a[role=button] svg {height: 20px; width: 20px;}
body > header nav summary > svg {height: 24px; width: 24px;}

main > aside nav details ul li a[aria-current] {
    border-color: var(--pico-primary);
    color: var(--pico-primary);
    font-weight: 600;
}

#formSearch input[type=search] {
    border-radius: 5px;
    padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
    background-image: var(--pico-icon-search);
    background-position: center left var(--pico-form-element-spacing-horizontal);
}



/*FOOTER*/
footer .container section:first-child nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

footer .container section:first-child nav ul:first-of-type {
    margin-left: 0;
}
body > footer aside nav  a {display:inline-block;}

/*MENU*/

body > main {
    padding-top: 70px;
}

.mslide {
    visibility: hidden; opacity: 0;
    position: fixed;
    top: var(--mb-stick-height);
    width: 100vw;
    height: 100vh;
    transition: transform .15s ease;
}

/* From Left */
.mslide.left { left: 0; transform: translateX(-100%); }
.mslide.left[open] { 
    transform: translateX(0); 
    visibility: visible;
    opacity: 1;
}

/* From Right */
.mslide.right { right: 0; transform: translateX(100%); }
.mslide.right[open] { 
    transform: translateX(0);
    visibility: visible;
    opacity: 1; 
}

#font-category {
    z-index: 5;
    background-color: var(--pico-background-color);
    background: var(--pico-card-background-color);
    box-shadow: var(--pico-card-box-shadow);
}


#font-category nav {
    max-height: calc(100vh - var(--mb-stick-height));
    overflow: auto;
    transition: top var(--pico-transition);
    transition-delay: 50ms;
    padding: 15px;
}

#font-category nav ul.show-xs {
    position: relative;
    margin-bottom: calc(var(--pico-spacing));
}

#font-category nav ul.show-xs .close-m-menu {
    position: absolute;
    right: 0;
    top: 0;
    color: var(--pico-secondary);
}

/*NAV*/
aside#font-category nav details a {text-decoration:none;}
aside#font-category nav details ul:first-of-type {margin:0 0 0 0; padding:0 0 0 0;}
aside#font-category nav details ul {
    margin-left: 0;
    padding-left: 0;
}
aside#font-category nav details ul li {
    padding: calc(var(--pico-nav-element-spacing-vertical) * .25) 1rem; 
    border-left: var(--pico-border-width) solid var(--pico-muted-border-color);
}
aside#font-category nav details ul li:hover {
    background: var(--pico-dropdown-hover-background-color);
}
aside#font-category nav details ul li.active {
    border-left: var(--pico-border-width) solid var(--pico-primary);
    background: var(--pico-dropdown-hover-background-color);
}
#font-category > nav summary > a {text-decoration: none;}
#font-category > nav > details {margin-bottom: calc(var(--pico-spacing) * 1.5);}

/* Mobile header fixed */
body > header {
    position: fixed;
    padding: 5px 0;
    z-index: 5;
    width: inherit;
}

/* Dropdown account in header - mobile layout */
body > header nav details.dropdown > summary.account {
    display: flex;
    height: auto;
}

/* Dropdown menu alignment */
details.dropdown[open] > summary.account + ul {
    left: auto;
    right: 0;
}


/** FILTER **/
aside.filters > nav > details summary {
    display: flex;
    justify-content: space-between;
    padding: 0;
}
aside.filters > nav > details summary > span.wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-basis: 100%;
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
}

aside.filters > nav > details summary > span.wrap strong {
    white-space: nowrap ;
}
aside.filters {
    z-index: 4;
    background-color: var(--pico-background-color);
    width: inherit;
    background: var(--pico-card-background-color);
    box-shadow: var(--pico-card-box-shadow);
    height:100vh;
}

aside.filters nav {
    overflow-y: auto;    
    overflow-x: hidden;
    max-height: calc(100vh - var(--mb-stick-height) - 50px);
}

aside.filters h5 {
   
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
    margin:0;
    display: flex;
    justify-content: space-between;
}
aside.filters details  {
    margin-bottom: 0;    
    background: var(--pico-dropdown-hover-background-color);
}
aside.filters details summary{
    display: block;
    padding: 0;
    background: var(--pico-dropdown-hover-background-color);
    border-bottom: 1px solid var(--pico-muted-border-color);
}

aside.filters details .sort-container {
    padding: 0 var(--pico-form-element-spacing-horizontal);
}

aside.filters details ul {
    padding: 0 var(--pico-form-element-spacing-horizontal);
}

aside.filters > nav > details summary > span.wrap .filter-selected {
    display: flex;
    flex-wrap: wrap;    

}

aside.filters > nav > details summary > span.wrap .filter-selected span {
    margin-left: 1rem;
}

aside.filters > nav > details ul li > a[aria-current=page] {
    background-color: var(--pico-mark-background-color);
    color: var(--pico-mark-color);
}


aside.filters > nav > details ul li > a .star-rating-wrapper {
    margin: auto 1rem;
    line-height: 24px;
    cursor: pointer;
}
aside.filters > nav > details ul li > a .star-rating-label,
aside.filters > nav > details ul li > a .star-rating-info,
aside.filters > nav > details ul li > a .star-rating-result {
    display: none;
}
aside.filters > nav > details ul li > a {
    display: flex;
    align-items: center;
}
aside.filters > nav > details ul li > a i {
    line-height: 24px;
}
aside.filters > nav > details ul li > a > span {
    white-space: nowrap;
    margin-left: 5px;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
aside.filters > nav > details ul li > a > span:last-of-type {
    text-align: right;
    flex-grow: 3;
    overflow: inherit;
}



nav[aria-label=breadcrumb] ol {
    overflow-x: auto;
    display: flex;
}
nav[aria-label=breadcrumb] ol li {
    white-space: nowrap;
}
nav[aria-label=breadcrumb] ol li:not(:last-child)::after {
    position: inherit;
    margin: 0 -30px 0 -15px;
}
nav[aria-label=paging] {
    padding: var(--pico-nav-element-spacing-horizontal) 0;
    overflow-x: auto;
    justify-content: center;
}
nav[aria-label=paging] ul  {
    margin-left: 0;
    margin-right: 0;
}
nav[aria-label=paging] ul li {
    padding: calc(var(--pico-nav-element-spacing-horizontal) * 0.75);
    display: none;
}
nav[aria-label=paging] ul li.page-s {display: inline-block;}

nav[aria-label=paging] ul li a {
    padding: calc(var(--pico-nav-element-spacing-horizontal) * 0.5) calc(var(--pico-nav-element-spacing-horizontal) * 1.5);
}
nav[aria-label=paging] ul li a span {display: none;}
nav[aria-label=paging] ul li a span.page-s {display: inline-block;}

.head-n-filter {
    display: flex;
    justify-content: space-between;
}

.button-more a[role=button] {
    padding: calc(var(--pico-form-element-spacing-vertical) * 0.6) var(--pico-form-element-spacing-horizontal);
}


.font-item {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns:1fr min(8rem, 8rem) ;
    grid-template-areas: 
    "title meta"
    "image meta";
    margin: 1rem auto;
    border-bottom: 1px solid var(--pico-muted-border-color);
}
.font-item:last-of-type {
    border-bottom: none;
}
.font-item p {
    grid-area: title;
    margin: 0;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
    padding-top: 0;
    line-height: 1;
    min-height: 1.9rem;
    overflow: hidden;
}

.font-item .font-image {
    grid-area: image;
    min-height: fit-content;
}

.font-item .font-image a {
    display: block;
    border: 1px solid transparent;
}

.font-item .font-image a:hover  {
    border: var(--pico-border-width) solid var(--pico-secondary-hover);
}

.font-item .font-meta {
    grid-area: meta;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: self-end;
}
.font-item .font-meta .font-stats span {
    display: inline-flex;
    margin-left: 0rem;
    align-items: center;

    background: var(--pico-form-element-background-color);
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    color: var(--pico-secondary);
    display: inline-block;
    width: max-content; 
    padding: 2px 3px;
    border-radius: 5px;  
    font-size: 0.8em;
}
.font-item .font-meta .font-stats span i {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}
.font-item .font-meta .show-rate-list.star-rating-wrapper {
    margin: 0;
}
.font-item .font-meta .show-rate-list .star-rating-stars {
    font-size: 0.8rem;
}

.font-item .font-meta .licenses {
    background: var(--pico-form-element-background-color);
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    color: var(--pico-secondary);
    display: inline-block;
    width: max-content; 
    padding: 3px 6px;
    border-radius: 5px;
    margin-bottom: 0.3rem;
    font-size: 0.9em;
}

body > main.layout-home {
    display: grid;
    grid-template-columns: minmax(0,1fr);
}

body > main.layout-home .home-wiget {
    min-width: 0;
    align-self: start; 
    min-height: fit-content;
}

.font-item .font-image img {
     aspect-ratio: 20 / 3;
}


main.layout-details {
    display: grid;
    grid-template-columns: minmax(0,1fr);
}

.font-details .heading {
    margin-bottom: 0.5rem;
}

.font-summary {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
}
.font-summary > div {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
}
.font-summary > div:nth-child(2n+1) {
    padding-right: 1rem;
}

.font-summary > .star-rating-wrapper {
    margin: -10px 0 0 0;
}
.font-summary > .grid-stats {
    display: grid;    
    overflow: hidden;
    grid-template-columns:auto auto;
    justify-content: space-between;
}



.font-archive {
    display: grid;
    max-width: 100%;
    grid-template-columns: 2rem auto auto 3.5rem;
    grid-template-rows: 1fr;
}
.font-archive > span,
.font-archive > a,
.font-archive > strong {
    justify-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    align-content: center;
}
.font-archive .idx {
    white-space: nowrap;
}
.font-archive > .filename {
    white-space: nowrap;
    overflow: hidden;
}
.font-archive > span a[role=button] {
    padding: 0.2rem 0.5rem;
}

a[role=button].is-favorite {
    --pico-background-color: var(--pico-primary-background);
    --pico-border-color: var(--pico-primary-border);
    --pico-color: var(--pico-primary-inverse);
    --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
}

.pre-css {position: relative;}
.pre-css button {position: absolute; top: 5px; right: 5px;}

.table-chars-r {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 1rem;
    margin-bottom: 4rem;
}

.table-chars-r > div {
    border: 1px solid var(--pico-muted-border-color);
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    container-type: size;
    background: #fafafa;
}

.table-chars-r > div .label {
    position: absolute;
    top: 0;
    right: 5px;
}

.table-chars-r > div .preview {
    font-size: 70cqw;
    padding-left: 0.5rem;
}


.table-of-content {
    right:0;
    padding-bottom:0;
    display:none;
}

.table-of-content #toc {
    position:sticky;
    top: calc(var(--desktop-stick-height) + 15px);
}

.table-of-content nav summary {
    margin-bottom: 8px;
}

.table-of-content #toc ol li {
    border-left: var(--pico-border-width) solid var(--pico-muted-border-color);
}

.table-of-content #toc ol li {
    margin: 0 0 0 1rem;
    padding: calc(var(--pico-nav-element-spacing-vertical) * .25) 0;
    padding-left: 1rem;
}

.table-of-content #toc ol li.active {
border-left: var(--pico-border-width) solid var(--pico-primary);
}
.table-of-content #toc ol li.active a{
    color: var(--pico-primary);
    font-weight: bold;
}

.font-item .font-meta span.font-stats {display:flex;}

.font-item .font-meta span.font-stats > span {margin-left:3px;}
/* -----------------------------------------
   BREAKPOINTS - MOBILE FIRST
   -------------------------------------- */

/* ≥ 576px: tablet / small desktop */
@media (min-width: 576px) {

    /* Header */
    body > header {
        top:0;
    }

   
    nav[aria-label=paging] ul li.page-l {display: inline-block;}

    nav[aria-label=paging] ul li a span.page-l {display: inline-block;}

    body > header nav ul li a[role=button] {
        display: flex;
        margin-top: 0px;
    }
    body > header  nav svg {height: 24px; width: 24px; margin-right: 5px;}

    body > header > div > nav > ul:last-of-type {flex-grow: 3;}
    body > header > div > nav > ul:last-of-type li:first-of-type {flex-grow: 3;}
    /* Account summary */
    body > header nav details.dropdown > summary.account {
        height: auto;
        gap: 5px;
    }

    body > main.layout-home {
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
        "box box" 
        "box box";

    }
    
    .font-details .heading {
        display: flex;
        justify-content: space-between;
    }
    .font-details .heading a[role=button] span {
        display: none;
    }
    
    .table-chars-r {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}

/* ≥ 1024px: desktop */
@media (min-width: 1024px) {
    
     body > main.layout-home {
        grid-template-columns: 15rem minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: 
        "menu box box" 
        "menu box box";

    }

    /*  mobile */
    .show-xs {
        display: none;
    }

    .hide-xs {
        display: block;
    }
    body > header > div > nav > ul:last-of-type {flex-grow: inherit;}
    body > header > div > nav > ul:last-of-type li:first-of-type {flex-grow: inherit;}

    .desktop-small-content-center {width: 50%; margin: auto auto;}


    /*FOOTER*/
    footer .container section:first-child nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

     #menuFilters {
        position: sticky;
        transform: unset;
        opacity: inherit;
        visibility: inherit;
        height: auto;
        top: calc(var(--mb-stick-height));
    }
    #font-category nav 
    {
        position: sticky;
        top: calc(var(--desktop-stick-height) + 15px);
    }
    aside.filters {
        background: none;
        box-shadow:none;
    }
    aside.filters nav
    {
        display: flex;
        justify-content: flex-start;
        overflow: visible;
        max-height: none;
        position: relative;
        border: 1px solid var(--pico-form-element-border-color);
    }
    .head-n-filter a[data-toggle=menuFilters],
    #menuFilters h5,
    #menuFilters nav details > ul,
    #menuFilters nav details > div {
        display: none;
    }
    #menuFilters nav details summary::after {display: none;}
    #menuFilters nav details summary {
        display: block;
    }

   
    #menuFilters nav details[open] > ul,
    #menuFilters nav details[open] > div {
        display: grid;
        position: absolute;
        background: var(--pico-background-color);
        box-shadow: var(--pico-box-shadow);
        margin-right: 0;
        margin-left: 0;
        padding: calc(var(--pico-nav-element-spacing-horizontal) * 1);
    }
    #menuFilters nav details {
        flex-grow: 2;
    }
    #menuFilters nav details summary{
        margin-bottom: 0;
        border: none;
        border-right: 1px solid var(--pico-form-element-border-color);
        min-height: 100%;
    }

    #menuFilters nav details[open] summary {
        background: var(--pico-background-color);
    }

    #menuFilters nav details:last-of-type summary{
        border-right: none;
    }
    #menuFilters nav ol:first-of-type, 
    #menuFilters nav ul:first-of-type {
        margin-left: 0;
    }

    #menuFilters nav details.fgrid_4 ul 
    {
        width: 100%;
        left: 0;
        column-gap: 10px;
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    #menuFilters nav details:last-of-type ul {
        right: 0;
    }

    #font-category {
        position: relative;
        display: inline;
        visibility: inherit;
        transition: none;
        transform: none;
        opacity: 1;
        grid-area: menu;
        width: inherit;
        position: inherit;
        z-index: 1;
        box-shadow:none;
        background: none;
        height: inherit;
    }
    
    .head-n-filter {
        grid-area: header;
    }

    #menuFilters {
        grid-area: filter;
    }

    .font-lists {
        grid-area: body;
    }
    nav[aria-label=paging] {
        grid-area: paging;
    }

    body > main {
        display: grid;
        column-gap: 1rem;
        row-gap: 1rem;
        padding-top: 1rem;
        margin-bottom: calc(var(--pico-spacing) * 4);
        margin-top: calc(var(--mb-stick-height) + 0.5rem);
    }


    body > main.layout-lists {
        grid-template-rows: auto 1fr;
        grid-template-columns: 13.8rem 1fr 1fr 14rem;
        grid-template-areas: 
        "menu breadcrumb ad ad"
        "menu header ad ad"
        "menu filter filter filter"
        "menu body body rcontent"
        "menu paging paging paging";
        align-content: start;
    }


    body > main.layout-lists .topad
    {
        grid-area:  ad;
    }

     body > main.layout-lists nav[aria-label=breadcrumb] {
        grid-area:  breadcrumb;
        align-self: start;
     }

    body > main.layout-lists .rcontent {
        grid-area:  rcontent;
    }

    body > main.layout-lists .rcontent > div.rcontent-wrapper 
    {
        position: sticky;
        top: calc(var(--desktop-stick-height) + 40px);
    }
    body > main.acccount-layouts {
        grid-template-columns: 15rem 1fr;
        grid-template-areas:  "nav content"
    }

    main.acccount-layouts .navigation {
        grid-area: nav;
    }

    main.acccount-layouts .main-account {
        grid-area: content;
    }
    


    .account-manager {
        display: grid;
        padding:2rem  4rem;
        grid-template-columns: 5fr 3fr;
        column-gap: 4rem;
    }


    .font-item .font-image img {
        aspect-ratio: 20 / 3;
    }

    
    
    main.layout-details {
        grid-template-columns: 13.8rem minmax(0, 1fr) 12rem;
        grid-template-areas: 
        "menu breadcrumb tablecontent" 
        "menu box tablecontent";
    }

    main.container  #font-category
    {
       grid-area:menu;
    }

    main.container nav[aria-label=breadcrumb] 
    {
        grid-area:breadcrumb;
    }

    main.layout-details .font-details
    {
        grid-area:box;
    }

     main.container .table-of-content 
    {
        grid-area:tablecontent;
        display:block;
        position: relative;
    }
    main.container .table-of-content li {
        display: block;
    }

    .table-chars-r {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
    }

    body > main.layout-page
    {
        grid-template-rows: auto 1fr;
        grid-template-columns: 13.8rem 1fr 18rem;
        grid-template-areas: 
        "menu breadcrumb breadcrumb"
        "menu page page";
        align-content: start;
    }
    body > main.layout-page article.page
    {
        grid-area:page;
    }
    body > main.layout-page:has(.table-of-content) {
         grid-template-areas: 
         "menu breadcrumb breadcrumb"
        "menu page tablecontent";
    }

}

@media (min-width: 1280px) {
    
    #menuFilters nav details.fgrid_4 ul 
    {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }
     .font-details .heading a[role=button] span {
        display: inline-block;
    }

    .summary-container {
        display: grid;
        grid-template-columns: auto 22rem;
        column-gap: 1rem;
    }
    .table-chars-r {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}
@media (min-width: 1536px) {
 
}