:root {
    --calm-bg: #f6f4ef;
    --calm-surface: #fffdf9;
    --calm-surface-soft: #f0f6f3;
    --calm-line: #dbe5df;
    --calm-text: #263530;
    --calm-muted: #6e7f78;
    --calm-accent: #4d8f82;
    --calm-accent-dark: #2f6f66;
    --calm-accent-soft: #dcece6;
    --calm-warm: #b88a57;
    --calm-shadow: 0 14px 34px rgba(40, 58, 51, 0.11);
}

html,
body {
    min-height: 100%;
}

html {
    background: var(--calm-bg);
    background-image: none;
}

body {
    background: var(--calm-bg);
    color: var(--calm-text);
    font-family: 'Kanit', sans-serif;
    line-height: 1.65;
}

a {
    color: var(--calm-accent-dark);
}

a:hover,
a:focus {
    color: var(--calm-accent);
    text-decoration: none;
}

#menu-space {
    margin-bottom: 76px !important;
}

#main-nav.floating,
.floating {
    background: rgba(255, 253, 249, 0.94);
    border-bottom: 1px solid rgba(219, 229, 223, 0.88);
    box-shadow: 0 10px 28px rgba(41, 55, 49, 0.1);
    backdrop-filter: blur(10px);
}

#top-menu,
#second-nav,
.tiny-nav,
.navbar-default {
    min-height: 64px;
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
}

#top-menu .container-fluid {
    max-width: 1170px;
}

.navbar-header .logo img,
#top-menu .logo img,
.header-xs .logo img {
    height: 40px !important;
    width: auto;
}

#top-menu .navbar-nav > li > a,
#top-menu a,
#second-nav a,
.tiny-nav a {
    color: var(--calm-text);
    text-shadow: none;
}

#top-menu .navbar-nav > li > a {
    margin: 11px 3px;
    padding: 9px 10px;
    border-radius: 8px;
    line-height: 1.35;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

#top-menu .navbar-nav > li > a:hover,
#top-menu .navbar-nav > li > a:focus,
#top-menu .navbar-nav > .open > a,
#top-menu .navbar-nav > .open > a:hover,
#top-menu .navbar-nav > .open > a:focus {
    background: var(--calm-accent-soft);
    color: var(--calm-accent-dark);
}

#top-menu .navbar-right > li > a {
    color: var(--calm-accent-dark);
}

@media only screen and (min-width: 768px) {
    #top-menu #menu-collapse {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    #top-menu #menu-collapse > .navbar-nav {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        float: none;
    }

    #top-menu .main-nav-links {
        min-width: 0;
    }

    #top-menu .desktop-auth-nav {
        margin-left: 16px;
        flex: 0 1 auto;
        min-width: 0;
    }

    #top-menu .desktop-auth-nav > li {
        min-width: 0;
    }

    #top-menu .desktop-auth-link {
        max-width: 280px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

#top-menu .navbar-toggle,
.header-xs .navbar-toggle,
#top-menu button {
    border: 1px solid var(--calm-line);
    background: var(--calm-surface);
    border-radius: 8px;
    box-shadow: none;
}

#top-menu .navbar-toggle:hover,
#top-menu .navbar-toggle:focus,
.header-xs .navbar-toggle:hover,
.header-xs .navbar-toggle:focus {
    background: var(--calm-accent-soft);
}

.header-xs .row,
.header-xs .rowz {
    background: var(--calm-surface) !important;
    border-bottom: 1px solid var(--calm-line);
}

.header-xs .btn,
.header-xs .main-login-button {
    color: var(--calm-accent-dark);
    background: var(--calm-accent-soft);
    border: 1px solid var(--calm-line);
    border-radius: 8px;
}

.header-xs .header-xs-auth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

.header-xs .btn:hover,
.header-xs .btn:focus,
.header-xs .main-login-button:hover,
.header-xs .main-login-button:focus {
    color: var(--calm-accent-dark);
    background: #edf7f3;
    border-color: var(--calm-line);
    text-decoration: none;
}

#wrap-shadow {
    max-width: 1170px;
    background: transparent;
    box-shadow: none;
}

#wrap-shadow > .row,
.row {
    background: transparent !important;
}

#main-content-news-update {
    padding-bottom: 16px;
}

#main-form-search-min {
    margin-bottom: 16px;
}

.top-category-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    height: auto;
    margin-top: 10px !important;
    margin-bottom: 16px;
    padding: 0 18px;
    background: linear-gradient(135deg, var(--calm-accent-dark), var(--calm-accent));
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(47, 111, 102, 0.18);
}

.top-category-bar > span,
.top-category-bar .navbar-brand {
    float: none;
    height: auto;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.35;
}

.top-category-bar a {
    color: #fff;
}

.top-category-bar a:hover,
.top-category-bar a:focus {
    color: #eef9f5;
    text-decoration: underline;
}

.main-search_item {
    min-height: 150px;
    height: auto;
    margin-bottom: 18px;
    padding: 14px 16px 14px 142px;
    overflow: hidden;
    background: var(--calm-surface);
    border: 1px solid var(--calm-line);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(41, 55, 49, 0.08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.main-search_item:hover {
    transform: translateY(-2px);
    border-color: #bfd7cd;
    box-shadow: var(--calm-shadow);
}

.search-content-left {
    top: 14px;
    left: 14px;
}

.search-content-left img {
    width: 108px;
    height: 122px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(38, 53, 48, 0.16);
}

.search-story-left-entry,
.top-story-left-entry_date {
    width: 108px;
    color: #fff;
    background: rgba(38, 53, 48, 0.62);
}

.search-story-left-entry {
    border-radius: 8px 8px 0 0;
}

.top-story-left-entry_date {
    border-radius: 0 0 8px 8px;
}

.search-content-right {
    min-height: 122px;
    padding-top: 4px;
}

.search-content-right .story_name,
.search-content-right .chapter_name,
.search-content-right .writer_name,
.search-content-right .category_name {
    height: auto;
    line-height: 1.5;
}

.search-content-right .story_name a {
    color: var(--calm-text);
    font-size: 18px;
    font-weight: 600;
}

.search-content-right .chapter_name {
    margin-top: 10px;
    color: var(--calm-muted);
    font-size: 15px;
}

.search-content-right .chapter_name a,
.search-content-right .writer_name a,
.search-content-right .category_name a {
    color: var(--calm-accent-dark);
}

.search-content-right .story_name a:hover,
.search-content-right .chapter_name a:hover,
.search-content-right .writer_name a:hover,
.search-content-right .category_name a:hover {
    color: var(--calm-accent);
    text-decoration: none;
}

.last-access-card {
    padding: 14px 18px;
    background: var(--calm-accent-dark);
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(47, 111, 102, 0.18);
}

.last-access-card a,
.last-access-card a:hover,
.last-access-card a:focus {
    color: #f2fffb;
    padding: 0;
}

.last-access-card h4 {
    margin: 0 0 6px;
    font-size: 18px;
}

#main-story-content {
    margin-bottom: 18px;
    padding: 22px;
    background: var(--calm-surface);
    border: 1px solid var(--calm-line);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(41, 55, 49, 0.08);
}

#story-content {
    background: transparent;
    color: var(--calm-text);
}

#story-content img {
    max-height: 420px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(38, 53, 48, 0.16);
}

#story-content p {
    margin-bottom: 12px;
}

.btn-x,
.previous,
.next {
    display: inline-block;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--calm-accent-dark), var(--calm-accent));
    box-shadow: 0 10px 22px rgba(47, 111, 102, 0.18);
    color: #fff;
    font-size: 18px;
    text-align: center;
    text-transform: none;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn-x:hover,
.btn-x:focus,
.previous:hover,
.previous:focus,
.next:hover,
.next:focus {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #285d55, var(--calm-accent-dark));
    box-shadow: var(--calm-shadow);
    color: #fff;
}

.main-list-chapter {
    margin-top: 18px;
    font-size: 15px;
}

.main-list-chapter .table {
    overflow: hidden;
    background: var(--calm-surface);
    border: 1px solid var(--calm-line);
    border-radius: 8px;
}

.main-list-chapter #title-bar {
    background: var(--calm-accent-dark);
}

.main-list-chapter #tbody {
    background: var(--calm-surface);
}

.main-list-chapter .table > tbody > tr > td,
.main-list-chapter .table > thead > tr > th {
    border-color: var(--calm-line);
    vertical-align: middle;
}

.main-list-chapter .content {
    color: var(--calm-accent-dark);
}

#main-footer {
    margin-top: 28px;
    padding: 22px 18px;
    background: var(--calm-surface-soft);
    border-top: 1px solid var(--calm-line);
    border-radius: 8px 8px 0 0;
    color: var(--calm-muted);
}

#main-footer .row {
    background: transparent !important;
}

#content-footer,
#content-footer-min {
    color: var(--calm-muted);
}

#content-footer a,
#content-footer-min a,
#main-footer a {
    color: var(--calm-accent-dark);
}

hr {
    border-top-color: var(--calm-line);
}

html .login-wrap,
html .wrapper {
    background: rgba(255, 253, 249, 0.96);
    border: 1px solid var(--calm-line);
    border-radius: 8px;
    box-shadow: var(--calm-shadow);
}

html .login-wrap:after,
html .wrapper:after {
    background: linear-gradient(90deg, var(--calm-accent-dark), var(--calm-accent), var(--calm-warm));
    border-radius: 8px 8px 0 0;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="password"] {
    height: 44px;
    border: 1px solid var(--calm-line);
    border-radius: 8px;
    background-color: #fbfaf6;
    color: var(--calm-text);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.form input[type="text"]:focus,
.form input[type="email"]:focus,
.form input[type="password"]:focus {
    border-color: var(--calm-accent);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(77, 143, 130, 0.16);
}

.form button {
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--calm-accent-dark), var(--calm-accent));
    box-shadow: 0 10px 22px rgba(47, 111, 102, 0.18);
    font-size: 17px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.form button:hover,
.form button:focus {
    transform: translateY(-1px);
    box-shadow: var(--calm-shadow);
}

@media only screen and (max-width: 767px) {
    #menu-space {
        margin-bottom: 68px !important;
    }

    #top-menu,
    .navbar-default {
        min-height: 56px;
    }

    #menu-collapse {
        border-top: 1px solid var(--calm-line);
        background: var(--calm-surface);
    }

    #top-menu .navbar-nav > li > a {
        margin: 4px 10px;
        padding: 10px 12px;
    }

    .top-category-bar {
        padding: 12px 14px;
    }

    .top-category-bar > span,
    .top-category-bar .navbar-brand {
        font-size: 17px;
    }

    .main-search_item {
        min-height: 132px;
        padding: 12px 12px 12px 120px;
    }

    .search-content-left {
        top: 12px;
        left: 12px;
    }

    .search-content-left img {
        width: 92px;
        height: 108px;
    }

    .search-story-left-entry,
    .top-story-left-entry_date {
        width: 92px;
        font-size: 12px;
    }

    .search-content-right .story_name a {
        font-size: 16px;
    }

    .search-content-right .chapter_name {
        font-size: 14px;
    }

    #main-story-content {
        padding: 16px;
    }

    .btn-x,
    .previous,
    .next {
        padding: 12px 10px;
        font-size: 15px;
    }
}

@media only screen and (max-width: 360px) {
    .main-search_item {
        padding-left: 108px;
    }

    .search-content-left img,
    .search-story-left-entry,
    .top-story-left-entry_date {
        width: 82px;
    }
}